onmouseout /onmouseover rubrika: Programování: JavaScript

1 mlongx3
položil/-a 25.1. 12:54

Mám obrázok rozdelený na 4 časti a potrebujem, aby sa každá časť samostatne zmenila po nájazde myšou. (v pravo hore/v pravo dole/v ľavo hore/v ľavo dole)
A kliknutím by odkazovali na 4 rôzne web_odkazy.

ďakujem.

odkaz
13 rmaslo
odpověděl/-a 25.1. 19:19

Udělal bych to bez JS pomocí :hover

<STYLE>
.obr11, .obr12, .obr21, .obr22 {display:block; width:300px; height:200px; background-color:#EEE}
.obr11 {background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100' height='50' x='50' y='20' fill='red'/></svg>")}
.obr12 {background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100' height='50' x='50' y='20' fill='orange'/></svg>")}
.obr21 {background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100' height='50' x='50' y='20' fill='green'/></svg>")}
.obr22 {background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100' height='50' x='50' y='20' fill='blue'/></svg>")}
.obr11:hover {background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg'><rect width='50' height='100' x='50' y='20' fill='red'/></svg>")}
.obr12:hover {background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg'><rect width='50' height='100' x='50' y='20' fill='orange'/></svg>")}
.obr21:hover {background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg'><rect width='50' height='100' x='50' y='20' fill='green'/></svg>")}
.obr22:hover {background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg'><rect width='50' height='100' x='50' y='20' fill='blue'/></svg>")}
</STYLE>
<TABLE cellspacing=0 cellpadding=0>
<TR><TD><A class="obr11" href=""></A></TD><TD><A class="obr12" href=""></A></TD></TR>
<TR><TD><A class="obr21" href=""></A></TD><TD><A class="obr22" href=""></A></TD></TR>
</TABLE>

Do toho url v background-image si samozřejmě dej vlastní obrázky.
Místo tabulky lze samozřejmě použít flexboxy nebo grid. Nicméně pokud je to tabulka linků tak je asi tabulka OK.

Komentáře

  • mlongx3 : Je to funkčné. Zobrazuje mi okraje tabuľky. 26.1. 13:28
  • rmaslo : No pokud vadí okraje tabulky tak by asi nejlepší ji bylo nastavit nějaký class a v něm nastavit border... 26.1. 19:20
  • jpesout : První, co mě napadlo bylo, že když to uděláš takhle, tak ti obrázek bude při změně blikat v IE 6. Takže se to řeší jedním dvojitým obrázkem a změnou background-position. Nechápu, proč si tohle pamatuju i po 15+ letech :) 27.1. 8:18
  • mlongx3 : Postni prosím zdrojový kód. 27.1. 9:30
  • rmaslo : @jpesout: jj. to je pravda, ale snad by stačilo preloudnout do nějakého skrytého elementu :-). 27.1. 17:38
  • Kit : @jpesout: Co je to IE 6? Samozřejmě souhlas s tím rolloverem. Je i úspornější na přenos dat, šetří server a stránka se načte rychleji. 28.1. 13:05
  • mlongx3 : Ahojte, možem poprosiť o kompletný "zdroják" s rolloverom. Ďakujem 29.1. 8:44
  • Kit : https://wellstyled.com/css-nopreload-rollovers.html 29.1. 10:52

Pro zobrazení všech 5 odpovědí se prosím přihlaste:

Rychlé přihlášení přes sociální sítě:

Nebo se přihlaste jménem a heslem:

Zadejte prosím svou e-mailovou adresu.
Zadejte své heslo.