Page 1 of 1

double rollover

Posted: Wed Mar 03, 2004 11:44 am
by andylyon87
Can anyone tell me a good way of making one rollover that changes two images, is it possible to pre cache this type of rollover

Posted: Wed Mar 03, 2004 12:24 pm
by andre_c
That would actually be javascript. Just look for "javascript rollover tutorial" on google and you can find scripts like that on http://dynamicdrive.com

Posted: Wed Mar 03, 2004 1:47 pm
by andylyon87
I think you will actually find that most of the common javascript rollover tutorials only deal with single event rollovers and not double rollovers which change 2 images when one is rolled over.

Posted: Wed Mar 03, 2004 2:01 pm
by Roja
Double rollover javascript - as a search entry on google returns six links on the first page of results for tools that generate just that.

An example is here.

Changing the search terms to:

Multiple rollover javascript tutorial

Results in the first result being a tutorial on how to create one, complete with working sample code.

Posted: Wed Mar 03, 2004 2:01 pm
by andre_c
The idea behind a tutorial is not for you to take the script and paste it into your code, it's for you to learn how to use the language.

Once you know how to do a javascript rollover on one image, it's very easy to make it do other stuff. But you need to understand basic javascript. I recommend following the javascript tutorial at: http://hotwired.lycos.com/webmonkey/pro ... rial1.html

If you actually follow the tutorial trying to understand what it's doing, you'll figure out how to use it in different ways. (like what you want)

Posted: Wed Mar 03, 2004 2:12 pm
by andylyon87
you may work like that, but I don't. If you want to learn you don't have to read massive unneccessary tutorials. Thanks anyway, the guys page was good (i didn't bother with the tutorial) he had good source code :), I now understand the double rollover, and thats without sitting here for an hour reading a tutorial I didnt need to read. I can't sit and read, I wanted it there and then, so looking at source code can be just as easy to learn as a massive tutorial which Id've skip read anyway.

Posted: Wed Mar 03, 2004 2:26 pm
by andre_c
Sorry, I just assumed that if you couldn't figure out how to do a double image rollover from looking at the code for a one image rollover, you would benefit from a tutorial

Posted: Wed Mar 03, 2004 2:31 pm
by no_memories
Image 1:

Code: Select all

<a href="index2.html" onMouseOver="changeImages('image1', 'image1on', 'defaultdisplay', 'display1')" onMouseOut="changeImages('image1', 'image1off', 'display', 'defaultdisplay')"><img name="image1" border="0" src="image1off.gif" width="25" height="25" title="image1" alt="image1" /></a>
Image 2:

Code: Select all

<img border="0" name="display" src="displayoff.gif" width="200" height="25" title="" alt="" />
external java script:

Code: Select all

<!-- // Hide From Crap Browsers

function preloadImages() &#123;
  if (document.images) &#123;

  image1on = new Image();
  image1on.src = "image1on.gif";

  image1off = new Image();
  image1off.src = "image1off.gif";
 

  defaultdisplay = new Image();
  defaultdisplay.src = "displayoff.gif";

  display1 = new Image();
  display1.src = "display1on.gif";
  &#125;
&#125;

function changeImages() &#123;

  if (document.images) &#123;

    for (var i=0; i<changeImages.arguments.length; i+=2) &#123;

      document&#1111;changeImages.arguments&#1111;i]].src = eval(changeImages.arguments&#1111;i+1] + ".src");
    &#125;
  &#125;
&#125;

// Done Hiding From Crap Browsers -->
Working Example: http://diablo.thexvector.us/

Sorry, I had to edit this a few times to get the naming so it's easy to follow, just add more images to the preload and body. Name them what you like.

Also, to be safe put in your <body onload="preloadImages(); changeImages()">