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

2 biyano
1 eza na nkokoso oyo
5 views
Eyano yasuka ya Mikethk

mibu 12 mileki

Mikethk

19/11/2012 11:56

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.

Ezalaki modifié 19 sánzá ya zómi na mɔ̌kɔ́ 2012 20:00:07 -0800 na cor-el

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

cor-el

Moderator
Top 10 Contributor

19/11/2012 13:22

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 Nkolo motuna

19/11/2012 20:00

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)