Help with simple javascript rollover code

Dev Shed Forums Sponsor:

June 4th, 2002, 02:10 PM

Hero Zzyzzx

Join Date: Jul 2001

Location: Lynn, MA

Posts: 4,635

Time spent in forums: 4 Days 23 h 44 m 19 sec
Reputation Power: 77

Help with simple javascript rollover code

Yo folks,

So I wrote a custom javascript function to roll over images for me- I want to be able to pass it directly the "on" and "off" images because I'm going to be programmatically generating rollovers via mod_perl and HTML::Template.

This function works in every browser I've tried (IE 5, 5.5, konqueror and mozilla) EXCEPT netscape 4.x.

I'm not really a javascript expert, and I'm sure it's something simple I'm doing wrong here. Can one of you more gifted in javascript take a look and tell me what I'm screwing up?

Here's the function, which resides in "/js-lib/mls2.js" and is linked into the document via <script language="JavaScript" src="/js-lib/mls2.js" type="text/javascript"></script> in the <head> section:

Code:

function RollOver(objRef, imageOn, imageOff, imgChange)
{
	if (imgChange) {
		eval("document."+objRef.name+".src='"+imageOn+"'");
	} else {
		eval("document."+objRef.name+".src='"+imageOff+"'")
		};
}

and here's how I'm using it:

Code:

<img name="news" border="0" src="/graphics/news.gif" width="54" height="15" alt="News" onMouseOver="RollOver(news,'/graphics/news1.gif','/graphics/news.gif',true);" onMouseOut="RollOver(news,'/graphics/news1.gif','/graphics/news.gif',false);">

Thanks in advance.

June 4th, 2002, 05:36 PM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 10

The only way to attach mouse handlers to an Image object in NS4 is programmatically (JavaScript);
they're not supported in HTML. Typically, the image is wrapped in a hyperlink which binds the handlers.
If you decide to do this in JS, call an onload function, and iterate through the document.images collection,
assigning the handlers one by one:

if (!document.layers) return;//NS4 only
var currImg;
for (var d=0; d<document.images.length; ++d) {
currImg = document.images[d];
currImg.onmouseover = function() {
RollOver(parameters);
}
currImg.onmouseout = function() {
RollOver(parameters);
}
}

Presumably you'd output the parameters, server-side, into arrays, and write them into the scripted handlers one by one.
Won't get a hand cursor though, even with CSS.

btw you can skip the eval():

function RollOver(objRef, imageOn, imageOff, imgChange)
{
if (imgChange) document[objRef.name].src = imageOn;
else document[objRef.name].src = imageOff;
}

June 4th, 2002, 06:02 PM

Hero Zzyzzx

Join Date: Jul 2001

Location: Lynn, MA

Posts: 4,635

Time spent in forums: 4 Days 23 h 44 m 19 sec
Reputation Power: 77

Thanks! I'll try getting rid of the eval and see what happens.

Right after I posted this, I realized that I needed to attach the onMouseOver and OnMouseOut events to the anchor tag enclosing the img tag. Funny that it worked everywhere EXCEPT N4.X in the img tag (not surprising, though).

June 4th, 2002, 06:54 PM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 10

Just in case you were interested:

Code:

<html>
<head>
<title>JS rolls</title>
<base href="http://forums.devshed.com/images/">
<script type="text/javascript" language="JavaScript">

var args = new Object();
args['button1'] = { onURL: 'newthread.gif' , offURL: 'reply.gif' }
args['button2'] = { onURL: 'top_faq.gif' , offURL: 'top_calendar.gif' }

function RollOver(imgName, imageOn, imageOff, imgChange) { 
if (imgChange) document[imgName].src = imageOn; 
else document[imgName].src = imageOff; 
}

onload = function() {
var currImg; 
for (var d=0; d<document.images.length; ++d) { 
currImg = document.images[d];
if (currImg.name) {
currImg.onmouseover = new Function(
'RollOver("' + currImg.name + '","' + args[currImg.name].onURL + '","' + args[currImg.name].offURL +'",true)');
currImg.onmouseout = new Function( 
'RollOver("' + currImg.name + '","' + args[currImg.name].onURL + '","' + args[currImg.name].offURL +'",false)');
}
}
}

</script>
</head>
<body>
<img name="button1" src="http://forums.devshed.com/images/reply.gif"><br><br>
<img name="button2" src="http://forums.devshed.com/images/top_calendar.gif">
</body>
</html>

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: