| Autor | Zpráva | ||
|---|---|---|---|
| Mihhc Profil |
#1 · Zasláno: 12. 11. 2011, 15:00:07
Zdravím,
prosil bych o radu. Pokouším se o klikací mpau s hover efektem. Postupoval jsem podle návodu na interval.cz. Mám obrázek s nějakými postavami(jpg), a chci na po najetí na určitou postavu vytvořit hover efekt. (nechci to dělat jen přes obdelníky s css) Vytvořil jsem tedy průhledný gif s pokaždé s jednou upravenou postavou, jakoby pod sebou.(zkrátka jak je v návodu s prvním místem prázdným) Asi bude problém s tím JS. Já mám jen jeden sloupec, s výškou jenoho obrázku 308px. 1. obrázek prázdný a pak pokadé jedna psotava, dohromady 8 obrázků = 2464px. Zatím se mi vůbec nepovedlo nějaký hover efekt vyvolat. img { border: 0px none; padding: 0px; margin: 0px; }
#ma { padding: 0px; background: #7aa1e6 url(pein2.gif) top left no-repeat; width: 620px; font-size: 1px; } <script language="JavaScript" type="text/javascript">
<!--
function mapa(kolik) {
document.getElementById('ma').style.backgroundPosition = "0px -"+(kolik*308)+"px";
}
// -->
</script> <div id="ma">
<img src="pein1.jpg" alt="mapka" usemap="#mapka" />
<map name="mapka">
<area onmousemove="mapa('1');" onmouseout="mapa('0');" href="#" alt="Hlavní město Praha" title="Hlavní město Praha" shape="circle" coords="76,68,8" />
<area onmousemove="mapa('2');" onmouseout="mapa('0');" href="#" alt="Jihočeský kraj" title="Jihočeský kraj" shape="poly" coords="...." />
<area onmousemove="mapa('3');" onmouseout="mapa('0');" href="#" alt="Jihomoravský kraj" title="Jihomoravský kraj" shape="poly" coords="..." />
<area onmousemove="mapa('4');" onmouseout="mapa('0');" href="#" alt="Karlovarský kraj" title="Karlovarský kraj" shape="poly" coords="..." />
<area onmousemove="mapa('5');" onmouseout="mapa('0');" href="#" alt="Královehradecký kraj" title="Královehradecký kraj" shape="poly" coords="..." />
<area onmousemove="mapa('6');" onmouseout="mapa('0');" href="#" alt="Liberecký kraj" title="Liberecký kraj" shape="poly" coords="..." />
<area onmousemove="mapa('7');" onmouseout="mapa('0');" href="#" alt="Moravskoslezský kraj" title="Moravskoslezský kraj" shape="poly" coords="0,320,150,320,130,160,100,0,0,0" />
</map>
</div>Tak prosím co nejpodrobnější vysvětlení, už se s tím dělámpoměrně dlouho, takže prosím vysvětlení jak pro blbce. Předem díky, M. |
||
| Mihhc Profil |
#2 · Zasláno: 13. 11. 2011, 14:45:01
Tak vyřešeno, nějak mi to dneska ráno trklo.
JS bylo v pořádko. Šlo o to, že podle návodu není pozadí <img src...> ... takže jestliže není průhledný, tak obrázky, které měli dělat hover efekt se promítali za něj(jestli vůbec). Vyřešeno následovně, ale určitě to jde i lépe. <div id="fake">
<div id="ma">
<img src="fkae.gif" alt="mapka" usemap="#mapka" /> //zde je pouze průhledný gif
<map name="mapka">
<area onmousemove="mapa('1');" onmouseout="mapa('0');" href="#" alt="Hlavní město Praha" title="Hlavní město Praha" shape="poly" coords="0,320,150,320,150,0,0,0" />
<area onmousemove="mapa('2');" onmouseout="mapa('0');" href="#" alt="Jihočeský kraj" title="Jihočeský kraj" shape="poly" coords="150,320,200,320,200,0,150,0" />
<area onmousemove="mapa('3');" onmouseout="mapa('0');" href="#" alt="Jihomoravský kraj" title="Jihomoravský kraj" shape="poly" coords="200,320,250,320,250,0,200,0" />
<area onmousemove="mapa('4');" onmouseout="mapa('0');" href="#" alt="Karlovarský kraj" title="Karlovarský kraj" shape="poly" coords="25,320,300,320,300,0,250,0" />
<area onmousemove="mapa('5');" onmouseout="mapa('0');" href="#" alt="Královehradecký kraj" title="Královehradecký kraj" shape="poly" coords="300,320,500,320,500,0,300,0" />
<area onmousemove="mapa('6');" onmouseout="mapa('0');" href="#" alt="Liberecký kraj" title="Liberecký kraj" shape="poly" coords="500,320,550,320,550,0,500,0" />
<area onmousemove="mapa('7');" onmouseout="mapa('0');" href="#" alt="Moravskoslezský kraj" title="Moravskoslezský kraj" shape="poly" coords="550,320,620,320,620,0,550,0" />
</map>
</div></div>#ma { padding: 0px; background: url(pein2.gif) top left no-repeat; width: 620px; font-size: 1px; } //měnící se průhledné pozadí s hover
#fake { padding: 0px; background: url(pein1.jpg) top left no-repeat; width: 620px; font-size: 1px; } //obal s obrázkem Třeba se to někomu bude hodit. PS: Nevíte v čem jde naklikat klikací mapa(souřadnice)? Používám Notepad++, tam asi nejde? Je dost úmorný to dělat přímo do kódu. |
||
|
Časová prodleva: 12 let
|
|||
0