onmouseout /onmouseover rubrika: Programování: JavaScript

2 mlongx3
položil/-a 25.1.2021

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
8 rmaslo
odpověděl/-a 25.1.2021

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.2021
  • rmaslo : No pokud vadí okraje tabulky tak by asi nejlepší ji bylo nastavit nějaký class a v něm nastavit border... — 26.1.2021
  • 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.2021
  • mlongx3 : Postni prosím zdrojový kód. — 27.1.2021
  • rmaslo : @jpesout: jj. to je pravda, ale snad by stačilo preloudnout do nějakého skrytého elementu :-). — 27.1.2021
  • 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.2021
  • mlongx3 : Ahojte, možem poprosiť o kompletný "zdroják" s rolloverom. Ďakujem — 29.1.2021
  • Kit : https://wellstyled.com/css-nopreload-rollovers.html — 29.1.2021

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.

Aktuální otázky v rubrice Programování: JavaScript

Otázky uživatele mlongx3