Mouse-Over Effect

Instructions:

The Mouse-over event occurs when one image is replaced with another when the mouse is moved across the image. This can be a picture change or a color change in the text. This was illustrated on the index page of this website: http://www.public.asu.edu/~pbaluch. My picture changes into another picture when the mouse tool is moved over it. The java script is placed in the html code when you create a webpage. The code listed below is compatible with both Microsoft and Netscape platforms. Copy the Java script between the <Head> and the <Title> and paste it in the html code of the webpage where you want the mouse over event to occur. The script goes between <HEAD> and <TITLE>. When you get to the section that you want your mouse over event inserted, copy the next portion of java script listed below and paste it into the html code of the webpage. It goes after everything you have done, so far, on the webpage but before the <END>, which is listed at the bottom of the html page.

I have highlighted sections that you can or should change for your own webpage. The PINK section is directions to center the image. You can move the image where ever you want it and it will indicate it here. The GREEN section is where you place the web address of the page where the mouse over event is to occur. It is going to occur in the page that you place the Java script. For the BLUE section, place the general name of the picture so that it ties the information together for the same name. (This is important because you can have multiple mouse over events on a page using the same intro portion and only changing the second picture assignment section.) The RED section is for the first image you want to see and the DARK BLUE is the second (mouse over) picture you will see. The MUDDY GREEN is the Alt which is a phrase you want to appear on the image when the mouse is held over it. The border, width and height are all adjustments you can make for your image to size it or create a border around it. If you change the dimensions on your webpage from your editor it will automatically change in your html code.

A word of Caution: If you use Microsoft as your webpage editor it will rewrite you java script code for the second portion as its own way of "helping you out" and removing strange code. You will have to go into notebook from the START... RUN... window and bring up your saved html page and correct the code back to what is listed below for the mouse over event to work. Then FTP it to your site.

Java Script:

<Head>

<!-- Hide from older browsers

function SwitchImg()

{ //start

var rem, keep=0, store, obj, switcher=new Array, history=document.Data;

for (rem=0; rem < (SwitchImg.arguments.length-2); rem+=3) {

store = SwitchImg.arguments[(navigator.appName == 'Netscape')?rem:rem+1];

if ((store.indexOf('document.layers[')==0 && document.layers==null) ||

(store.indexOf('document.all[')==0 && document.all==null))

store = 'document'+store.substring(store.lastIndexOf('.'),store.length);

obj = eval(store);

if (obj != null) {

switcher[keep++] = obj;

switcher[keep++] = (history==null || history[keep-1]!=obj)?obj.src:history[keep];

obj.src = SwitchImg.arguments[rem+2];

} }

document.Data = switcher;

} //end

function RestoreImg()

{ //start

if (document.Data != null)

for (var rem=0; rem<(document.Data.length-1); rem+=2)

document.Data[rem].src=document.Data[rem+1];

} //end

// end hiding contents -->

</script>

<Title>

*Webpage html code*

<p align="center"><a href="index.html" onmouseout="RestoreImg()"

onmouseover="SwitchImg('document.page','document.page','pagean1.jpg')"><img

src="page_gc.jpg" alt="Page and Andy" border="0" width="201"

height="151" name="page"></a></p>

<END>

Website maintained by Page Baluch: debra.baluch@asu.edu

Last updated 2/5/2000