rollover div to change image

xlrsound · 04-30-2008, 10:24 AM

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.

HTML Code:

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");}
}

HTML Code:

<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** · 05-01-2008, 04:30 PM

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 · 05-01-2008, 07:27 PM

Quote:

Originally Posted by Jaxo

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.

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.

HTML Code:

<!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>
	 &nbsp;&nbsp;|&nbsp;&nbsp;
		 <a href="" class="top">********</a>
		&nbsp;&nbsp;|&nbsp;&nbsp;
		  <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

Code:

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 · 05-08-2009, 09:27 AM

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 · 05-08-2009, 09:28 AM

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

**ahmorrow** · 05-08-2009, 01:08 PM

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

FredT · 05-08-2009, 01:34 PM

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?

Quote:

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

BrentC · 05-10-2009, 01:14 PM

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

Code:

<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>

Code:

<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>

04-30-2008, 10:24 AM	#1 (permalink)
xlrsound Registered User Join Date: Aug 2007 Posts: 5 OS: Vista-Linux-XP sp2	rollover div to change image 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. HTML Code: 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");} } HTML Code: <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="" />

05-01-2008, 04:30 PM	#2 (permalink)
Jaxo Design Team Member Join Date: Feb 2008 Location: Deming, NM Posts: 312 OS: XP SP2 & Vista	Re: rollover div to change image 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. __________________ Help TSF Fight Cancer! Web Developer Tools: Firebug for Firefox \| IE Developer Toolbar \| Run multiple versions of IE

05-08-2009, 09:27 AM	#4 (permalink)
Tedrick Registered User Join Date: May 2009 Posts: 2 OS: XP	Re: rollover div to change image 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....

05-08-2009, 09:28 AM	#5 (permalink)
Tedrick Registered User Join Date: May 2009 Posts: 2 OS: XP	Re: rollover div to change image re: java scripting -- I'm afraid most people are beginning to disable java scripting -- so this might not be a good route --

05-08-2009, 01:08 PM	#6 (permalink)
ahmorrow God (TSF Enthusiast) Join Date: May 2009 Location: Jeffersonville, IN Posts: 903 OS: Ubuntu 9.10 [Karmic Koala] My System	Re: rollover div to change image Tedrick did you mean Java--scripting or JavaScript scripting? There's a bit of a difference. __________________ If I have not responded to a post in 24 hours or more, PM me with a link to the thread and I'll get back to you. I do not help via PM/IM/Email.