Easy Mouseover Images For Your Site
You see them a lot. Your mouse cursor travels across a page image and the image changes.
Until today, it required a bit of technical confidence to write mouseover JavaScript.
Now, it only requires 4 easy steps!
The JavaScript is copy and paste. JavaScript is line break sensitive. Thus, you copy it from the demo page at /library/demo/mouseovers.shtml (Just "view source" and save it to your computer. Or, use Master Snooper at /master/snooper/ to make sure you get everything the way it actually is in the file rather than an altered version which some browsers display.)
To make it easier for you, instructions are embedded into the JavaScript source code.
The four steps are:
-
Create your page the way you want it to appear when it
first loads into a browser. And paste the JavaScript
code before your </head> tag. (Note: The images you
intend to be mouseovers must be links.)
-
Count the number of mouseover images you have on your
page and type the total count in the place where the
instructions say to do so.
Definitions for this article:
-
mouseover image
-
the image that is visible when
the browser first loads, and that will be
replaced if the mouse travels over the top.
-
replacement image
-
the image which replaces the
mouseover image when the mouse travels over
the top.
NOTE: --))) The image size of both the mouseover image and
the replacement image must be the same. The
file sizes may be different. The file extension
may be different. But the image size must be
the same.
Okay, it will work even if the image sizes are
different. But one of the following will happen:
-
If you use height=" and" width=" size"
attributes in your <img... tag, then the
replacement image will be squeezed or
stretched to fit into the mouseover image
size.
-
If you do not use size attributes in your
<img... tag, the replacement image might
squeeze or stretch; but it is more likely
to fill a different screen area than the
mouseover image did. Filling a different
screen area could make your page look
cluttered and confusing.
-
For each mouseover image:
-
Starting at the top, do a sequential count of each
<img... tag until you get to the applicable
mouseover image. Type the count where the
instructions say to do so.
-
Type in the mouseover image's SRC (the same SRC
your HTML code uses to display the image) where
the instructions say. An SRC can be of the form
"http://www.domain.com/image.gif" or
"../pictures/image.gif".
-
Type in the SRC of the the replacement image (the
SRC you would use if you were to code it into your
HTML page for display).
-
Modify the anchor tag ("<a ...") for each mouseover
image per the instructions. It consists of inserting
two tag attributes, onmouseover=... and onmouseout=... .
That's it!
The JavaScript source code which you copy from the demo page even includes debugging information -- in case you miscount your images, reverse the original and overlay graphic URLs, or step into some other easy to make mistake.
Some things to know:
-
With mouseovers, your page will take longer to load. This is because both the mouseover and the replacement images load into your visitor's browser -- whether the replacement is needed or not.
-
Your visitor's browser must be JavaScript enabled for the images to change. Otherwise, they don't get the nice effects. (Which is a reason to make your page look good before you insert JavaScript code -- so visitors with JavaScript challenged browsers see a presentable page.)
-
It is easy to overdo mouseovers. Especially at first, when you may experience a desire to show off your newly acquired skills. Unless it somehow aligns with your site's purpose, gaudy is an unwelcome distraction.
-
The previous point notwithstanding, subtle mouseovers, especially when they do not unduly increase page loading time, can be a mark of professionalism. They can put your site a level above the rest. Mouseovers can show you care enough to place fitting enhancements, and can perk the interest of the casually indifferent surfer.
Now go get the JavaScript code. Make yourself a practice page. Show yourself you can do it.
The more you can do, the higher your confidence rises. And the higher your confidence rises, the more you can do.
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
©1999 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.
