sorry ... total noob rollover debug

[Matt]

i know more-or-less zero about javascript, but my client wants a
rollover and he created this code, which doesn't work. All comments are
appreciated.

1. the tag:
<td align="center" width="66" nowrap="nowrap"
background="/work/phc1.10/images/layout/main_nav_bg.gif">
<a href="http://localhost/work/phc1.10/index.php?page=homecare"
onmouseover="imgSwap('','gnav_hc_on','gnav_hc_on')"
onmouseout="imgSwap('','gnav_hc_off','gnav_hc_off')">
<img name="gnav_hc_off"
src="/work/phc1.10/images/layout/gnav/gnav_hc_off.gif" border="0"
alt="Homecare" width="66" height="14" /></a>
</td>


2. the function:

function imgSwap(layer,imgName,imgObj) {
var layer;
var imgName;
var imgObj;
glayer = layer;
gimgName = imgName;
gimgObj = imgObj;
if(document.images) {
//NN 4.x DOM
if(document.layers && layer != "") {
eval('document.' + layer + '.document.images["' + imgName + '"].src =
' + imgObj + '.src');
}
//NN6 Gecko subroutine
else if((objClient.application == "nn") && (objClient.version >= 5)) {
imgSwapTimeOut();
}
else {
document.images[imgName].src = eval(imgObj + ".src");
}
}
}
//NN Gecko subroutine
function imgSwapTimeOut() {
document.images[gimgName].src = eval(gimgObj + ".src");
}

 

[Matt]

the "bug" is that the swap doesn't seem to occur. I have the javascript
console open and no error appears there. My dev box is Lx/firefox, but I
looked at it in IE as well and it's no good there either.

Thanks again.

 

[alu]

i know more-or-less zero about javascript, but my client wants a
rollover and he created this code, which doesn't work. All comments are
appreciated.

1. the tag:
<td align="center" width="66" nowrap="nowrap"
background="/work/phc1.10/images/layout/main_nav_bg.gif">
<a href="http://localhost/work/phc1.10/index.php?page=homecare"
onmouseover="imgSwap('','gnav_hc_on','gnav_hc_on')"
onmouseout="imgSwap('','gnav_hc_off','gnav_hc_off')">
<img name="gnav_hc_off"
src="/work/phc1.10/images/layout/gnav/gnav_hc_off.gif" border="0"
alt="Homecare" width="66" height="14" /></a>
</td>


2. the function:

function imgSwap(layer,imgName,imgObj) {
var layer;
var imgName;
var imgObj;
glayer = layer;
gimgName = imgName;
gimgObj = imgObj;
if(document.images) {
//NN 4.x DOM
if(document.layers && layer != "") {
eval('document.' + layer + '.document.images["' + imgName + '"].src =
' + imgObj + '.src');
}
//NN6 Gecko subroutine
else if((objClient.application == "nn") && (objClient.version >= 5)) {
imgSwapTimeOut();
}
else {
document.images[imgName].src = eval(imgObj + ".src");
}
}
}
//NN Gecko subroutine
function imgSwapTimeOut() {
document.images[gimgName].src = eval(gimgObj + ".src");
}

There are probably a million better written / less complex rollover scripts
out there, do you really need to use this one? If so, for starters, he
hasn't
set any image src's.
Secondly, the mouseover imgSwap('','gnav_hc_on','gnav_hc_on')"
should likely be imgSwap('','gnav_hc_off','gnav_hc_on')" since there is no
image named 'gnav_hc_on'.
If this is for a single rollover, (or perhaps in any case) junk the script,
not worth the trouble. Not to mention the <td> tag.
-alu

 

[ASM]

i know more-or-less zero about javascript, but my client wants a
rollover and he created this code, which doesn't work. All comments are
appreciated.

Your client use DW ? and its MacroMerdum ? and that doesn't work ?
Tremendous !

Try to tell him there is better way using css to get a rollover.
i.e :
http://perso.wanadoo.fr/stephane.moriaux/truc/bouton_3_etats_css.htm
that doesn't need pre-loading of images and is much cheaper

there are very simple ways to set a rollover

the easiest but the worst :

<a href="somePage.htm" target="_blank"
onmouseover="ir=document.images('foo'); ir.src="img_over.gif;"
onmouseout="ir.src="img_out.gif">
<img name="foo" src="img_out.gif" border=0></a>


better :

<script type="text/javascript"><!-- // script to put in header

// sometimes the following pre-loads images (NC4, IE4 to FF1.0.4, IE6)
if(document.images) {
But_01 = new Image(); But_01.src = 'buttons/I_01.gif'; // normal
But_01o = new Image(); But_01o.src = 'buttons/O_01.gif'; // over

But_02 = new Image(); But_02.src = 'buttons/I_01.gif'; // normal
But_02o = new Image(); But_02o.src = 'buttons/O_01.gif'; // over

// and so on for each button
}

function di(name,id) { if(document.images)
eval(document.images(name).src = id+'.src'); }

// --></script>
</head>
<body>
<a href="somePage.htm"
onmouseover="di('Ig_01','But_01o');
onmouseover="di('Ig_01','But_01');>
<img name="Ig_01" src="buttons/I_01.gif" border=0></a>
<a href="someOtherPage.htm"
onmouseover="di('Ig_02','But_02o');
onmouseover="di('Ig_02','But_02');>

1. the tag:
<td align="center" width="66" nowrap="nowrap"
background="/work/phc1.10/images/layout/main_nav_bg.gif">
<a href="http://localhost/work/phc1.10/index.php?page=homecare"
onmouseover="imgSwap('','gnav_hc_on','gnav_hc_on')"
onmouseout="imgSwap('','gnav_hc_off','gnav_hc_off')">
<img name="gnav_hc_off"
src="/work/phc1.10/images/layout/gnav/gnav_hc_off.gif" border="0"
alt="Homecare" width="66" height="14" /></a>
</td>


2. the function:

ask to DreamWeaver

 

[Matt]

I junked the old script and am getting some functionality with this:

if (document.images) {
gnav_ho_up = new Image();
gnav_ho_up.src = "/work/phc1.10/images/layout/gnav/gnav_ho_off.gif" ;
gnav_ho_down = new Image() ;
gnav_ho_down.src = "/work/phc1.10/images/layout/gnav/gnav_ho_on.gif" ;
}

function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "_down.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "_up.src" );
}
}


tag:
<a href="http://localhost/work/phc1.10/index.php?page=phchome"
onmouseover="buttondown('gnav_ho')"
onmouseout="buttonup('gnav_ho')">

<img name="gnav_ho"
src="/work/phc1.10/images/layout/gnav/gnav_ho_off.gif" border="0"
alt="Home" width="100" height="14" /></a>

problem: it's saying that image can't be found. the reference in the
<img ...
tag works -- that image appears. but when you roll over it gets the
blank box instead of gnav_ho_on.gif

I've tried inserting all manner of slashes etc. How does one tell
javascript to use src's relative to the site's root?