Rollover

Code for div rollover

[Adam5000]

Thought I was done but missed a spot.

I'm trying to do a rollover on the div javascript start button below but not having any luck. It has to remain a div, and it has to trigger the startSlides() function when clicked on.

<div id="start" style="display: block;">

<input type="image" src="start_off.jpg" onClick="startSlides();" value="Start">

</div>

This one is displayed with the last slide and it works, but it's for an HTML anchor and not a javascript button. And it's also not a div.

<a href="../the_foyer.htm";

onmouseover=document.getElementById('foyer_button').src="foyer_on.jpg"

onmouseout=document.getElementById('foyer_button').src="foyer_off.jpg">

<img id="foyer_button" src="foyer_off.jpg" alt="foyer button">

</a>

</div>

Help!

[rocknbil]

You could attach a a behavior to the div, but it's better to use the "natural" object for mouseover/click, the anchor. Just surround it in an anchor.

<div id="start" style="display: block;">
<a href="#" onmouseover="document.getElementById('foyer_button').src='foyer_on.jpg';" onmouseout="document.getElementById('foyer_button').src='foyer_off.jpg';" onClick="startSlides(); return false;"><input type="image" id="foyer_button" src="start_off.jpg" value="Start"></a>
</div>

Unless you really need the image as an input type, you might just make it an ordinary image (you already have onClick doing something else . . . ):

<div id="start" style="display: block;">
<a href="#" onmouseover="document.getElementById('foyer_button').src='foyer_on.jpg';" onmouseout="document.getElementById('foyer_button').src='foyer_off.jpg';" onClick="startSlides(); return false;"><img id="foyer_button" src="start_off.jpg" alt="Start"></a>
</div>

To really optimize it, why do you need it to stay a div? You can style the anchor as block to eliminate one more layer of nesting:

<a id="start" style="display: block; width:150px; height:50px;" href="#" onmouseover="document.getElementById('foyer_button').src='foyer_on.jpg';" onmouseout="document.getElementById('foyer_button').src='foyer_off.jpg';" onClick="startSlides(); return false;"><img id="foyer_button" src="start_off.jpg" alt="Start"></a>

Last of all, let's make it all external, the following can be moved to the head or an external style sheet:

<script type="text/javascript"> 
function attachBehaviors() { 
 if ((document.getElementById('start') && 
   (document.getElementById('foyer_button')) { 
  document.getElementById('start').onmouseover=function () { 
   document.getElementById('foyer_button').src='foyer_on.jpg'; 
  } 
  document.getElementById('start').onmouseout=function () { 
   document.getElementById('foyer_button').src='foyer_off.jpg'; 
  } 
  document.getElementById('start').onclick=function () { 
   startSlides(); 
   return false; // important - keeps link from navigating 
  } 
} 
window.onload=function() { attachBehaviors(); } 
</script> 
<style type="text/css"> 
#start { display:block; width:150px; height:50px; } 
</style> 

<a id="start" href="some-valid-link-in-case-js-is-disabled.html"><img src="foyer_off.jpg" alt="start"></a>

.... which is really the way you should do it . . .

[Adam5000]

rocknbil

Wow. That's a great job. It definitely works for me. And you're right, the anchor didn't have to be a div. I tried it and, with the styling added, it works good as just an anchor.

Terrific job, and you certainly know what you're doing with Javascript.