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

2 პასუხი
1 მომხმარებელი წააწყდა მსგავს სიძნელეს
5 ნახვა
ბოლოს გამოეხმაურა Mikethk

12 წლის წინ

Mikethk

19.11.12, 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.

ჩასწორების თარიღი: 19 ნოემბერი, 2012, 20:00:07 -0800, ავტორი: cor-el

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

cor-el

Moderator
Top 10 Contributor

19.11.12, 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 კითხვის დამსმელი

19.11.12, 20:00

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

ძიება მხარდაჭერაში

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

ყველა პასუხი (2)

მიაკვლიეთ პროდუქტებით

მიაკვლიეთ საკითხებით

აირჩიეთ პროდუქტი

მონახეთ განხილვები საკითხების მიხედვით

დახმარების მისაღებად იხილეთ

ძიება მხარდაჭერაში

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

ყველა პასუხი (2)