Image Mousovers in Javascript
A fair amount of web developers are used to seeing text links change color when the mouse is placed over them. This is usually done with Cascading Style Sheets (CSS), and is highly common. Not a big deal.
However, if you've been on the web awhile you've probably seen an image that seems to do something similar. Odds are it either depressed itself, lit up in some way, or changed colors when you placed your mouse over it. Ever wonder how that was done?
It was probably done with JavaScript. JavaScript has an event handler called "onMouseOver" - it's called an "event handler" because it handles an event - the event, in this case, being a mouseover - the occurrence of the user placing their mouse over whatever link/image/whatever this event handler is part of.
You don't need to be a web development bigwig to do this, either. All you're seeing is JavaScript switching images! The image that seems to be lighting up or changing color is really another image that looks similar - JavaScript switches the two when your mouse goes over the image, and puts it back the way it was when you move your mouse off of it. Let's get started. Place this code in your page's HEAD tag:
<script language="Javascript">
function change (picurl) {
document.picture.src = picurl;
}
image1 = new Image();
image1.src = "images/about_on.jpg";
</script>
The first line is the opening JavaScript tag - it's telling the page we're using JavaScript. The last line here is the closing JavaScript tag, so the browser knows we're done. The second line is the beginning of a JavaScript function called "change" - we will be using some JavaScript commands within the document to call this function to create the effect we want.
Look at the first line of the first function:
function change (picurl) {
The word "function" tell the browser that we're starting a function. The word after that is "change" - the name of the function. After that we have "picurl" inside parentheses. This means that when we call this function for use in our page, we'll be passing a variable along with the call - onpic is the name we're giving that variable. The last character is a left bracket - it's the beginning of the function's code. The right closing bracket two lines down is the end of the function - when the function is called it processes the code in-between the two brackets.
So, what code is inside the two brackets? This code:
document.picture.src = picurl;
See that? "document.picture.src" - it's saying that inside of "document" (our page), there's an image with the name of "picture" - and an attribute of this image named "picture" is it's "src" - which is basically the address of the image. It says that the address of the image named "picture" is "picurl" - which, as you should remember, is the name of the variable we'll be passing to the function when we call it.
This is probably confusing to you - but keep reading. The code (two lines worth) after the "change" function helps us "preload" the image. As you know, images have to be downloaded to be viewed - a webpage with images does not load immediately. It can be pretty annoying for someone to put their mouse over an image and not have it change until a few seconds later - if they click on it, they might not see it at all!
The preloading code there loads the mouseover image along with the rest of the page, so that when the mouse is placed over the image, there's no delay - it's displayed immediately. Get all that? If you didn't, try re-reading it. It's important to understand why things work.
Site Categories
Recent Blog Posts
