Image Mousovers in Javascript
Now, we're going to add the code for the image mouseover effect. This part can be tricky:
<a href="about.html" onMouseOver="change('images/about_on.jpg');"
onMouseOut="change('images/about_off.jpg')">
<img src="images/about_off.jpg" name="picture" border="0"></a>
What we have here is a simple link that takes you to "about.html" when clicked. The "a" in the beginning of the link tells the browser this is a link we are creating. The "href=" part, is an attribute of the link. It's an attribute that determines the URL the link sends us to.
After that, we have a touch of JavaScript - another attribute called "onMouseOver." In this case, the property of the onMouseOver attribute is the call to the function I mentioned earlier. We have "onMouseOver=" to start it, and then we have the code below inside the quotes:
change('images/about_on.jpg');
The first word is "on" - the name of the first function we created earlier. After that, we have the location to an image - this is the "onpic" variable from before. As you'll remember, our "on" function takes the "onpic" variable and changes the image URL to whatever it is for the image named "picture." We've specified the address to the image as "images/about_on.jpg" - you can change this to your own image name to point to wherever your mouseover image is. Notice the single quotes around the URL there - we cannot use double quotes because this line of code is already inside of double quotes - this will confuse JavaScript and produce an ugly error message.
The code above for the image and link has an image, and somewhere in there you'll see an attribute as follows:
name="picture"
That tells us that the name of this image is "picture" - which is perfect for our function. The next attribute of the link is the "onMouseOut" attribute. It's just like the last attribute, and as such it calls a function for us. Only this time it's activated when the user's mouse comes OFF of the object (image, in this case). In that case, the URL we have specified is that of the original image we've turned into a link here.
Here's is the code for the entire page:
<html>
<head>
<script language="Javascript">
function change (picurl) {
document.picture.src = picurl;
}
</script>
</head>
<body>
<a href="about.html" onMouseOver="change('images/about_on.jpg');"
onMouseOut="change('images/about_off.jpg')">
<img src="images/about_off.jpg" name="picture" border="0"></a>
</body>
</html>
Now, assuming you've uploaded your original, plain image to the specified URL and uploaded your more flashy, mouseover image to the address specified, then all should be well and good. You can modify the URLs in this script to reflect the location of your images - just make sure not to delete any double/single quotes - if you do an error may follow.
As you can see, JavaScript is fairly simple. It's easier to get the hang of than most programming languages. Now you can create your own (hopefully) cool mouseover image effects. This is a very dumbed-down and simple example of an image mouseover effect - most larger sites use more complicated scripts for many different reasons, but this should get the job done on any browser that supports JavaScript. Congratulations, most people never get beyond basic HTML.
Site Categories
Recent Blog Posts
