You are here: irt.org | FAQ | JavaScript | Image | Q1028 [ previous next ]
An image when used with an image map doesn't have a hypertext link wrapped around the image - which is where you place the event handlers, except in Internet Explorer - where you can use the onClick event handler in the area tag to blur the focus.
Try:
<SCRIPT LANGUAGE="JavaScript"><!--
function changeImagemap(newImage) {
if (document.images)
document.images['boxImage'].src = eval(newImage + ".src");
}
if (document.images) {
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";
}
function go(url) {
alert(url); // replace with: location.href = url;
self.focus();
}
//--></SCRIPT>
<MAP NAME="image-map">
<AREA SHAPE="RECT" COORDS="15,15,85,85" HREF="javascript:go('http://www.irt.org/')"
onMouseOver="changeImagemap('red');self.status='irt.org';return true"
onMouseOut="changeImagemap('white');self.status='';return true"
onClick="if (navigator.appName == 'Microsoft Internet Explorer') this.blur()"
>
<AREA SHAPE="RECT" COORDS="93,15,110,85" HREF="javascript:go('http://www.irt.org/script/faq.htm')"
onMouseOver="changeImagemap('green');self.status='JavaScript FAQ';return true"
onMouseOut="changeImagemap('white');self.status='';return true"
onClick="if (navigator.appName == 'Microsoft Internet Explorer') this.blur()"
>
<AREA SHAPE="CIRCLE" COORDS="150,50,35" HREF="javascript:go('http://www.irt.org/articles/script.htm')"
onMouseOver="changeImagemap('blue');self.status='JavaScript Articles';return true"
onMouseOut="changeImagemap('white');self.status='';return true"
onClick="if (navigator.appName == 'Microsoft Internet Explorer') this.blur()"
>
</MAP>
<IMG NAME="boxImage" SRC="white.gif" BORDER=0 WIDTH=200 HEIGHT=100 USEMAP="#image-map">