Non support for onmouse effects..... With javascripts aswell..... Other browsers love it.

2 replies
1 has this problem
5 views
Last reply by Mikethk

12 years ago

Mikethk

19/11/12 11:56 AM

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:

v

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 2012, നവംബർ 19 8:00:07 PM -0800 by cor-el

Answer 1 · 2012-11-19 11:56:29

cor-el

Moderator
Top 10 Contributor

19/11/12 1:22 PM

It is probably best to use this version with an href attribute in the area tag.

http://www.html-tutorials.net/map.html

<MAP name="map1">
 <area shape="poly" coords="" href="" alt="" >
</MAP>

Answer 2 · 2012-11-19 11:56:29

Mikethk Question owner

19/11/12 8:00 PM

But i neda chance a variable in my global.js. href is for links right? I dont need that.

Search Support

Non support for onmouse effects..... With javascripts aswell..... Other browsers love it.

All Replies (2)

Explore by product

Explore by topic

Browse by product

Browse all forum threads by topic

Get help with

Search Support

Non support for onmouse effects..... With javascripts aswell..... Other browsers love it.

All Replies (2)