double rollover
Moderator: General Moderators
-
andylyon87
- Forum Contributor
- Posts: 168
- Joined: Sat Jan 31, 2004 5:31 am
- Location: Dundee
double rollover
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
- andre_c
- Forum Contributor
- Posts: 412
- Joined: Sun Feb 29, 2004 6:49 pm
- Location: Salt Lake City, Utah
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
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.
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.
- andre_c
- Forum Contributor
- Posts: 412
- Joined: Sun Feb 29, 2004 6:49 pm
- Location: Salt Lake City, Utah
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)
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
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.
- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
Image 1:
Image 2:
external java script:
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()">
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>Code: Select all
<img border="0" name="display" src="displayoff.gif" width="200" height="25" title="" alt="" />Code: Select all
<!-- // Hide From Crap Browsers
function preloadImages() {
if (document.images) {
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";
}
}
function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
documentїchangeImages.argumentsїi]].src = eval(changeImages.argumentsїi+1] + ".src");
}
}
}
// Done Hiding From Crap Browsers -->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()">