Forum Moderators: open

Message Too Old, No Replies

javascript rollovers

swap images don't display

         

YoYoPa

9:28 pm on Feb 26, 2004 (gmt 0)

10+ Year Member



Hi. I am using javascript with css to generate dropdown menus that have a mouseover image swap component. The trouble is, I can only seem to get it working when the scripts and images are in the same directory as the html file that uses the menus. When I try to reference the scripts (css and javascript), the swap images don't work (but everything else does) so you have these drop down menus appearing but no swap image. The initial images appear but then disappear on mouseover. How do I point the script to right place so that it can find the swap images? Any insight would be appreciated!

isitreal

5:27 am on Feb 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You have to have set the wrong path on the rollovers from the sound of it, check your onload event for the image load, see what the paths are, make sure they are the same path as you have for the first images on the web page, the ones that are swapped that is.

YoYoPa

3:16 pm on Mar 25, 2004 (gmt 0)

10+ Year Member



First of all, thanks for the response. Yes, I agree with your assessment that this is a simple matter of setting the proper path... the problem is I'm a complete neophyte in the Javascript arena and I have no idea how to set the path for the images within the javascript code. I just used some code that I found on a website to do the rollover and I modified the parts I could (the obvious stuff like renaming some of the quoted parameters in the doInit() function e.g.

function doInit(){
if(document.layers){
document.menu01.onmouseover=new Function("doMenu('01',1,'about_ccac')");
document.menu01.onmouseout =new Function("doMenu('01',0,'about_ccac')");

document.menu02.onmouseover=new Function("doMenu('02',1,'publications')");
document.menu02.onmouseout =new Function("doMenu('02',0,'publications')");

etc...

There were also these 2 functions that were in the code... might this be where I could change the path for the images?... document.something.yaddayadda?

function flipOn(button){eval("document."+button).src = "nav."+button+"_on.gif";}
function flipOff(button){eval("document."+button).src = "nav."+button+"_off.gif";}

The only other place I can think of where the path might be modified would be in one of the following 3 functions:

function showHide(div,nest){
obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
if(obj.visibility=='visible' ¦¦ obj.visibility=='show') obj.visibility='hidden'
else obj.visibility='visible'
}
//Shows the div
function show(div,nest){
obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
if ( obj ) {
obj.visibility='visible';
}
}
//Hides the div
function hide(div,nest){
obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
if ( obj ) {
obj.visibility='hidden';
}
}

As I said, I am totally new to this and the syntax is pretty much opaque to me. I have tried simply moving the script and the images to a different directory and modifying the references in the HTML code accordingly but evidently there is a missing ingredient. Thanks again!

YoYoPa

8:23 pm on Mar 30, 2004 (gmt 0)

10+ Year Member



Okay, I figured it out! I just had to change the path in the following two functions:

function flipOn(button){eval("document."+button).src = "nav."+button+"_on.gif";}
function flipOff(button){eval("document."+button).src = "nav."+button+"_off.gif";}

like so:

"path/nav."+button+"_on.gif"

It's amazing what one can do when one finally has a few free minutes to try out some ideas, eh?!