Home Articles FAQs XREF Games Software Instant Books About Feedback Search Site-Map
irt.org logo

Q1028 How can I remove the dotted line around a hot spot on an image map, when the hot spot is clicked?

irt.org | Knowledge Base | JavaScript | Image | Q1028 [ previous next ]

Q1028 How can I remove the dotted line around a hot spot on an image map, when the hot spot is clicked?

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">

Feedback on 'Q1028 How can I remove the dotted line around a hot spot on an image map, when the hot spot is clicked?'


Provide feedback ...
AddThis Social Bookmark Button

Provide feedback ... AddThis Social Bookmark Button


Last Updated: 30th March 2008. Maintained by: Martin Webb and Michel Plungjan
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.
Copyright © 1996-2008 irt.org, All Rights Reserved.