# rollover div to change image



## xlrsound (Aug 22, 2007)

Hi,

I am currently working on a site that I want to have multiple divs (the menu) that when you roll over them it would change the image in the page(each div having its own image). I've been trying to get this javascript to work but it dosn't look like its gona work because the onmouseover and onmouseout in the divs directs it to the image which can only have one name (or can it have more then one?). anyway can anybody help me with this? I don't know if I explained it properly but if you have questions then ask.




```
if (document.images) { 
img1on = new Image();
img1on.src = "images/over1.jpg"; 
img1off = new Image(); 
img1off.src = "images/notover.jpg"; 
img2on = new Image();
img2on.src = "images/over2.jpg"; 
img2off = new Image(); 
img2off.src = "images/notover.jpg"; 
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");}
}
```


```
<div><a href="" onmouseover="imgOn('img1')" onmouseout="imgOff('img1')">selection 1</a></div>
<div><a href="" onmouseover="imgOn('img2')" onmouseout="imgOff('img2')">selection 2</a></div>


<img name="img1" src="images/notover.jpg" alt="" />
```


----------



## Jaxo (Feb 21, 2008)

Hey xlrsound,

Question for you. Are you trying to change an image located at the same spot your mouse hovers over? Like a button? OR... Are you trying to change and image located somewhere else on the page by hovering over a link/image in a different location? Make sense?

Just to help clear up my thinking. It would also help to have all code(all css and html) and a link to the site if possible.

Thanks.


----------



## xlrsound (Aug 22, 2007)

Jaxo said:


> Hey xlrsound,
> 
> Question for you. Are you trying to change an image located at the same spot your mouse hovers over? Like a button? OR... Are you trying to change and image located somewhere else on the page by hovering over a link/image in a different location? Make sense?
> 
> ...


I am trying to change and image located somewhere else on the page by hovering over a div. The site is in the early stages so I don't have it on a server yet, but here is the whole page so far.


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript" src="menu_mouseover.js"></script> 


</head>
<body>

<center>
<table border="0" cellpadding="5" cellspacing="0"><tr>

<td align="center">
 <img src="images/head.jpg" alt=""/>
  </td>
	
	<td width="300" align="center" valign="top" class="******">
	 ********<br />***********
	  </td>
		
	<tr><td colspan="2" align="center"><font color="#616568">
	  <a href="" class="top">******</a>
	   |  
		 <a href="" class="top">********</a>
		  |  
		  <a href="" class="top">******</a>
	
	</td></tr></font>

</tr></table>


<table border="0" cellpadding="10" cellspacing="0"><tr><td colspan="2" valign="top">
<img src="images/cat_bg.jpg" alt="" />
<div><a class="menu" href="" onmouseover="imgOn('img1')" onmouseout="imgOff('img1')">selection</a></div>
<div><a class="menu" href="" onmouseover="imgOn('img2')" onmouseout="imgOff('img2')">selection</a></div>
<div><a class="menu" href="">selection</a></div>
<div><a class="menu" href="">selection</a></div>
<div><a class="menu" href="">selection</a></div>
<div><a class="menu" href="">selection</a></div>

<br />

<img src="images/cat_bg.jpg" alt="" />
<div><a class="menu" href="">selection</a></div>
<div><a class="menu" href="">selection</a></div>
<div><a class="menu" href="">selection</a></div>
<div><a class="menu" href="">selection</a></div>
<div><a class="menu" href="">selection</a></div>
<div><a class="menu" href="">selection</a></div>
</td>


<td width="620" valign="top"><img src="images/tl.jpg" /><img width="570" height="25" src="images/t.jpg" /><img src="images/tr.jpg" /><table border="0" cellpadding="20" cellspacing="0" width="620" bgcolor="white"><tr><td><img name="img1" src="images/notover.jpg" alt="" /><br/>**** ******* ************* ********************* ****** ** ************************ **** ******** ********** ****** ******* **** *** ****** ***</td></tr></table></td>




</tr></table>

</center>



</body>
</html>
```
Here is the menu_mouseover.js file

```
if (document.images) { 
img1on = new Image();
img1on.src = "images/over1.jpg"; 
img1off = new Image(); 
img1off.src = "images/notover.jpg"; 
img2on = new Image();
img2on.src = "images/over2.jpg"; 
img2off = new Image(); 
img2off.src = "images/notover.jpg"; 
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");}
}
```


----------



## Tedrick (May 8, 2009)

Hi - this is something I am trying to do too -- I have a product gallery with a menu on the left side -- when you mouse over a menu item, I'd like the image in the main section of the gallery page change to an image related to that menu item --

I would appreciate any recommendations on css tricks to research and try --

I suppose you could do the whole thing in flash....


----------



## Tedrick (May 8, 2009)

re: java scripting -- I'm afraid most people are beginning to disable java scripting -- so this might not be a good route --


----------



## ahmorrow (May 5, 2009)

Tedrick did you mean Java--scripting or JavaScript scripting? There's a bit of a difference.


----------



## FredT (Nov 16, 2007)

What is wrong here? I tested it and it worked for me. Only the first rollover worked, though, because there is no image in the document called 'img2'.

Edit - Could you clarify this?


> it dosn't look like its gona work because the onmouseover and onmouseout in the divs directs it to the image which can only have one name


----------



## brent.charlebois (May 8, 2007)

Take a look a this code...I haven't tested it but it should give you the idea:


```
<script type="text/javascript">
  
function imgOn(imgNumber) **
    if (document.images)
    document.getElementById("Image" + imgNumber.toString()).src = "images/over" + imgNumber.toString() + ".jpg";
}

function imgOff(imgNumber) **
    if (document.images)
    document.getElementById("Image" + imgNumber.toString()).src = "images/notover.jpg";
}

</script>
```



```
<body>

<div>
  <img id="Image1" src="images/notover.jpg" alt="" onmouseover="imgOn(1)" onmouseout="imgOff(1)"/>
</div>

<div>
  <img id="Image2" src="images/notover.jpg" alt="" onmouseover="imgOn(2)" onmouseout="imgOff(2)"/>
</div>


  </body>
```


----------

