Javascript Rollovers in .js file?

[cyberious]

I am trying to find out how to shrink my source code by using a .js file for the rollover button images. I have not been able to grasp any of the information I've been finding on the internet, mainly because I learn by example. (I'm fairly new to javascript)

Is there anyone that can explain this to me in simple terms, or include a sample of both the .js file and what is supposed to be placed in the HTML?

I'm getting confused by all the different rules, and am concerned about different browsers. So far, I've only found bits and pieces, but can't seem to put it all together!

Also, I think I may have to change the way I'm using my editor (GoLive) because I currently have my rollovers in a "component" which is placed in all my pages so I only have to manage that component to modify anything (similar to a "Library Asset" in Dreamweaver). However, GoLive automatically generates this ODD code (not W3C compliant, if that means anything) and looks like:

<csimport user="../mysite.data/Components/nav.html" occur="98">
<csactiondict>
<script type="text/javascript"><!--
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'webdesign',/*URL*/'nav/webdesign.gif',/*URL*/'nav/webdesign-over.gif',/*URL*/'','');

// --></script>
</csactiondict>
</csimport>

Only with many more buttons here. This ends up looking like a HUGE chunk of code.

Any takers? I'd be ever so grateful for some help. Looking for simple JavaScript functions, nothing extremely fancy, but functional without creating a problem across platforms. Is that possible?

Thanks!

[Narasinha]

If you are concerned about browser compatibility (and W3C specs) there are several options. There are a lot of rollover scripts available. Placing your script in an external .js file is pretty straightforward. The code that you would normally place inside the <script></script> tags is simply moved to the new file and a <script src="sollover.js> tag is put in its place in the HTML.

It is possible to do the rollovers using only CSS instead of JavaScript. Check out http://www.edginet.org/techie/website/cssimg.html for some options.

[paulhiles]

Hi cyberious,

I've taken a very traditional approach... there are many ways to achieve this.. but this is quite a stable example, and works cross-browser for IE4+ and NN4+ The script first preloads your images and assigns them to variable names (I've kept your existing image names). If you check the Javascript itself you will see something like the code snippet below for the 'contact' image. You'll notice that the width and height settings of the image are also passed as parameters to help the preload.

     contacton= new Image(137,25);
     contacton.src="images/contact-over.gif";

     contactoff= new Image(137,25);
     contactoff.src="images/contact.gif";

There are then two functions, m_over and m_out which control the switching of the image by using the imgName variable.

In the page itself, the mouseover effect is added as below:

[img]images/contact.gif[/img]

I've uploaded a sample page based around your existing homepage, have a look and see what you think.

Paul

[cyberious]

Thank you so much for your posts! PAUL - this is excellent. I can't believe it's that easy! I have been reading and researching for some time now, and never got an easy answer. I can't believe you took the time to create this example for me using my own homepage. THANK YOU SO MUCH!

I'm excited.....

You are great, and erimus is great. If there is anything I can do for you (being the novice that I am - still) please let me know. How did you learn all this anyway? Do you train web designers? I am self-taught, and know I'm missing quite a few techniques in my design (as you've noticed when you worked on my homepage!). Again, thank you.

And NARASINHA - This option using CSS looks excellent too. I'm going to read on. Thanks for your help!

[paulhiles]

Thank you so much for your posts! PAUL - this is excellent. I can't believe it's that easy!

Great to hear your comments, that was thanks enough for me! I'm self taught like yourself, and No, I don't do any teaching (although it has been suggested! LOL!)
Wishing you every success with your site

Paul

[cyberious]

I am trying to complete the .js file you showed me, and for some reason, the links that I created are not working. The ones ABOVE the links you created are still working though. I don't get it. I cut/paste, changed the information necessary, and still can't get it to work. Is there something I'm missing?

Here is a link to my .js file and .html file that I created (using both files you worked on):

http://www.vermillien.com/test.html
http://www.vermillien.com/rollover.js

I used Text Edit (Mac OSX) and GoLive to work on these files.

Thanks!
Jane

[paulhiles]

I am trying to complete the .js file you showed me, and for some reason, the links that I created are not working. The ones ABOVE the links you created are still working though. I don't get it. I cut/paste, changed the information necessary, and still can't get it to work. Is there something I'm missing?

Hi Jane,

I had a quick look at your .js file, and there were just a couple of small typos, in webtemplates and banners (if memory serves!). Just an extra 's' here or there can make all the difference when you're declaring variables.. before you know it... you start seeing 'undefined' errors everywhere - all very scary! :c)
Anyway, I've uploaded the amended script for you to download and check for yourself!

Have fun

Paul

[cyberious]

I didn't realize that could make such a difference! (nor did I realize they were there.) Does this mean, you can't put code into the .js file for future use - say a button you're not using yet?

Thanks for the upgraded .js file! Once again, you are my guru.

Jane

[paulhiles]

I didn't realize that could make such a difference! (nor did I realize they were there.) Does this mean, you can't put code into the .js file for future use - say a button you're not using yet?

You could put additional code into your script if you wanted.. that wouldn't be a problem at all... the example page above uses just a few rollovers... but it still includes your entire rollover script. The only problem occurs when the page is calling for a variable that doesn't exist (i.e. hasn't been declared in the code)

Paul

[cyberious]

Thanks for the help and your time! The script works fine now! It's very sensitive though, as I moved it to another page, one of the "off" images disappeared, so have to go through it again. I'm trying to figure out how to create my header (with rollovers) as a "component" (in GoLive) so that I only need to change the main file, rather than every page. Once I get that figured out, I can use the script.

Thanks again!