Intro to JavascriptImage Rollover This is actually done not with HTML but with Javascript which can exist in the same document as your HTML. Older browsers may not recognize it but newer browsers do. Its a trick where you move your mouse over an image and it switches to another image. Its used alot on buttons and things but we'll just do a basic rollover that simply swaps images. Javascript is a whole Tutorial in and of itself and then some but this will introduce you to it. For this exercise you need to make two images the same size and they need to be saved as 72dpi .gifs. Place them inside your images folder. I named my images image1.gif and image2.gif Then inside the HEAD SECTION of the document you are working on you need to place the following Javascript. Javascript usually lives in the header and prenames some variables. Therefore anytime in the body that I refer to image1 in my code it knows I'm actually pointing to the .gif image named image1.gif in my images folder. Once again this should be contained within the HEAD section. <script language="JavaScript"> <!-- hide me var temp = ""; var image1 = 'images/image1.gif'; var image2 = 'images/image2.gif'; // end hide --> </script> Watch the tricky code... Javascript starts using all kinds of symols like ' and; which must be in the right place or the code will not execute properly. Then in the body of the page write the following code: <A href="TileMe.html" onMouseOver="temp=image1; image1=image2; image2=temp; document.rollovername.src=image1;" > <img src="images/image1.gif" name="rollovername"> </A> Substitute a page you want to link where I wrote TileMe.html To see the working Image Rollover Click here This is a primitive Javascript button. You can write code which lets the buttons return to their original form For an example of this Click here - View Page Source to see the code So we're outside the envelope now baby... pushing the outerlimits beyond HTML. Research the web for other great Javascript Tutorials. I recommend starting withDavid Thau's tutorials on Webmonkey.com. Javascript is pretty cool but it only newer Browsers fully support it. And don't confuse it with Java. they're two entirely different things. Also what might work in Navigator might not in Explorer so test your scripts. Click here to see a javascript where Text activates images. Javascripts can be used for all sorts of things like Automatic Pop Up Banners or on mouse over pop ups If you like this kind of stuff Visit Thau's Javascript Tutorial - it is the best on the Web |