Tutorials - JavaScript: Simple MouseOver
Have you even wondered how Web designers get an image to change as your mouse pointer rolls over it? Below you will find the JavaScript to achieve this effect, which is accomplished by creating two images - one image viewed when the mouse pointer is not over the image and the second image viewed when the mouse pointer is over the image. See the sample below.
Step 1
Copy the following JavaScript from the box below
and paste it into the <head> section of
your HTML document.
Step 2
Change the reference to the folder where your images are located and the file extension (jpg, gif) of your images. Here is the text from above, now in bold, that you need to change.
function tocItem (name, width, height) {
this.on = new Image();
this.on.src = "images/" + name + "on.jpg"
this.off = new Image();
this.off.src = "images/" + name + "off.jpg"
Step 3
Name your image files according to the naming convention used in the above JavaScript.
- toc1on.jpg for the first image that appears with the mouseover, and
- toc1off.jpg for the first image that is viewed when there is no mouseover.
- Sequentially number each toc#on and oc#off image that you use on your Web page. For example, we use toc1on.jpg, toc1off.jpg, toc2on.jpg, toc2off.jpg, toc3on.jpg, toc3off.jpg, toc4on.jpg and toc4off.jpg below.
Step 4
Format your anchor tags <a> and
image tags <img> according
to the following example. The name attribute
for the <img> tag
must match the name of the specific image; therefore,
if the image name is toc5off.jpg then
the value for the name attribute should be toc5.
Step 5
Change the reference to the folder where your images are located and the file extension (jpg, gif) of your images, the link for your images, the label to appear in the status window in the browser, and the alternate text. Here is the text from above, now in bold, that you need to change.
<a href="overview/index.htm" onmouseover="img_act('toc1'); window.status='Overview of Online Courses'; return true" onmouseout="img_inact('toc1'); window.status=''; return true">
<img src="images/toc1off.jpg" border="0" alt="Overview of Online Courses" name="toc1" /></a>
Example
 |
 |
||
| sample toc4off.jpg image | sample toc4on.jpg image | ||
| Roll your mouse over an image to see the second image. |    |
||
last reviewed: January 25, 2008
