Autor Zpráva
Cecil Conrad
Profil *
Tento trik mi v Exploreru funguje, ale v Opeře mi u přijetí myši na mapu obrázek 2.jpg zmizí a zobrazí se 1.jpg
Nevíte proč ??????????????????????????????

<map name="test">
<area href="http://www.seznam.cz" shape="rect" coords="122, 135, 460, 320">
</map>
<img src="1.jpg" usemap="#test" onmouseover="this.src='2.jpg'" onmouseout="this.src='1.jpg'">

Deka
Miloš
Profil
Edit – oprava: omyl – neplatí: V Opeře 9.02 vyzkoušeno, žádný problém
viz následující příspěvek
Miloš
Profil
Omyl – myslel jsem že funguje, ale špatně jsem pochopil, co a jak fungovat (ne)má.
Tak, jak se chová Opera, se ale chová i FF, takže je ozázka, co je standardním chovámím.
Cecil Conrad
Profil *
Jakto?
Cecil Conrad
Profil *
Jasně, vykašlu se na to. Dík
Bubák
Profil
Co takhle měnit obrázek pomocí CSS text-indent, jak to dělá habendorf:
http://stuff.1-webdesign.cz/text-indent.html - příklad
http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=3&topic=39 934 příklad jsem viděl v téhle diskusi, je tam popis, jak to funguje (v diskusi se řeší i jiné problémy, tak si jich nevšímej).

Výhodou je, že mapu jednoznačně přiřadíš k obrázku, "nekecá" do toho žádný skript.
Miloš
Profil
Bubák
to nemění pomocí text-indent (tato vlastnost má na starosti odsazení pevního řádku odstavce), ale vlastnost background-image, aplikovaná s jedním obrázkem na nějaký prvek, a jiným obrázkem na :hover tohoto prvku.
Problém je prozměnu s IE, poněvadž ten zná :hover jen u odkazů (<a href>).

UPD.:
Ale ta mapa je vlastně odkaz, tak to nejspíš půjde.
Bubák
Profil
Miloš
to nemění pomocí text-indent (tato vlastnost má na starosti odsazení pevního řádku odstavce), ale vlastnost background-image, aplikovaná s jedním obrázkem na nějaký prvek, a jiným obrázkem na :hover tohoto prvku.
Mýlíš se, stačí se podívat do kódu, že nejde o "klasické" řešení s background.

Myslel jsem si, že habendorf použil dva obrázky, ale použití dvou obrázků nic nebrání, pokud by to bylo výhodnější:

<style type="text/css">
a {display:block; width:468px; height:60px; overflow:hidden;}
a:hover {text-indent:-468px;}
a img {border:none;}
</style>
<a href="#">
<img src="http://www.jakpsatweb.cz/komix/default.gif" width="468" height="60"><img
src="http://www.jakpsatweb.cz/komix/jak_udelat.gif" width="468" height="60"></a>
Miloš
Profil
Bubák
Aha, nojo, teď na to koukám; pravdu díš.
Tohle je pozoruhodné řešení, ale nese s sebou (b)IMHO nevýhodu – posunuje se celým prvkem <a>, takže má-li nad tím obrázkem být ta mapa, kterou tam chce Cecil Conrad mít, bude se posunovat s tím, takže je to v tomto případě nepoužitelné řešení.

Dva různé obrázky na pozadí považuji za lepší řešení – mapa bude zcela průhledný gif (nebo png) a jako mapa se bude chovat vždy, ale když nad ni najede myš, změní se obrázek na pozadí. A obrázek na pozadí může jako klikací mapa vypadat.
Toto řešení pak lze vylepšit pomocí background-position (viz Pixyho rollovery bez preloadu). Toto řešení se podobá Habendorfovu v tom, že jsou dva obrázky v jednom, ale narozdíl od něho nehýbá prvkem, ale pouze pozadím.
Cecil Conrad
Profil *
Jak se to přesně zapíše ?
Cecil Conrad
Profil *
aha už chápu
<div id="menu">
habendorf
Profil
Teď jsem nějak se zpožděním našel tento thread, jen krátce zareaguju na Miloše.

posunuje se celým prvkem <a>

Chápu jak to myslíš, ale upřesním to. Neposunuje se prvkem a, ale jeho obsahem. Což je rozdíl.
switch
Profil *
ted trochu z jineho soudku.. nevite nekdo jak odstranit ten modry ramecek okolo obrazku kdyz pouziva klikaci mapu?
diky moc za odpoved.
Toto téma je uzamčeno. Odpověď nelze zaslat.