#1
  1. 11
    Devshed Demi-God (4500 - 4999 posts)

    Join Date
    Jul 2001
    Location
    Lynn, MA
    Posts
    4,635
    Rep Power
    82

    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.
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    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;
    }
  4. #3
  5. 11
    Devshed Demi-God (4500 - 4999 posts)

    Join Date
    Jul 2001
    Location
    Lynn, MA
    Posts
    4,635
    Rep Power
    82
    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).
  6. #4
  7. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    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>

IMN logo majestic logo threadwatch logo seochat tools logo