html image problem

**adiadrian79** · 04-23-2012, 02:16 PM

Hello!
I'm a beginer in html and i need some help,if is possible,please.
I don't know how to make a mouseover to show me the image in another division.
I have the navigation butons in a left div and i want ,when the mouse is on one button to show me, in the right div an image. I hope you understand what i want to say.
Thank you in advance for yours answer!

**auntnini** · 04-23-2012, 05:23 PM

See http://oksenhendler.webs.com/generic...leCutPlus.html
and http://webdocdo.tripod.com/genericRo.../multiple.html
or http://www.auntnini.com/new/index.htm

Name the large image (e.g., "holder") add JavaScript onmouseover or onclick on thumbnail or text to change source of holder.

Code:

<a href="#nogo" onmouseover="document.images['holder'].src='lighthouse.jpg'" onclick="document.images['holder'].src='lighthouse.gif'"> Lighthouse </a>

**adiadrian79** · 04-24-2012, 04:04 AM

Thank you very much for your help, but...

I hope you don't mind.
I start to learn html for one mounth and I'm too short minded and now,because you are my teacher, please explain me

I don't know how to adapt it for my page.

This is the source code:

<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta name="author" content="Stefanescu_Adrian">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="description" content="Vacante in Bulgaria,cu cazare in diferite hoteluri,vile din Nisipurile Aurii,Albena,Pomorie.Sejuriri ieftine pe litoralul bulgaresc">
<meta name="keywords" content="hoteluri,nisipurile de aur,albena,sunny beach, vacanta, litoral,bulgaria,cazare">
<link rel="stylesheet" type="text/css" href="style.css"/>
<title> Statiuni in Bulgaria </title>
<link rel="Shortcut icon" href="imagininoi/favicon.ico"/>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Buna dimineata!</b>");
}
else if (time>=10 && time<16)
{
document.write("<b>Buna ziua!</b>");
}
else
{
document.write("<b>Buna seara!</b>");
}
</script>
<div id="tot">
<div id="header">
<h1>Statiuni in Bulgaria</h1><br/>
<ul>
<li><a href="index.html" class="classname">Acasa</a></li>
<li><a href= "statiuni.html" class="classname">Statiuni Litoral</a></li>
<li><a href= "contact.html" class="classname">Contact</a></li>
</ul>
</div>
<div id="subheader">
<img src="imagininoi/h1.jpg" width="190" height="200"/>
<img src="imagininoi/h2.jpg" width="200" height="200"/>
<img src="imagininoi/h3.jpg" width="200" height="200"/>
<img src="imagininoi/h4.jpg" width="190" height="200"/>
</div>
<div id="corp">
<div id="corpststatiuni">
<a href="ahtopol.html" class="classname">Ahtopol</a>
<a href="burgas.html" class="classname">Burgas</a>
<a href="goldensands.html" class="classname">Golden Sands</a>
<a href="kiten.html" class="classname">Kiten</a>
<a href="nesebar.html" class="classname">Nesebar</a>
<a href="pomorie.html" class="classname">Pomorie</a>
<a href="ravda.html" class="classname">Ravda</a>
<a href="sozopol.html" class="classname">Sozopol</a>
<a href="sunny.html"class="classname">Sunny Beach</a>
<a href="varna.html" class="classname">Varna</a>
</div>
<div id="corpdr">
//HERE I WANT THE PICTURES TO APPEAR
</div>
<div id="footer">
<p>Copyright©2012. Adi Stef. Toate drepturile rezervate.</p>
</div>
</div>
</div>
</body>
</html>

In the div "corpdr" i want to apear the pictures.
Some words you will not understand cause are in romanian. If you want to see the page :
hoteluri-bulgaria.webatu.com/statiuni.html
I hope the admin wount be upset cause i put the link here,but i realy need help from the people who know.

**spufi** · 04-24-2012, 07:06 AM

http://hoteluri-bulgaria.webatu.com/statiuni.html

You need a DOCTYPE as the first line of code.

**adiadrian79** · 04-24-2012, 08:02 AM

I have,but i forgot to put it there. Sorry!

**auntnini** · 04-25-2012, 06:27 PM

The following ONMOUSEOVER and ONCLICK does NOT pre-load images. For pre-load see source code of previously noted links and/or http://www.josephdenaro.com/bw/index.html or http://www.josephdenaro.com/Templates/rollPOP.dwt

Code:

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta name="author" content="Stefanescu_Adrian">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="description" content="Vacante in Bulgaria,cu cazare in diferite hoteluri,vile din Nisipurile Aurii,Albena,Pomorie.Sejuriri ieftine pe litoralul bulgaresc">
<meta name="keywords"  content="hoteluri,nisipurile de aur,albena,sunny beach, vacanta, litoral,bulgaria,cazare">
<link rel="stylesheet" type="text/css" href="style.css"/>
<title> Statiuni in Bulgaria </title> 
<link rel="Shortcut icon" href="imagininoi/favicon.ico"/>
 <script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>

<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
  {
  document.write("<b>Buna dimineata!</b>");
  }
else if (time>=10 && time<16)
  {
  document.write("<b>Buna ziua!</b>");
  }
else
  {
  document.write("<b>Buna seara!</b>");
  }
</script>


<div id="tot">
        <div id="header"> 
		         <h1>Statiuni in Bulgaria</h1><br/>
                 <ul>
			     <li><a href="index.html" class="classname">Acasa</a></li>
                 <li><a href= "statiuni.html" class="classname">Statiuni Litoral</a></li>

			     <li><a href= "contact.html" class="classname">Contact</a></li>
		         </ul>  
		</div>
         <div id="subheader">
         <a href="#nogo" onmouseover="document.images['holder'].src='imagininoi/h1.jpg'" onclick="document.images['holder'].src='imagininoi/h2.jpg'">  
              <img src="imagininoi/h1.jpg" width="190" height="200" /></a>
	    <a href="#nogo" onclick="document.images['holder'].src='imagininoi/h2.jpg'">		
            <img src="imagininoi/h2.jpg" width="200" height="200"/></a>
        <a href="#nogo" onclick="document.images['holder'].src='imagininoi/h3.jpg'">
			<img src="imagininoi/h3.jpg" width="200" height="200"/></a>
		
        <a href="#nogo" onclick="document.images['holder'].src='imagininoi/h4.jpg'">	
            <img src="imagininoi/h4.jpg" width="190" height="200"/></a>
		</div>	 
        <div id="corp">

             <div id="corpststatiuni"> 
			   <a href="ahtopol.html" onmouseover="document.images['holder'].src='imagininoi/h1.jpg'" class="classname">Ahtopol</a>
			    <a href="burgas.html"  onmouseover="document.images['holder'].src='imagininoi/h2.jpg'" class="classname">Burgas</a>
			    <a href="goldensands.html" onmouseover="document.images['holder'].src='imagininoi/h3.jpg'" class="classname">Golden Sands</a>
			    <a href="kiten.html" onmouseover="document.images['holder'].src='imagininoi/h4.jpg'" class="classname">Kiten</a>
                <a href="nesebar.html" class="classname">Nesebar</a>
			    <a href="pomorie.html" class="classname">Pomorie</a>

			     <a href="ravda.html" class="classname">Ravda</a>
				 <a href="sozopol.html" class="classname">Sozopol</a>
				<a href="sunny.html"class="classname">Sunny Beach</a>
				 <a href="varna.html" class="classname">Varna</a>
		 </div>
			  <div id="corpdr"><!--do NOT include width & height if images are different sizes -->
              <h4> images change here on roll-over or onClick</h4>
              <img name="holder" id="holder" src="imagininoi/h1.jpg" alt="" />
			
				</div>	
			 
			 <div id="footer">

			 <p>Copyright&#169;2012. Adi Stef. Toate drepturile rezervate.</p>
			</div>
        </div>
 </div>
 </body>
</html>
<!-- www.**********.com Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://stats.hosting24.com/count.php" alt="web hosting" /></a></noscript>

<!-- End Of Analytics Code -->

Thread: html image problem

Thread Tools

Display

Hybrid View

html image problem

some code

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions