Non support for onmouse effects..... With javascripts aswell..... Other browsers love it.
Hello.
Im doing a homepage. www.mikethk.dk
The top image map of Denmark, works well in IE, Safari, Chrome, 50% in Opera and 0% in Firefox.
Why does Firefox not support this, for me simple solution?
Heres my code:
<map name="image-map">
<img name="boxImage" style="position:absolute; top:10px; left:50px; z-index:1;" src="images/kortet_der_skal_bruges.png" border=0 usemap="#image-map" alt="Imagemap">
<a id="syddanmark_imagemap"> <area shape="poly" coords="65,130,94,134,103,165,93,193,38,184,15,175,9,162,8,142,0,132,5,112,9,115,13,117,17,117,21,114,24,114,27,116,32,116,37,115,42,110,48,111,63,130,65,130" > </a>
<a id="sjaelland_imagemap"> <area shape="poly" coords="99,188,117,201,135,201,161,179,157,155,152,139,148,136,147,130,144,128,142,123,143,128,143,131,133,128,135,111,123,113,103,126,110,161,99,188" ></a>
<a id="midtjylland_imagemap"> <area shape="poly" coords="63,129,95,127,109,81,105,74,86,64,83,65,74,71,71,72,63,72,57,66,46,64,43,49,37,52,29,65,22,60,18,62,9,57,5,74,3,100,4,112,12,117,16,118,20,114,24,114,27,117,38,116,42,110,49,111,63,130,63,129" > </a>
<a id="hovedstaden_imagemap"> <area shape="poly" coords="161,142,166,140,164,110,165,74,149,62,144,68,144,78,135,114,134,128,142,130,144,128,147,129,148,136,161,142"></a>
<a id="nordjylland_imagemap"> <area shape="poly" coords="94,37,121,33,119,25,101,2,91,0,74,7,55,30,28,31,10,51,10,57,17,62,22,60,28,64,38,53,42,50,45,52,46,65,56,66,63,71,72,72,86,64,88,63,86,51,94,37"></a>
</map>
<map name="image-map2">
<img name="boxImage2" style="position:absolute; top:10px; left:50px; z-index:2;" src="images/kortet_der_skal_bruges.png" border=0 usemap="#image-map2" alt="Imagemap2">
<a id="syddanmark_imagemap"> <area shape="poly" coords="65,130,94,134,103,165,93,193,38,184,15,175,9,162,8,142,0,132,5,112,9,115,13,117,17,117,21,114,24,114,27,116,32,116,37,115,42,110,48,111,63,130,65,130"
onmousedown="changeImagemap('red'); return true " img name="boxImage" src="images/kortkort_test2_syd.png" border=0 usemap="#image-map"
onmouseover="changeImagemap2('red');return true " img name="boxImage2" src="images/kortkort_test2_syd.png" border=0 usemap="#image-map2"
onmouseout="changeImagemap2('not');return true " img name="boxImage2" src="images/kortkort_not.png" border=0 usemap="#image-map2" > </a>
<a id="sjaelland_imagemap"> <area shape="poly" coords="99,188,117,201,135,201,161,179,157,155,152,139,148,136,147,130,144,128,142,123,143,128,143,131,133,128,135,111,123,113,103,126,110,161,99,188"
onmousedown="changeImagemap('green');return true" img name="boxImage" src="images/kortkort_test2_sjae.png" border=0 usemap="#image-map"
onmouseover="changeImagemap2('green');return true" img name="boxImage2" src="images/kortkort_test2_sjae.png" border=0 usemap="#image-map2"
onmouseout="changeImagemap2('not');return true " img name="boxImage2" src="images/kortkort_not.png" border=0 usemap="#image-map2" > </a>
<a id="midtjylland_imagemap"> <area shape="poly" coords="63,129,95,127,109,81,105,74,86,64,83,65,74,71,71,72,63,72,57,66,46,64,43,49,37,52,29,65,22,60,18,62,9,57,5,74,3,100,4,112,12,117,16,118,20,114,24,114,27,117,38,116,42,110,49,111,63,130,63,129"
onmousedown="changeImagemap('blue');return true" img name="boxImage" src="images/kortkort_test2_mid.png" border=0 usemap="#image-map"
onmouseover="changeImagemap2('blue');return true" img name="boxImage2" src="images/kortkort_test2_mid.png" border=0 usemap="#image-map2"
onmouseout="changeImagemap2('not');return true " img name="boxImage2" src="images/kortkort_not.png" border=0 usemap="#image-map2"> </a>
<a id="hovedstaden_imagemap"> <area shape="poly" coords="161,142,166,140,164,110,165,74,149,62,144,68,144,78,135,114,134,128,142,130,144,128,147,129,148,136,161,142"
onmousedown="changeImagemap('white');return true" img name="boxImage" src="images/kortkort_test2_hov.png" border=0 usemap="#image-map"
onmouseover="changeImagemap2('white');return true" img name="boxImage2" src="images/kortkort_test2_hov.png" border=0 usemap="#image-map2"
onmouseout="changeImagemap2('not');return true " img name="boxImage2" src="images/kortkort_not.png" border=0 usemap="#image-map2"> </a>
<a id="nordjylland_imagemap"> <area shape="poly" coords="94,37,121,33,119,25,101,2,91,0,74,7,55,30,28,31,10,51,10,57,17,62,22,60,28,64,38,53,42,50,45,52,46,65,56,66,63,71,72,72,86,64,88,63,86,51,94,37"
onmousedown="changeImagemap('black');return true" img name="boxImage" src="images/kortkort_test2_nor.png" border=0 usemap="#image-map"
onmouseover="changeImagemap2('black');return true" img name="boxImage2" src="images/kortkort_test2_nor.png" border=0 usemap="#image-map2"
onmouseout="changeImagemap2('not');return true " img name="boxImage2" src="images/kortkort_not.png" border=0 usemap="#image-map2"> </a>
</map>
And the Java part:
ar 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 = "images/kortkort_test2_hov.png";
red = new Image();
red.src = "images/kortkort_test2_syd.png";
green = new Image();
green.src = "images/kortkort_test2_sjae.png";
blue = new Image();
blue.src = "images/kortkort_test2_mid.png";
black = new Image();
black.src = "images/kortkort_test2_nor.png";
}
function changeImagemap2(newImage) {
if (js > 1.0) document ['boxImage2'].src = eval(newImage + ".src");
}
if (js > 1.0) {
white = new Image();
white.src = "images/kortkort_test2_hov.png";
red = new Image();
red.src = "images/kortkort_test2_syd.png";
green = new Image();
green.src = "images/kortkort_test2_sjae.png";
blue = new Image();
blue.src = "images/kortkort_test2_mid.png";
black = new Image();
black.src = "images/kortkort_test2_nor.png";
not = new Image();
not.src = "images/kortkort_not.png";
}
$(document).ready(function(){
$('div#kommuner_syddanmark').hide();
$('div#kommuner_sjaelland').hide();
$('div#kommuner_midtjylland').hide();
$('div#kommuner_hovedstaden').hide();
$('div#kommuner_nordjylland').hide();
$('a#syddanmark_imagemap').click(function(){
v_region_syddanmark = "syddanmark";
v_region_sjaelland = "no_sjaelland";
v_region_midtjylland = "no_midtjylland";
v_region_hovedstaden = "no_hovedstaden";
v_region_nordjylland = "no_nordjylland";
$('div#kommuner_syddanmark').show();
$('div#kommuner_sjaelland').hide();
$('div#kommuner_midtjylland').hide();
$('div#kommuner_hovedstaden').hide();
$('div#kommuner_nordjylland').hide();
});
$('a#sjaelland_imagemap').click(function(){
v_region_syddanmark = "no_syddanmark";
v_region_sjaelland = "sjaelland";
v_region_midtjylland = "no_midtjylland";
v_region_hovedstaden = "no_hovedstaden";
v_region_nordjylland = "no_nordjylland";
$('div#kommuner_syddanmark').hide();
$('div#kommuner_sjaelland').show();
$('div#kommuner_midtjylland').hide();
$('div#kommuner_hovedstaden').hide();
$('div#kommuner_nordjylland').hide();
});
$('a#midtjylland_imagemap').click(function(){
v_region_syddanmark = "no_syddanmark";
v_region_sjaelland = "no_sjaelland";
v_region_midtjylland = "midtjylland";
v_region_hovedstaden = "no_hovedstaden";
v_region_nordjylland = "no_nordjylland";
$('div#kommuner_syddanmark').hide();
$('div#kommuner_sjaelland').hide();
$('div#kommuner_midtjylland').show();
$('div#kommuner_hovedstaden').hide();
$('div#kommuner_nordjylland').hide();
});
$('a#hovedstaden_imagemap').click(function(){
v_region_syddanmark = "no_syddanmark";
v_region_sjaelland = "no_sjaelland";
v_region_midtjylland = "no_midtjylland";
v_region_hovedstaden = "hovedstaden";
v_region_nordjylland = "no_nordjylland";
$('div#kommuner_syddanmark').hide();
$('div#kommuner_sjaelland').hide();
$('div#kommuner_midtjylland').hide();
$('div#kommuner_hovedstaden').show();
$('div#kommuner_nordjylland').hide();
});
$('a#nordjylland_imagemap').click(function(){
v_region_syddanmark = "no_syddanmark";
v_region_sjaelland = "no_sjaelland";
v_region_midtjylland = "no_midtjylland";
v_region_hovedstaden = "no_hovedstaden";
v_region_nordjylland = "nordjylland";
$('div#kommuner_syddanmark').hide();
$('div#kommuner_sjaelland').hide();
$('div#kommuner_midtjylland').hide();
$('div#kommuner_hovedstaden').hide();
$('div#kommuner_nordjylland').show();
});
});
Keep in mind, i copied the code and it seems that some already tried to fix "non support" for netscape.
Hello.
Im doing a homepage. www.mikethk.dk
The top image map of Denmark, works well in IE, Safari, Chrome, 50% in Opera and 0% in Firefox.
Why does Firefox not support this, for me simple solution?
Heres my code:
<pre><nowiki><map name="image-map">
<img name="boxImage" style="position:absolute; top:10px; left:50px; z-index:1;" src="images/kortet_der_skal_bruges.png" border=0 usemap="#image-map" alt="Imagemap">
<a id="syddanmark_imagemap"> <area shape="poly" coords="65,130,94,134,103,165,93,193,38,184,15,175,9,162,8,142,0,132,5,112,9,115,13,117,17,117,21,114,24,114,27,116,32,116,37,115,42,110,48,111,63,130,65,130" > </a>
<a id="sjaelland_imagemap"> <area shape="poly" coords="99,188,117,201,135,201,161,179,157,155,152,139,148,136,147,130,144,128,142,123,143,128,143,131,133,128,135,111,123,113,103,126,110,161,99,188" ></a>
<a id="midtjylland_imagemap"> <area shape="poly" coords="63,129,95,127,109,81,105,74,86,64,83,65,74,71,71,72,63,72,57,66,46,64,43,49,37,52,29,65,22,60,18,62,9,57,5,74,3,100,4,112,12,117,16,118,20,114,24,114,27,117,38,116,42,110,49,111,63,130,63,129" > </a>
<a id="hovedstaden_imagemap"> <area shape="poly" coords="161,142,166,140,164,110,165,74,149,62,144,68,144,78,135,114,134,128,142,130,144,128,147,129,148,136,161,142"></a>
<a id="nordjylland_imagemap"> <area shape="poly" coords="94,37,121,33,119,25,101,2,91,0,74,7,55,30,28,31,10,51,10,57,17,62,22,60,28,64,38,53,42,50,45,52,46,65,56,66,63,71,72,72,86,64,88,63,86,51,94,37"></a>
</map>
<map name="image-map2">
<img name="boxImage2" style="position:absolute; top:10px; left:50px; z-index:2;" src="images/kortet_der_skal_bruges.png" border=0 usemap="#image-map2" alt="Imagemap2">
<a id="syddanmark_imagemap"> <area shape="poly" coords="65,130,94,134,103,165,93,193,38,184,15,175,9,162,8,142,0,132,5,112,9,115,13,117,17,117,21,114,24,114,27,116,32,116,37,115,42,110,48,111,63,130,65,130"
onmousedown="changeImagemap('red'); return true " img name="boxImage" src="images/kortkort_test2_syd.png" border=0 usemap="#image-map"
onmouseover="changeImagemap2('red');return true " img name="boxImage2" src="images/kortkort_test2_syd.png" border=0 usemap="#image-map2"
onmouseout="changeImagemap2('not');return true " img name="boxImage2" src="images/kortkort_not.png" border=0 usemap="#image-map2" > </a>
<a id="sjaelland_imagemap"> <area shape="poly" coords="99,188,117,201,135,201,161,179,157,155,152,139,148,136,147,130,144,128,142,123,143,128,143,131,133,128,135,111,123,113,103,126,110,161,99,188"
onmousedown="changeImagemap('green');return true" img name="boxImage" src="images/kortkort_test2_sjae.png" border=0 usemap="#image-map"
onmouseover="changeImagemap2('green');return true" img name="boxImage2" src="images/kortkort_test2_sjae.png" border=0 usemap="#image-map2"
onmouseout="changeImagemap2('not');return true " img name="boxImage2" src="images/kortkort_not.png" border=0 usemap="#image-map2" > </a>
<a id="midtjylland_imagemap"> <area shape="poly" coords="63,129,95,127,109,81,105,74,86,64,83,65,74,71,71,72,63,72,57,66,46,64,43,49,37,52,29,65,22,60,18,62,9,57,5,74,3,100,4,112,12,117,16,118,20,114,24,114,27,117,38,116,42,110,49,111,63,130,63,129"
onmousedown="changeImagemap('blue');return true" img name="boxImage" src="images/kortkort_test2_mid.png" border=0 usemap="#image-map"
onmouseover="changeImagemap2('blue');return true" img name="boxImage2" src="images/kortkort_test2_mid.png" border=0 usemap="#image-map2"
onmouseout="changeImagemap2('not');return true " img name="boxImage2" src="images/kortkort_not.png" border=0 usemap="#image-map2"> </a>
<a id="hovedstaden_imagemap"> <area shape="poly" coords="161,142,166,140,164,110,165,74,149,62,144,68,144,78,135,114,134,128,142,130,144,128,147,129,148,136,161,142"
onmousedown="changeImagemap('white');return true" img name="boxImage" src="images/kortkort_test2_hov.png" border=0 usemap="#image-map"
onmouseover="changeImagemap2('white');return true" img name="boxImage2" src="images/kortkort_test2_hov.png" border=0 usemap="#image-map2"
onmouseout="changeImagemap2('not');return true " img name="boxImage2" src="images/kortkort_not.png" border=0 usemap="#image-map2"> </a>
<a id="nordjylland_imagemap"> <area shape="poly" coords="94,37,121,33,119,25,101,2,91,0,74,7,55,30,28,31,10,51,10,57,17,62,22,60,28,64,38,53,42,50,45,52,46,65,56,66,63,71,72,72,86,64,88,63,86,51,94,37"
onmousedown="changeImagemap('black');return true" img name="boxImage" src="images/kortkort_test2_nor.png" border=0 usemap="#image-map"
onmouseover="changeImagemap2('black');return true" img name="boxImage2" src="images/kortkort_test2_nor.png" border=0 usemap="#image-map2"
onmouseout="changeImagemap2('not');return true " img name="boxImage2" src="images/kortkort_not.png" border=0 usemap="#image-map2"> </a>
</map></nowiki></pre>
And the Java part:
v<pre><nowiki>ar 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 = "images/kortkort_test2_hov.png";
red = new Image();
red.src = "images/kortkort_test2_syd.png";
green = new Image();
green.src = "images/kortkort_test2_sjae.png";
blue = new Image();
blue.src = "images/kortkort_test2_mid.png";
black = new Image();
black.src = "images/kortkort_test2_nor.png";
}
function changeImagemap2(newImage) {
if (js > 1.0) document ['boxImage2'].src = eval(newImage + ".src");
}
if (js > 1.0) {
white = new Image();
white.src = "images/kortkort_test2_hov.png";
red = new Image();
red.src = "images/kortkort_test2_syd.png";
green = new Image();
green.src = "images/kortkort_test2_sjae.png";
blue = new Image();
blue.src = "images/kortkort_test2_mid.png";
black = new Image();
black.src = "images/kortkort_test2_nor.png";
not = new Image();
not.src = "images/kortkort_not.png";
}
$(document).ready(function(){
$('div#kommuner_syddanmark').hide();
$('div#kommuner_sjaelland').hide();
$('div#kommuner_midtjylland').hide();
$('div#kommuner_hovedstaden').hide();
$('div#kommuner_nordjylland').hide();
$('a#syddanmark_imagemap').click(function(){
v_region_syddanmark = "syddanmark";
v_region_sjaelland = "no_sjaelland";
v_region_midtjylland = "no_midtjylland";
v_region_hovedstaden = "no_hovedstaden";
v_region_nordjylland = "no_nordjylland";
$('div#kommuner_syddanmark').show();
$('div#kommuner_sjaelland').hide();
$('div#kommuner_midtjylland').hide();
$('div#kommuner_hovedstaden').hide();
$('div#kommuner_nordjylland').hide();
});
$('a#sjaelland_imagemap').click(function(){
v_region_syddanmark = "no_syddanmark";
v_region_sjaelland = "sjaelland";
v_region_midtjylland = "no_midtjylland";
v_region_hovedstaden = "no_hovedstaden";
v_region_nordjylland = "no_nordjylland";
$('div#kommuner_syddanmark').hide();
$('div#kommuner_sjaelland').show();
$('div#kommuner_midtjylland').hide();
$('div#kommuner_hovedstaden').hide();
$('div#kommuner_nordjylland').hide();
});
$('a#midtjylland_imagemap').click(function(){
v_region_syddanmark = "no_syddanmark";
v_region_sjaelland = "no_sjaelland";
v_region_midtjylland = "midtjylland";
v_region_hovedstaden = "no_hovedstaden";
v_region_nordjylland = "no_nordjylland";
$('div#kommuner_syddanmark').hide();
$('div#kommuner_sjaelland').hide();
$('div#kommuner_midtjylland').show();
$('div#kommuner_hovedstaden').hide();
$('div#kommuner_nordjylland').hide();
});
$('a#hovedstaden_imagemap').click(function(){
v_region_syddanmark = "no_syddanmark";
v_region_sjaelland = "no_sjaelland";
v_region_midtjylland = "no_midtjylland";
v_region_hovedstaden = "hovedstaden";
v_region_nordjylland = "no_nordjylland";
$('div#kommuner_syddanmark').hide();
$('div#kommuner_sjaelland').hide();
$('div#kommuner_midtjylland').hide();
$('div#kommuner_hovedstaden').show();
$('div#kommuner_nordjylland').hide();
});
$('a#nordjylland_imagemap').click(function(){
v_region_syddanmark = "no_syddanmark";
v_region_sjaelland = "no_sjaelland";
v_region_midtjylland = "no_midtjylland";
v_region_hovedstaden = "no_hovedstaden";
v_region_nordjylland = "nordjylland";
$('div#kommuner_syddanmark').hide();
$('div#kommuner_sjaelland').hide();
$('div#kommuner_midtjylland').hide();
$('div#kommuner_hovedstaden').hide();
$('div#kommuner_nordjylland').show();
});
});
</nowiki></pre>
Keep in mind, i copied the code and it seems that some already tried to fix "non support" for netscape.
Modified by cor-el
All Replies (2)
It is probably best to use this version with an href attribute in the area tag.
<MAP name="map1"> <area shape="poly" coords="" href="" alt="" > </MAP>
But i neda chance a variable in my global.js. href is for links right? I dont need that.