webForumDet fria alternativet

Onmouseover + map = skakigt

5 svar · 509 visningar · startad av leniz

lenizMedlem sedan aug. 2001676 inlägg
#1

Hej!

Använder en onmouseover på en map (area shape="poly") där jag har en himla massa koordinater. Vid onmouseover visas en bild ovanpå den här andra bilden (båda ligger i var sitt layer). Det funkar men när man väl fört musen över området och rör musen inom området så laddas det om hela tiden så det blinkar då bilden visas/inte visas/visas hela tiden om man inte håller musen blick stilla inom området.

Finns det något sätt att få onmouseover att inte ladda om (vilket jag antar är det som händer) när man rör musen inom det område man definierat med alla koordinater?

Mvh Lena

voigtann1Medlem sedan juni 20019 519 inlägg
#2

Man kan lösa det med CSS:
http://www.alistapart.com/articles/imagemap/
http://alistapart.com/articles/sprites
(exempel på ovan http://alistapart.com/d/sprites/ala-image3.html )

Hjälper kanske inte dig.. men har du något exempel uppe (med bilder) som man skulle kunna kolla på?

lenizMedlem sedan aug. 2001676 inlägg
#3

Hm, nja jag vet inte riktigt. Jag har tyvärr inget exempel uppe men här är lite kod =)

Jag använder Jojoxx layerlib för att växla layer. Sen har jag så att om man för musen över olika texter så visas en bild ovanpå den andra för att markera ett område på den.

Förutom detta vill jag nu också att man ska kunna föra musen över området och att det delområde man befinner sig på då ska markeras genom att det visas en bild ovanpå den andra, precis som när man för musen över texten.

Så jag tänkte använda samma funktion till det, men då blir det detta "darr" hela tiden.

<map name="karta">
<area shape="poly" coords="106,0,128,14,134,24,144,55,147,79,122,99,116,100,111,96,105,96,
100,101,94,97,86,91,81,91,72,80,58,74,58,62,72,29,100,0" alt="Område 1" href="resultat.asp?id=23" 
onmouseover="showLayer('omrade');" onmouseout="hideLayer('omrade');">  
</map>
<div style="position:relative;top:0;left:0;">
<img src="design/karta.gif" border="0" width="148" height="350" usemap="#karta">
<div class="layer1" id="omrade" style="position:absolute;top:0;left:54;visibility:hidden;">
<img src="design/delomrade1.gif"></div>
</div>
lenizMedlem sedan aug. 2001676 inlägg
#4

Kan det vara så att när jag rör musen på bilden (karta.gif) så visas den andra bilden (delomrade1.gif) ovanpå den. När jag då rör mig vidare så befinner jag mig inte längre på karta.gif utan på delomrade1.gif och då "tror" datorn att jag har kört mouseout och visar karta.gif istället. När jag då rör mig på karta.gif så känner den att jag är på området (mouseover) och visar delomrade1.gif igen och så håller det på?

lenizMedlem sedan aug. 2001676 inlägg
#5

Hej igen!
Så var det nog!
När jag lade till usemap="#karta" border="0" onmouseover="showLayer('omrade');" onmouseout="hideLayer('omrade');" efter delomrade1.gif så funkar det utan "darr" =)

voigtann1Medlem sedan juni 20019 519 inlägg
#6

Precis så är det ;) kalas att det löste sig :)

133 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)