Problems with a rollover script

@atheistNov 14.2004

I just created my first script. (Based off a tutorial, though) A script used to create rollover effects. And, well, it creates the rollover effects, but it doesn’t remove them when the mouse is moved off the image.

Here’s the code:

[CODE] <script language=”JavaScript”>

first = new Image first.src = “/data/images/misc/controls/first.gif” firsthover = new Image firsthover.src = “/data/images/misc/controls/firsthover.gif” previous = new Image previous.src = “/data/images/misc/controls/previous.gif” previoushover = new Image previoushover.src = “/data/images/misc/controls/previoushover.gif” next = new Image next.src = “/data/images/misc/controls/next.gif” nexthover = new Image nexthover.src = “/data/images/misc/controls/nexthover.gif” last = new Image last.src = “/data/images/misc/controls/last.gif” lasthover = new Image lasthover.src = “/data/images/misc/controls/lasthover.gif”

function switchimages(imagename, newimage) { document.images[imagename].src = newimage.src }

</script> [/CODE]

[code=php] … if($currentid != 1) { $todisplay .= ” <a href=”{$_SERVER[‘PHP_SELF’]}?action=comic&id=1″ onmouseover=”switchimages(‘first’, firsthover)” onmouseout=”switchimages(‘first’, first)”> <img name=”first” src=”/data/images/misc/controls/first.gif” width=”32″ height=”32″ alt=”First” /> </a>n”; } else { … [/code]

I tripple checked if the paths to the .gif files were correct, which was pretty much the only thing I thought that could have been wrong.

If you could offer some suggestions on how to fix this script, it’d be great.

Thanks.

to post a comment

JavaScript

11 Comments(s) _↴

@ebivenNov 14.2004 — #Normally I'd put on onMouseOver and onMouseOut to swap the image in the image tag itself, not the anchor tag it's in. I'm not sure if that's it but it can't hurt.

@atheistauthorNov 14.2004 — #Thanks, but it didn't work. And it shouldn't... since it DOES switch the images when I hover the mouse over. It just doesn't switch back. So there's probably something wrong with the onmouseout event? Something I really can't seem to find.

Any further input on this will be appreciated.

@javaNoobieNov 14.2004 — #Post the generated html codes for us to take a look at.

@atheistauthorNov 14.2004 — #[URL=http://itami.ath.cx]Here's[/URL] the site itself, as it is right now.

Here's the relevant php code:

[code=php]
 ...
 <table id="controls" width="768" height="40" border="0" cellpadding="0" cellspacing="0" onload="preloadimages();">
 <tr>
 <td id="first" width="40" height="40">n";
 
   if($currentid != 1) {
   $todisplay .= "                 <a href="{$_SERVER['PHP_SELF']}?action=comic&id=1"
   onmouseover="switchimages('first', firsthover)"
   onmouseout="switchimages('first', first)">
   <img name="first" src="/data/images/misc/controls/first.gif" width="32" height="32" alt="First"$
   </a>n";
   } else {
   $todisplay .= "<img src="/data/images/misc/controls/first.gif" width="32" height="32" alt="First" />n";
   }
 
   $todisplay .= "         </td>
   <td id="previous" width="40" height="40">n";
 
   if($currentid != 1) {
   $id = $currentid - 1;
   $todisplay .= "                 <a href="{$_SERVER['PHP_SELF']}?action=comic&id={$id}"
   onmouseover="switchimages('previous', previoushover)"
   onmouseout="switchimages('previous', previous)">
   <img name="previous"src="/data/images/misc/controls/previous.gif" width="32" height="32" alt="Pr$
   </a>n";
   } else {
   $todisplay .= "<img src="/data/images/misc/controls/previous.gif" width="32" height="32" alt="Previous" />n";
   }
 
   $todisplay .= "         <td id="select" width="508" height="40">
   &nbsp;
   </td>
   <td id="next" width="40" height="40">";
 
   $queryarg = "SELECT id FROM comics ORDER BY id DESC";
   $query = mysql_query($queryarg);
   $lastid = mysql_result($query, 0);
 
   if($currentid != $lastid) {
   $id = $currentid + 1;
   $todisplay .= "                 <a href="{$_SERVER['PHP_SELF']}?action=comic&id={$id}"
   onmouseover="switchimages('next', nexthover)"
   onmouseout="switchimages('next', next)">
   <img name="next" src="/data/images/misc/controls/next.gif" width="32" height="32" alt="Next" />
   </a>n";
   } else {
   $todisplay .= "<img src="/data/images/misc/controls/next.gif" width="32" height="32" alt="Next" /></a>n";
   }
 
   $todisplay .= "         </td>
   <td id="last" width="40" height="40">n";
 
   if ($currentid != $lastid) {
   $todisplay .= "                 <a href="{$_SERVER['PHP_SELF']}?action=comic&id={$lastid}"
   onmouseover="switchimages('last', lasthover)"
   onmouseout="switchimages('last', last)">
   <img name="last" src="/data/images/misc/controls/last.gif" width="32" height="32" alt="Last" />
   </a>n";
   } else {
   $todisplay .= "<img name="last" src="/data/images/misc/controls/last.gif" width="32" height="32" alt="Last" /><$
   }
 
   $todisplay .= "         </td>
   </tr>
 </table>
 ...
 [/code]

Here's the relevant html code:

[CODE]
 ...
 <table id="controls" width="768" height="40" border="0" cellpadding="0" cellspacing="0" onload="preloadimages();">
 <tr>
 <td id="first" width="40" height="40">
 <a href="/index.php?action=comic&id=1"
 onmouseover="switchimages('first', firsthover)" 
 onmouseout="switchimages('first', first)">
 <img name="first" src="/data/images/misc/controls/first.gif" width="32" height="32" alt="First" />
 </a>
 
   </td>
   <td id="previous" width="40" height="40">
   <a href="/index.php?action=comic&id=1"
   onmouseover="switchimages('previous', previoushover)"
   onmouseout="switchimages('previous', previous)">
   <img name="previous"src="/data/images/misc/controls/previous.gif" width="32" height="32" alt="Previous" />
   </a>
   <td id="select" width="508" height="40">
   &nbsp;
   </td>
   <td id="next" width="40" height="40">			<a href="/index.php?action=comic&id=3"
   onmouseover="switchimages('next', nexthover)"
   onmouseout="switchimages('next', next)">
 
   <img name="next" src="/data/images/misc/controls/next.gif" width="32" height="32" alt="Next" />
   </a>
   </td>
   <td id="last" width="40" height="40">
   <a href="/index.php?action=comic&id=004"
   onmouseover="switchimages('last', lasthover)"
   onmouseout="switchimages('last', last)">
   <img name="last" src="/data/images/misc/controls/last.gif" width="32" height="32" alt="Last" />
   </a>
   </td>
  </tr>
 
 </table>
 ...
 [/CODE]

If there's anything else you need, please let me know. I really appreciate you trying to help me. I've been staring at this for 2 hours now...

@senshiNov 14.2004 — #See this...

<img name="previous"src="/data/images/misc/controls/previous.gif" width="32" height="32" alt="Previous" />

___________________^ missing white space...

for a start...

@atheistauthorNov 14.2004 — #Thanks, didn't notice that. ^{^^{^}}

Doesn't affect the rollover, though.

@Warren86Nov 14.2004 — #<HTML>

<Head>

<Script Language=JavaScript>

var first = "/data/images/misc/controls/first.gif"
   var firsthover = "/data/images/misc/controls/firsthover.gif"
  var previous = "/data/images/misc/controls/previous.gif"
   var previoushover = "/data/images/misc/controls/previoushover.gif"
   var next = "/data/images/misc/controls/next.gif"
   var nexthover = "/data/images/misc/controls/nexthover.gif"
   var last = "/data/images/misc/controls/last.gif"
   var lasthover = "/data/images/misc/controls/lasthover.gif"
 
  function switchimages(currID,newImg){
 
   document.getElementById(currID).src = newImg;
   //alert(document.getElementById(currID).src)
  }
 
  function toLink(isLink){
 
   window.location = isLink;
  }

</Script>

</Head>

<Body>

<table id="controls" width="768" height="40" border="1" cellpadding="0" cellspacing="0" >

<tr>

<td width="40" height="40">

<img id="isFirst" src="/data/images/misc/controls/first.gif" width="32" height="32" alt="First" onmouseover="switchimages(this.id,firsthover)" onmouseout="switchimages(this.id,first)" onclick="toLink('/index.php?action=comic&id=1')">

</td>

 <td width="40" height="40">
   <img id="isPrevious" src="/data/images/misc/controls/previous.gif" width="32" height="32" alt="Previous" onmouseover="switchimages(this.id,previoushover)" onmouseout="switchimages(this.id,previous)" onclick="toLink('/index.php?action=comic&id=1')">
 
   <td id="select" width="508" height="40"> 
   </td>
 
   <td width="40" height="40"> 
   <img id="isNext" src="/data/images/misc/controls/next.gif" width="32" height="32" alt="Next" onmouseover="switchimages(this.id,nexthover)" onmouseout="switchimages(this.id, next)" onclick="toLink('/index.php?action=comic&id=3')"> 
   </td>
 
   <td width="40" height="40">
   <img id="isLast" src="/data/images/misc/controls/last.gif" width="32" height="32" alt="Last" onmouseover="switchimages(this.id,lasthover)" onmouseout="switchimages(this.id, last)" onclick="toLink('/index.php?action=comic&id=004')"> 
   </td>
  </tr>

</table>

</Body>

</HTML>

@atheistauthorNov 14.2004 — #Thanks for going through all this trouble for me. Really, thanks alot. I really appreciate it.

Just one more question, though. About preloading images. Here's a quote from a tutorial:How do we preload an image? By creating an instance of the image object, and inserting it in the <head></head>tags.[/QUOTE]

Isn't that what I'm doing with this:

[CODE] var first = "/data/images/misc/controls/first.gif"
 var firsthover = "/data/images/misc/controls/firsthover.gif"
 var previous = "/data/images/misc/controls/previous.gif"
 var previoushover = "/data/images/misc/controls/previoushover.gif"
 var next = "/data/images/misc/controls/next.gif"
 var nexthover = "/data/images/misc/controls/nexthover.gif"
 var last = "/data/images/misc/controls/last.gif"
 var lasthover = "/data/images/misc/controls/lasthover.gif"[/CODE]

So... my images are preloaded, right?

Thanks, again.

@sciguyryanNov 15.2004 — #[i]Originally posted by atheist [/i]

[B]Thanks for going through all this trouble for me. Really, thanks alot. I really appreciate it.

Just one more question, though. About preloading images. Here's a quote from a tutorial:

Isn't that what I'm doing with this:

[CODE] var first = "/data/images/misc/controls/first.gif"
 var firsthover = "/data/images/misc/controls/firsthover.gif"
 var previous = "/data/images/misc/controls/previous.gif"
 var previoushover = "/data/images/misc/controls/previoushover.gif"
 var next = "/data/images/misc/controls/next.gif"
 var nexthover = "/data/images/misc/controls/nexthover.gif"
 var last = "/data/images/misc/controls/last.gif"
 var lasthover = "/data/images/misc/controls/lasthover.gif"[/CODE]

So... my images are preloaded, right?

Thanks, again. [/B][/QUOTE]

No, those are just text strings assigned to a vaariable to pre-load images you have to do something like:

<i>
 </i>&lt;script type="text/javascript"&gt;
 &lt;!--
 var ImgSrc = "/Images/Exaple.gif";
 var Img = new Image(123, 123);
 /* Set the images width and height as a new object. */
 Img.src = ImgSrc;
 //--&gt;
 &lt;/script&gt;

RyanJ

@atheistauthorNov 15.2004 — #Ah, thanks.

@Warren86Nov 15.2004 — #"Preloading" an image, is like taking a "prebite" of a sandwich. It's nonsense. The code works. Ignore people who adopt an officious affectation and demand that you do this, or don't do that. Preload your common sense.

Also in #JavaScript _↴

alert box troubleshoot e-mailing a form when user has lotus notes Javascript _GET variables

Success!

Help @atheist spread the word by sharing this article on Twitter...

Tweet This

Problems with a rollover script

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Problems with a rollover script

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴