Autor Zpráva
kryber
Profil *
Dobrý den,

mám dotaz:

potřebuji, aby obrázek povyjel při mouseover, a odjel zpět při mouseout. Do tohoto Objektu ale potřebuji vložit ještě text. Text je tam vložen pomocí divu.

Mám problém, že při přejetí myši přes text, který je obsažený v mém objektu, dojde v momentě k narušení hranice objektu a tím pádem k znovu načtená funkce. To má za následek, že se pak obrázek hýbe stále dokola (v případě že nechám myš na tomto objektu).

Myslíte že to lze nějak vyřešit?
Předem děkuji za odpověď

<style>
.shadow_button { position:relative; top:50px;}
.footer_head {position:absolute; left:6; top:6; color:#FFF; width:200px; text-align:center; z-index:2 }
#shadow_button1 {position:absolute; left:50px;top:100px; z-index:1}
#shadow_button2 {position:absolute; left:250px;top:100px;z-index:3}
#shadow_button3 {position:absolute; left:450px;top:100px; z-index:4}
#shadow_button4 {position:absolute; left:650px;top:100px; z-index:5}
#shadow_button5 {position:absolute; left:850px;top:100px; z-index:6}
</style>
<script src="jquery.js"></script>
</head>
<body style="background:#003b57">
<div class="shadow_button">
<div id="shadow_button1"><span class="footer_head">Makak</span><img src="images/makak.png" width="212" height="160" alt="makak"></div>
<div id="shadow_button2"><img src="images/makak.png" width="212" height="160" alt="makak"></div>
<div id="shadow_button3"><img src="images/makak.png" width="212" height="160" alt="makak"></div>
<div id="shadow_button4"><img src="images/makak.png" width="212" height="160" alt="makak"></div>
<div id="shadow_button5"><img src="images/makak.png" width="212" height="160" alt="makak"></div>
</div>

<script>
$("#shadow_button1").mouseover(function(){
$("#shadow_button1").animate({"top": "+=-50px"}, "slow");
});
$("#shadow_button1").mouseout(function(){
$("#shadow_button1").animate({"top": "+=50px"}, "slow");
});
$("#shadow_button2").mouseover(function(){
$("#shadow_button2").animate({"top": "+=-50px"}, "slow");
});
$("#shadow_button2").mouseout(function(){
$("#shadow_button2").animate({"top": "+=50px"}, "slow");
});
$("#shadow_button3").mouseover(function(){
$("#shadow_button3").animate({"top": "+=-50px"}, "slow");
});
$("#shadow_button3").mouseout(function(){
$("#shadow_button3").animate({"top": "+=50px"}, "slow");
});
$("#shadow_button4").mouseover(function(){
$("#shadow_button4").animate({"top": "+=-50px"}, "slow");
});
$("#shadow_button4").mouseout(function(){
$("#shadow_button4").animate({"top": "+=50px"}, "slow");
});
$("#shadow_button5").mouseover(function(){
$("#shadow_button5").animate({"top": "+=-50px"}, "slow");
});
$("#shadow_button5").mouseout(function(){
$("#shadow_button5").animate({"top": "+=50px"}, "slow");
});
</script>
kryber
Profil *
<style>
.shadow_button { position:relative; top:50px;}
.footer_head {position:absolute; left:6; top:6; color:#FFF; width:200px; text-align:center; z-index:2 }
#shadow_button1 {position:absolute; left:50px;top:100px; z-index:1}
#shadow_button2 {position:absolute; left:250px;top:100px;z-index:3}
#shadow_button3 {position:absolute; left:450px;top:100px; z-index:4}
#shadow_button4 {position:absolute; left:650px;top:100px; z-index:5}
#shadow_button5 {position:absolute; left:850px;top:100px; z-index:6}
</style>
<script src="jquery.js"></script>
</head>
<body style="background:#003b57">
<div class="shadow_button">
<div id="shadow_button1"><span class="footer_head">Makak</span><img src="images/makak.png" width="212" height="160" alt="makak"></div>
<div id="shadow_button2"><img src="images/makak.png" width="212" height="160" alt="makak"></div>
<div id="shadow_button3"><img src="images/makak.png" width="212" height="160" alt="makak"></div>
<div id="shadow_button4"><img src="images/makak.png" width="212" height="160" alt="makak"></div>
<div id="shadow_button5"><img src="images/makak.png" width="212" height="160" alt="makak"></div>
</div>

<script>
$("#shadow_button1").mouseover(function(){
$("#shadow_button1").animate({"top": "+=-50px"}, "slow");
});
$("#shadow_button1").mouseout(function(){
$("#shadow_button1").animate({"top": "+=50px"}, "slow");
});
$("#shadow_button2").mouseover(function(){
$("#shadow_button2").animate({"top": "+=-50px"}, "slow");
});
$("#shadow_button2").mouseout(function(){
$("#shadow_button2").animate({"top": "+=50px"}, "slow");
});
$("#shadow_button3").mouseover(function(){
$("#shadow_button3").animate({"top": "+=-50px"}, "slow");
});
$("#shadow_button3").mouseout(function(){
$("#shadow_button3").animate({"top": "+=50px"}, "slow");
});
$("#shadow_button4").mouseover(function(){
$("#shadow_button4").animate({"top": "+=-50px"}, "slow");
});
$("#shadow_button4").mouseout(function(){
$("#shadow_button4").animate({"top": "+=50px"}, "slow");
});
$("#shadow_button5").mouseover(function(){
$("#shadow_button5").animate({"top": "+=-50px"}, "slow");
});
$("#shadow_button5").mouseout(function(){
$("#shadow_button5").animate({"top": "+=50px"}, "slow");
});
</script>
fajzen
Profil
kryber:
skús namiesto mouseover použiť mouseenter a namiesto mouseout mouseleave
Kryber
Profil *
fajzen:
Mnohokrát děkuju !!! Moc mi to pomohlo ! Abys viděl, kde to bude použito, tak pak koukni na www.602.cz, zítra :) Děkuji ještě jednou.
fajzen
Profil
Kryber:
za málo, zajtra kuknem

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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