Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > sorry ... total noob rollover debug

Reply
Thread Tools

sorry ... total noob rollover debug

 
 
Matt
Guest
Posts: n/a
 
      07-18-2005
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");
}
 
Reply With Quote
 
 
 
 
Matt
Guest
Posts: n/a
 
      07-18-2005
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.
 
Reply With Quote
 
 
 
 
alu
Guest
Posts: n/a
 
      07-18-2005

"Matt" <(E-Mail Removed)> wrote
> 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


 
Reply With Quote
 
ASM
Guest
Posts: n/a
 
      07-18-2005
Matt wrote:
> 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.mor..._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');>
<img name="Ig_02" src="buttons/I_02.gif" border=0></a>

> 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

--
Stephane Moriaux et son [moins] vieux Mac
 
Reply With Quote
 
Matt
Guest
Posts: n/a
 
      07-18-2005
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?
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Sorry for the NOOB question.. Zach Heath C Programming 19 09-18-2007 07:05 AM
BT Total Broadband vs BT Business Total John Y UK VOIP 2 02-02-2007 09:27 AM
Total noob Wireless network question Andrew W NZ Computing 12 08-17-2005 06:27 AM
Total noob question re: python icon ArtDent Python 3 02-07-2004 04:46 AM
Sorry Sorry Sorry but what camera for me - Real Esate Phil Digital Photography 19 12-28-2003 05:28 PM



Advertisments