Move Your Mouse over the Bottle!
Move it Away!
Are You Ready to Create the Same Effect?
In this lesson we show you how to create an effect that you likely have seen at other web sites-- causing an inline image to change when you move the mouse over it or click on it. For the example below, the arrow will "bulge" when the mouse moves over it, and it will change to a "pushed-down" appearance, once it is clicked:
The most common use of this technique is to animate hyperlinked images that act as buttons, so the viewer gets an extra reinforcement that the object under the mouse is something worth clicking.
While you are free to use what you learn in this lesson to make buttons pop and jump, our stodgy opinion is that this adds nothing to the information on the page, so our example will show you a use that we think is a bit more worth the effort.
You should consider another factor; for every image that you will cause to change when the mouse moves over it, you actually must download 2 different images, and as you will see shortly, this must be done before the HTML for the page loads. Therefore, this can increase the precious wait time that the viewer will be watching a blank screen.
The way image mouseOver swapping works goes something like:
NOTE: To work correctly, the images that are swapped for each other must be the same width and height.Below is a generic method for button swapping. The one used in this page has a few more features that you are encouraged to explore by looking at the HTML source of this lesson page.
| JavaScript Image Swapping | |
|---|---|
| HTML code | explanation |
|
Typical top of standard HTML file that has JavaScript functions in its <HEAD>...</HEAD>. |
if (document.images) { |
This is a test that determines if the web browser understands the image storage functions needed for swapping images. If this test is false, we would skip the rest of the code and just display a static image. |
var button1_up = new Image(); button1_up.src = 'button_up.gif"; |
We create a variable that is the type that represents Images. The second line assigns the src property with the path to the first image file to the "up" version of the image. |
var button1_over = new Image(); button1_over.src = 'button_over.gif"; |
We create a second Image variable that assigns the src property to the path to the second image file for the "up" version of the image. |
function over_button() {
if (document.images) {
document["buttonOne"].src = button1_over.src
}
}
|
This function, when called will again make sure the browser can do the image swapping. If so, it looks inside its internal list of inline images stored in the document object, and assigns it the variable that represents the image for the mouse over or highlighted image. |
function up_button() {
if (document.images) {
document["buttonOne'].src = button1_up.src
}
}
|
This function works almost the same, except that it will make the image swap back to the "up" version. |
//--> </SCRIPT> <body> : : : |
End of the JavaScript and continuation of the HTML to display the page's content. |
| <A HREF="file.html" onMouseOver="over_button()" onMouseOut="up_button()"><img src="button_up.gif" alt="click me" width="XX" height="YY" name="buttonOne" border=0></a> |
The tag used to load the first view of the image (the "up" version). Notice that we have assigned the image inside the <img...> tag a unique name, "buttonOne", that we can refer to it using code like document["button name"] The hyperlink tag contains a JavaScript event handler, onMouseOver that will trigger a call to our function to swap in the "highlight" image when the mouse moves over the image. Likewise, the onMouseOut event will call our other function to change the image back when the mouse leaves, or "moves out" of the image area. |
As part of our Introduction, we will add a new section that describes volcanic rocks, and include an image of one kind, called "pumice". We will use JavaScript to change the image to a second one that shows a cut away view of how pumice looks under a microscope. By moving the mouse on and off the image, we can compare the two different views (Okay, we admit it is not much more creative than animating buttons and one could achieve the same result by placing the images side by side...)
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
var pum1 = new Image();
pum1.src = "../pictures/pumice.gif";
var pum2 = new Image();
pum2.src = "../pictures/pumice2.gif";
}
function show_rock() {
if (document.images) {
document["pum"].src = pum2.src;
}
}
function hide_rock() {
if (document.images) {
document["pum"].src = pum1.src;
}
}
//-->
</SCRIPT>
NOTE: We have created two JavaScript "holder" variables that represent the two images. We will call the show_rock() function to swap in the microscope view image (pumice2.gif) and the hide_rock() function to swap back the original image. These events occur for an image named "pum" we will next identify in the HTML code
than ones observed by humans.We will add a new section about Volcanic Rocks. It will contain the image for the pumice rock and the code for the JavaScript image swapping:
<A NAME="vr"><h3 align=center>Volcanic Rocks</h2></A>
<A HREF="#vr" onMouseOver="show_rock(); window.status='description of explosiveness scale'; return true" onMouseOut="hide_rock()"><IMG SRC="../pictures/pumice.gif" align=right ALT="picture of pumice" WIDTH="220" HEIGHT="170" hspace=12 vspace=12 name="pum" border=0></A>
that are very explosive. Hot, frothy volcanic <b>magma</b> quickly cools, leaving a structure of many twisted air holes inside. Pumice is thus very light weight.
Scientists study rocks at many different scales.
<p>
<b>Pumice</b> is one kind of rock formed by volcanic eruptions
<p>
If you move your mouse over the image, you can see how pumice looks under the microscope.
<p>
A <b>thin section</b> is a layer of the rock cut so thin that the light from a microscope shines through, allowing us to see the structure of the rock.
<p>
The twisted chambers here represent the air pockets preserved inside the rock when this rock blew out of a volcano.
<br clear=right>
NOTE: Take extra care on the code for the <img...> tag; it is pretty complex now! It now handles the mouseOver actions, displays a status bar message (like we did in lesson 27a), and will jump to a nearby anchor in case the viewer clicks the image (keeping them on the same page). The image is also right aligned and has extra padding around it (hspace and vspace)
Note that you can also write JavaScript functions to perform a different task generated by a mouse click:
<A HREF="file.html" onMouseOver="over_button()" onMouseOut="up_button()"><img src="button_up.gif" alt="click me" onClick="doButtonClick()" width="XX" height="YY" name="buttonOne" border=0></a>
provided that you had written a JavaScript function in your <HEAD>...</HEAD> to react to this event
The Internet Connection at MCLI is
Alan Levine --}
Comments to levine@maricopa.edu
URL: http://www.mcli.dist.maricopa.edu/tut/tut27d.html