Autor Zpráva
Fanda
Profil *
Mám seznam položek a obrázky. Cílem je když přejedu myší přes položku seznamu zvýrazní (zvetší) se příslušný obrázek a naopak když přejedu myší přes obrázek příslušná položka v seznamu se zobrazí tučně. Chtěl jsem to udělat pomocí jQuery, ale nevím jak přiřadit jednotlivé obrázky k položkám seznamu. Napadlo mě tentýž kód zkopírovat pro každý obrázek, ale to při víve položkách není šťastné řešení.

//HTML KÓD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>My page</title>
<meta name="description" content="" />
<meta name="generator" content="Roden Web Editor"/>
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script  charset="UTF-8" src="js/zkouska.js"></script>
  <link rel="stylesheet" type="text/css" href="css/zkouska.css">  
</head>
<body>

<ul>
<li name="1"><a>Žluté auto</a></li>
<li name="2"><a>Modré auto</a></li>
</ul>

<a><img id="1" src="obrazky/zluteauto.JPG"></img></a>
<a><img id="2" src="obrazky/modreauto.JPG"></img></a>

</body>
</html>

//jQuery kód
$(document).ready(function(){
        
        $("img:eq(0)").hover(
                function(){
                        $("li:eq(0)").css({"font-weight":"bold"});
                },
                function(){
                        $("li:eq(0)").css({"font-weight":"normal"});
                }

        )
              .hover(
                function(){
                        $("img:eq(0)").width(150);
                },
                function(){
                        $("img:eq(0)").width(120);
                }
        );
        
         $("li:eq(0)").hover(
                function(){
                        $("li:eq(0)").css({"font-weight":"bold"});
                },
                function(){
                        $("li:eq(0)").css({"font-weight":"normal"});
                }

        )
              .hover(
                function(){
                        $("img:eq(0)").width(150);
                },
                function(){
                        $("img:eq(0)").width(120);
                }
        );
});
Str4wberry
Profil
Na to stačí špetka CSS (funkční od Exploreru 7). Příklad je jen pro ilustraci!
VraJo
Profil *
Zdravim,

snad si spravne pamatam carovne slovicko this, ktore sa v tomto pripade da pouzit. Pise sa bez prefixu.

Cize selector by bol ("a>img"), namiesto hover by bol mouseenter() a pozadovana funkcia, v ktorej uz netreba dat selector nazov elementu, id alebo triedu ale len slovicko this. Funkcia by obsahovala co chces s css aby robilo pri vstupe kurzora na dany element.

Druhe by bolo to iste ale mouseleave() a pozadovana funkcia s this ako selector a css zas co chces aby robilo pri odideny kurzora z daneho elementu.


[#3] VraJo pardon odideni kurzora...


Moja rada je zlá, zle som si prečítal otázku, potrebuješ zviazať položku zo zoznamu s obrázkom... . V tom prípade ma napadlo, že sa dá využiť, ak to nie je statický, nemenný zoznam a k nemu obrázky - zistiť najprv v ktorom mieste html stromu sa nachádzaš v rámci zoznamu, pri hover alebo mouseenter a podľa toho sa odkázať na daný obrázok. Ten by mohol byť tiež v zozname.
Čiže kurzor je na prvej položke zo zoznamu (child), tak zvýrazni alebo čo už prvú položku zoznamu - obrázok.
Prvý nápad, určite to ide aj oveľa jednoduchšie.
Fanda
Profil *
Špetka CSS a názorný příklad mi pomohli. Vše funguje jak má. Díky

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: