PDA

Click to See Complete Forum and Search --> : Image maps

ck_net_2004
09-28-2004, 08:04 PM
Ive got a image map that i would like to be able to turn on and off.
How would i do this?
javaNoobie
09-28-2004, 08:52 PM
what do you mean by 'turn on and off'? Making it visible and invisible? If so, use the display/visibility in css.
HaganeNoKokoro
09-28-2004, 10:29 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Image Map On/Off</title>
<script type="text/javascript">
function mapToggle(id) {
document.getElementById(id).setAttribute("usemap", (document.getElementById(id).getAttribute("usemap")==""?"#map1":""));
}
</script>
</head>
<body>
<div id="maincontent">
<img id="img1" src="http://www.google.ca/intl/en-ca/images/logo.gif" usemap="#map1" alt="image" />
<map name="map1" id="map1">
<area shape="rect" alt="Area1" coords="0, 0, 100, 100" href="http://www.yahoo.ca">
<area shape="rect" alt="Area2" coords="100, 0, 200, 100" href="http://www.google.ca">
</map>
<input type="button" value="Toggle Image Map" onclick="mapToggle('img1');" />
</div>
</body>
</html>


This turns the image-map effect off/on, while leaving the image visible. Tested in Netscape7, Firefox1.0PR. Doesn't work in IE6.
ck_net_2004
09-29-2004, 01:02 AM
I only use Ie 6. Doh!
Willy Duitt
09-29-2004, 02:06 AM
When I first read this I wondered if usemap was readonly...
But a quick look over at MSDN shows that this attribute is read/write...
BUT there is an uppercase M in useMap....

This works in IE:

document.getElementById(id).setAttribute("useMap", (document.getElementById(id).getAttribute("useMap")==""?"#map1":""));

Perhaps someone could verify how this change affects Mozilla...

.....Willy

BTW: Here is the link to the reference (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/usemap.asp)....
ck_net_2004
09-29-2004, 02:59 AM
I cant get it to work.

I need some code that leaves the image there and
dissables the map, so the image is still there but the
links on the image aren't. and then i need some code to
re enable the map.
Willy Duitt
09-29-2004, 03:01 AM
What do you mean it doesn't work???
I tested it using IE6 and it worked fine...
You must have other problems... Please post a link...

.....Willy
ck_net_2004
09-29-2004, 03:36 AM
I probaly done something wrong,
but dont worry i just found a way with the link you posted:

<html>
<head>
<title>Image Map On/Off</title>
<script>
function toggleMap(id,map,onoff){
if(onoff=='off'){
document.getElementById(id).useMap=""; }
if(onoff=='on'){
document.getElementById(id).useMap=map;}
}
</script>
</head>
<body>
<img id="img1" src="http://www.google.ca/intl/en-ca/images/logo.gif" usemap="#map1" alt="image">
<map name="map1" id="map1">
<area shape="rect" alt="Area1" coords="0, 0, 100, 100" href="http://www.yahoo.ca">
<area shape="rect" alt="Area2" coords="100, 0, 200, 100" href="http://www.google.ca">
</map>
<a href="javascript:;" onclick="toggleMap('img1','#map1','off');">turn off map</a>&nbsp;
<a href="javascript:;" onclick="toggleMap('img1','#map1','on');">turn on map</a>
</body>
</html>