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

2 antwoorde
1 het hierdie probleem
2 views
Laaste antwoord deur Mikethk

12 jaar gelede

Mikethk

2012-11-19 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.

Gewysig op 19 November 2012 20:00:07 -0800 deur cor-el

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

cor-el

Moderator
Top 10 Contributor

2012-11-19 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 Vraag-eienaar

2012-11-19 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)