6.13.2007

Mouseover javascript



The mouseover effect is one of the most fundamental javascript programming need for framed sites with navigation in a TOC (table of contents). Yesterday I created new buttons for ffbc.ws. The button creation itself is fairly straight forward, but the javascript has been (at least for me) more complex. Dynamic Drive offers a DOM Image Rollover II tool.

How easy is it?


  1. First you need navigation buttons (out of scope of this discussion)
  2. Then download the oodomimagerollover.js script file
  3. FTP (upload) the buttons to the correct directory (/images)
  4. Same with oodomimagerollover.js (/scripts)
  5. And for each button pair, insert this code in the HTML:

    <img src="original.jpg" srcover="over.jpg">


The full link for each button set looks like this:

<a href="welcome.html" target="bottom"><img src="images/ffbcwelcome.gif" srcover="images/ffbcwelcome1.gif" Alt="Welcome" border="0"></a>

No comments:

Post a Comment

Any anonymous comments with links will be rejected. Please do not comment off-topic