|
|
|
Mouse Over 2 This mouse over is similar to the first one. Actually, by changing only a few things you can achieve the results we need. Run your mouse over the button below.
Okay, first of all, this little script needs three images to work. These I have named 1 (the button), 2 (watch here) and 2mo (it changes). The sample script below is for the MouseOver you see on this page, but can be adapted very easily to suit your own graphics. This part goes in the head of your document. In other words, you put it in the html before the </HEAD> tag. <SCRIPT language="javascript"> <!-- if (document.images) {var inner=new Image(); inner.src="2mo.gif";} //--> </SCRIPT> The next part of the script goes wherever you wish the graphic to be seen on your page. <A HREF="http://members2.easyspace.com/maelgwn/index2.htm" onMouseOver="if (document.images) document.change.src='2mo.gif';" onMouseOut="if (document.images)document.change.src= '2.gif';"> <IMG SRC="1.gif" NAME="but" BORDER=0 HEIGHT=45 WIDTH=108></A> You will need to name your image for this mouse over to work. The image that needs to be named in this case is the 'watch here' graphic - called '2.gif'. Looking at the code above, you can see the name 'change' in the document.change.src. This is the name to call your graphic. The easiest way to name a graphic is to go into your html and after the img src tag add the name. The following line is the html used on this page. <img SRC="2.gif" NAME="change" height=45 width=92> The reason for doing this is so the code knows which image to change. If you don't name it, it won't work! To change this script to suit your graphics, all you need to do is change where it says 1,2 and 2mo to yor graphic names. You can use the name 'change' for the code. My suggestion if you are just learning Java is to name your graphics and use the 'mo' on the MouseOver image like I have. That way it makes it even easier for you to follow the script above. |
