Highlighting Imagemap - JavaScript Made Easy

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Highlighting Imagemap		[View Sample]

This script works by using an imagemap that is swapped for another with an area highlighted when the mouse pointer passes over the map. Which image is loaded depends on the co-ordinates of the pointer. The images are pre-loaded, so there should be minimal delay in the images changing.


Insert into <HEAD>


Insert into <BODY>
<script language="JavaScript"><!-- var js = 1.0; Version = parseInt(navigator.appVersion); if (navigator.appName == "Netscape") js = ((Version >= 4) ? 1.2 : ( (Version == 3) ? 1.1 : 1.0 )); else if (navigator.appVersion.indexOf('MSIE') != -1) js = ((Version >= 4) ? 1.1 : 1.0); function changeImagemap(newImage) { if (js > 1.0) document ['boxImage'].src = eval(newImage + ".src"); } if (js > 1.0) { white = new Image(); white.src = "white.gif"; red = new Image(); red.src = "red.gif"; green = new Image(); green.src = "green.gif"; blue = new Image(); blue.src = "blue.gif"; } //--> </script> </head> <body bgcolor="#ffe4c4" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000"> <center><h1>Highlighting Imagemaps</h1></center> <p>This script works by using an imagemap that is swapped for another with an area highlighted when the mouse pointer passes over the map. Which image is loaded depends on the co-ordinates of the pointer. The images are pre-loaded, so there should be minimal delay in the images changing.</p> <map name="image-map"> <area shape="RECT" coords="15,15,85,85" href="javascript:alert('Red Square')" onmouseover="changeImagemap('red');self.status='Red Square';return true" onmouseout="changeImagemap('white');self.status='';return true"> <area shape="RECT" coords="93,15,110,85" href="javascript:alert('Green Rectangle')" onmouseover="changeImagemap('green');self.status='Green Rectangle';return true" onmouseout="changeImagemap('white');self.status='';return true"> <area shape="CIRCLE" coords="150,50,35" href="javascript:alert('Blue Circle')" onmouseover="changeImagemap('blue');self.status='Blue Circle';return true" onmouseout="changeImagemap('white');self.status='';return true"> </map> <center><img name="boxImage" src="white.gif" border=0 height=100 usemap="#image-map" width=200 align="center" alt="Imagemap"></center><hr>

Other Options