double rollover

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
andylyon87
Forum Contributor
Posts: 168
Joined: Sat Jan 31, 2004 5:31 am
Location: Dundee

double rollover

Post 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
User avatar
andre_c
Forum Contributor
Posts: 412
Joined: Sun Feb 29, 2004 6:49 pm
Location: Salt Lake City, Utah

Post 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
andylyon87
Forum Contributor
Posts: 168
Joined: Sat Jan 31, 2004 5:31 am
Location: Dundee

Post 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.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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.
Last edited by Roja on Wed Mar 03, 2004 2:01 pm, edited 1 time in total.
User avatar
andre_c
Forum Contributor
Posts: 412
Joined: Sun Feb 29, 2004 6:49 pm
Location: Salt Lake City, Utah

Post 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)
andylyon87
Forum Contributor
Posts: 168
Joined: Sat Jan 31, 2004 5:31 am
Location: Dundee

Post 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.
User avatar
andre_c
Forum Contributor
Posts: 412
Joined: Sun Feb 29, 2004 6:49 pm
Location: Salt Lake City, Utah

Post 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
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post 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()">
Post Reply