div image swap not working on "onmouseout" event

Lincoln LS - Loan - Loan - Free Advertising - Easy movies download

View Full Version : div image swap not working on "onmouseout" event

swiftouch

Jan 30th 2008, 2:12 am

I'm not sure why the "onmouseover" event works but the "onmouseout" does not.

<html>
<head>
<script>
//element id, hover image , normal image
function swap(docID,img) {
imageSrc = "<img src='images/" + img + "' />";
e = document.getElementById(docID);
e.innerHTML = imageSrc;
}
</script>
</head>

<body>


<div style="float: left;" onmouseover="swap('img1','ho-home.gif');" onmouseout="swap('img1','no-home.gif');">
<div id="img1"><img src="images/no-home.gif" /></div>
</div>

</body>
</html>

Any help would be greatly appreciated. :)

mjamesb

Feb 1st 2008, 9:23 am

That is weird..the event is not firing when I look at it using FireBug...if you use the img.src instead it works...

<html>
<head>
<script>
//element id, hover image , normal image
function swap(docID,img) {
imageSrc = "images/" + img;
e = document.getElementById(docID);
e.src = imageSrc;
}
</script>
</head>

<body>


<div style="float: left;" onmouseover="swap('img1','folder_open_128.png');" onmouseout="swap('img1','folder_closed_128.png');">
<img id="img1" src="images/folder_closed_128.png" />
</div>

</body>
</html>

LittleJonSupportSite

Feb 1st 2008, 9:32 am

How about something like this:

<SCRIPT LANGUAGE="JavaScript">

var aryImages = new Array(2);

aryImages[0] = "images/default.gif";
aryImages[1] = "images/flowers_LRG.jpg";
aryImages[2] = "images/leaf_LRG.jpg";
aryImages[3] = "images/cat_LRG.jpg";

for (i=0; i < aryImages.length; i++) {
var preload = new Image();
preload.src = aryImages[i];
}

function swap(imgIndex, imgTarget) {
document[imgTarget].src = aryImages[imgIndex];
}
</script>

<div id="thmbs">
<img src="images/flowers.jpg"
onMouseOver="swap(1, 'imgDefault')"
onMouseOut="swap(0,'imgDefault')" >
<img src="images/leaf.jpg"
onMouseOver="swap(2, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')">
<img src="images/cat.jpg"
onMouseOver="swap(3, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')">
</div>
<div id="target">
<img name="imgDefault" src="images/default.gif" >
</div>

luceduce

Oct 4th 2008, 12:57 pm

Okay, I want to create a navigation bar.
There are 14 links, and each will have an image swap function.

If you put your mouse over the Homepage link, for example, the "dotted" image next to it will swap images into a different image (image #3). And if you put your mouse over this "dotted" image, it will also swap into this same different image (image #3).

How can I make this (tabled?) script work correctly?
So far, all three images are pointing to the very same target image, which I want them each to point to their very own targeted image.

Can it be done? And if so, what's the code to do it?

Thanks !

luceduce

How about something like this:

<SCRIPT LANGUAGE="JavaScript">

var aryImages = new Array(2);

aryImages[0] = "images/default.gif";
aryImages[1] = "images/flowers_LRG.jpg";
aryImages[2] = "images/leaf_LRG.jpg";
aryImages[3] = "images/cat_LRG.jpg";

for (i=0; i < aryImages.length; i++) {
var preload = new Image();
preload.src = aryImages[i];
}

function swap(imgIndex, imgTarget) {
document[imgTarget].src = aryImages[imgIndex];
}
</script>

<div id="thmbs">
<img src="images/flowers.jpg"
onMouseOver="swap(1, 'imgDefault')"
onMouseOut="swap(0,'imgDefault')" >
<img src="images/leaf.jpg"
onMouseOver="swap(2, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')">
<img src="images/cat.jpg"
onMouseOver="swap(3, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')">
</div>
<div id="target">
<img name="imgDefault" src="images/default.gif" >
</div>

luceduce

Oct 5th 2008, 10:40 am

So here's my code so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">

var aryImages = new Array(2);

aryImages[0] = "images/weddingbandsdot.gif";
aryImages[1] = "images/weddingbandssmall.gif";
aryImages[2] = "images/weddingbandssmall.gif";
aryImages[3] = "images/weddingbandssmall.gif";
aryImages[4] = "images/weddingbandssmall.gif";
aryImages[5] = "images/weddingbandssmall.gif";
aryImages[6] = "images/weddingbandssmall.gif";
aryImages[7] = "images/weddingbandssmall.gif";
aryImages[8] = "images/weddingbandssmall.gif";
aryImages[9] = "images/weddingbandssmall.gif";
aryImages[10] = "images/weddingbandssmall.gif";
aryImages[11] = "images/weddingbandssmall.gif";
aryImages[12] = "images/weddingbandssmall.gif";
aryImages[13] = "images/weddingbandssmall.gif";
aryImages[14] = "images/weddingbandssmall.gif";

for (i=0; i < aryImages.length; i++) {
var preload = new Image();
preload.src = aryImages[i];
}

function swap(imgIndex, imgTarget) {
document[imgTarget].src = aryImages[imgIndex];
}
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="Layer1">
<div id="thmbs">
<img src="images/links/homepage.gif" width="82" height="17" align="right"
onMouseOver="swap(1, 'imgDefault')"
onMouseOut="swap(0,'imgDefault')" ><br/>
<img src="images/links/theevent.gif" width="78" height="15" align="right"
onMouseOver="swap(2, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')"><br/>
<img src="images/links/journal.gif" width="56" height="15" align="right"
onMouseOver="swap(3, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')"><br/>
<img src="images/links/ourstories.gif" width="87" height="15" align="right"
onMouseOver="swap(4, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')"><br/>
<img src="images/links/polls.gif" width="38" height="15" align="right"
onMouseOver="swap(5, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')"><br/>
<img src="images/links/quizzes.gif" width="61" height="18" align="right"
onMouseOver="swap(6, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')"><br/>
<img src="images/links/familyandfriends.gif" width="148" height="18" align="right"
onMouseOver="swap(7, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')"><br/>
<img src="images/links/theweddingparty.gif" width="147" height="18" align="right"
onMouseOver="swap(8, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')"><br/>
<img src="images/links/photoalbums.gif" width="109" height="15" align="right"
onMouseOver="swap(9, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')"><br/>
<img src="images/links/videos.gif" width="53" height="15" align="right"
onMouseOver="swap(10, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')"><br/>
<img src="images/links/giftregistry.gif" width="99" height="18" align="right"
onMouseOver="swap(11, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')"><br/>
<img src="images/links/thankyou.gif" width="83" height="15" align="right"
onMouseOver="swap(12, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')"><br/>
<img src="images/links/guestbook.gif" width="82" height="15" align="right"
onMouseOver="swap(13, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')"><br/>
<img src="images/links/contactus.gif" width="85" height="14" align="right"
onMouseOver="swap(14, 'imgDefault')"
onMouseOut="swap(0, 'imgDefault')"><br/><br/>
</div>
</div>

<div id="Layer2">
<div id="target">
<img src="images/weddingbandsdot.gif" name="imgDefault" align="left">
</div>
</div>

</body>
</html>

Now, does anyone know how to get each "linked" image to have its own image swapping icon next to it?

P.S.: The "linked" images are as follows:

homepage.gif
thevent.gif
journal.gif
ourstories.gif
polls.gif
quizzes.gif
familyandfriends.gif
theweddingparty.gif
photoalbums.gif
videos.gif
giftregistry.gif
thankyou.gif
guestbook.gif
contactus.gif

Thanks in advance to those of you reading my post!