Java image flip

Last updated on December 31, 2011. Tags: HTML image, image flip, link hover

Have you seen those images that change whenever the mouse pointer hovers on top of them? Those images are called image flips. Even though they are now rarely used, web designers and website owners who are into visuals effects would definitely find image flip useful.

Image flips use to be popular during the time when Javascripts and Java applets were considered "cool". However, due to popularity of text-based links (which is good for search engines) and the notoriety of Javascript as means used by malicious websites to attach nasty malwares, the use image flips and Javascripts in general declined.

This article was entitled "Java Image Flip" to differentiate it from other means of implementing image flip effect, such as CSS image flip (which I personally develop to circumvent those browsers that are configured to block Javascript) and Flash image flip (which uses Adobe/Macromedia Flash).

Below is an example of image flip shown on this page using an iframe. To view the page with image flip on its own, click here.

There are two sets of codes that enable image flip to work. The first set of codes is the Javascript, which is either located between the header tags or in an external Javascript js file. For this particular example, the Javascript is located between the header tags. It looks like this.

<script language="JavaScript">
{
//These are the first button graphics
thumb1= new Image();
thumb1.src = "pic1b.jpg";
hover1 = new Image();
hover1.src = "pic1c.jpg";

//These are the second button graphics
thumb2= new Image();
thumb2.src = "pic2b.jpg";
hover2 = new Image();
hover2.src = "pic2c.jpg";

//These are the third button graphics
thumb3= new Image();
thumb3.src = "pic3b.jpg";
hover3 = new Image();
hover3.src = "pic3c.jpg";
}

//This is the function that calls for change in buttons 

function imageflip(thumbnailID,imageName)
{
document.images[thumbnailID].src = eval(imageName + ".src");
}
</script>

The Java image flip requires two sets of images. The first set are the default images, the images that are readily displayed when viewing the webpage. In our example, these are pic1b.jpg, pic2b.jpg and pic3b.jpg. The second set are the hover images, the ones that temporarily replace the default images whenever the mouse hovers. These are pic1b.jpg, pic2b.jpg and pic3b.jpg. Each default image is paired with one hover image, e.g., pic1c.jpg appears only when the mouse hovers above pic1b.jpg.

The thumb1, thumb2 and thumb3 are variables assigned the default images so that they can work properly with Javascript commands. These variables also enable the images to revert back to the default images once the mouse pointer moves away.

The variables hover1, hover2 and hover3, on the other hand, are used to enable the hover images to work properly with Javascript algorithm. These lines of codes also work to "preload" the image. Meaning, the image files assigned as hover1, hover2 and hover3, are downloaded to the cache, so that when the mouse pointer hover above the image, the image will flip instantly, instead of taking sometime to download the image file.

The remaining part of the Javascript code is the function named imageflip. As we can see between the parentheses in the code above, this function calls two variables, thumbnailID and imageName. This function is the one responsible to actual flipping of the image. We will call this function in the html code in the actual body of the webpage.

Similar to the variables in other programming language, you can change the name of these variables and function with any name that you want but it will be advisable to name these variables based on your purpose of using image flip.

The second set of code is where we will call the imageflip function. It is located in the actual body of the webpage (anywhere between the body tags <body> and </body>).

<a href="#" onMouseOver="imageflip('icon1','hover1')"
onMouseOut="imageflip('icon1','thumb1')">
<img src="pic1b.jpg" border="0" name="icon1"/></a>

<a href="#" onMouseOver="imageflip('icon2','hover2')"
onMouseOut="imageflip('icon2','thumb2')">
<img src="pic2b.jpg" border="0" name="icon2"/></a>

<a href="#" onMouseOver="imageflip('icon3','hover3')"
onMouseOut="imageflip('icon3','thumb3')">
<img src="pic3b.jpg" border="0" name="icon3"/></a>

The names icon1, icon2 and icon3 in the img tag also work as variables. They are assigned to the images that are actually embedded on the webpage. The function imageflip is called whenever the mouse pointer hovers above the image (onMouseOver) and whenever the mouse pointer moves out of the image (onMouseOut).

When the mouse pointer hovers above the first image (named as icon1), the function imageflip is called, changing the image icon1 to the image file assigned to variable hover1 (which is pic1c.jpg). When the mouse pointer moves out of the image, it changes the image icon1 to the image file assigned to variable thumb1 (which is its default image pic1b.jpg). The two other images also work in the same manner.

Final notes:

You can replace the symbol "#" in the link code (a href="#") any link (URL) that you like, whether internal or external.
By removing the code href="#" in the link code, you can create images that simply flip or changes whenever the mouse pointer hovers above them without any link (the mouse pointer does not change).

Posted by Greten on October 25, 2008 under JavaScript

Share and Enjoy: