JavaScript Code Generator for Mouse-Over Double Image Rollover
Coding for JavaScript mouseovers used to be a
complicated, frustrating proposition.
Coding for double image rollovers was not for the
faint-hearted.
Double image rollovers are used at a some sites here
and there on the 'net. The technique changes two separate
images when a mouse cursor travels over an image link
somewhere else on the page.
With two images changing when the mouse travels over a
link elsewhere, it provides enough elements with which
to become quite creative.
Here are some ideas to get you started:
- You are at a site offering web site creation
services. As your mouse travels over a "design"
link,
- a previously blank area of the page (it
had a blank image) suddenly sports an
image of money being cut in half with
a scissors, and
- an image in another area of the page
previously showing a serious face now
shows a happy, glowing face.
And when your mouse leaves the "design" link, the
two changeable images restore to their previous
state.
- A picture changes and a title changes as the mouse
travels over an image somewhere else on the page.
The demonstration/generation page uses that as an
example. (See URL below.)
- As the mouse travels over a navigation button,
a previous red spot on the page turns green and a
picture of the site owner is replaced with an icon
representing the destination of the navigation
button.
- You have navigation links surrounding an image.
When a mouse travels over one of the links, the
surrounded image changes and a balloon with text
appears above the group.
You might think such effects are only for the pros. Not so.
As of today, double image rollover mouseovers are easy.
How? With the generator at
/a/url.pl?double
Just type in the names of your graphics files, specify the
location of the two rollover images, and click the button.
Then, copy the generated code and paste it into your
web page.
That's all there's to it.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2000 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
