Witam.
chciałbym aby po najechaniu na miniaturkę jakiegoś obrazka, pokazywała się jego większa wersja na środku ekranu. Udało mi się to zrobić ale po najechaniu obrazek jquery wykonuje dwa razy funkcje show i poza tym jeżeli miniaturka jest pod miejscem gdzie pokazuje się większa wersja to duży obrazek mi miga pokazuje się i znika i w ogóle robi się bałagan. Jak inaczej można to rozwiązać?
Pokazujący się obrazek:
div#picture_mouse{
display:none;
text-align: center;
position: fixed;
opacity: 0.9;
height: 400px;
width: 509px;
margin: auto;
margin-top: -200px;
margin-left: -254px;
top: 50%;
left: 50%;
z-index: 10;
-moz-border-radius:10px; /* FF */
-webkit-border-radius:10px; /* przeglądarki z webkitem (Safari, Chrome itp.) */
-khtml-border-radius:10px; /* przeglądarki typu K-meleon (typowo Linuxowe) */
border-radius:10px; /* pozostałe przeglądarki */
behaviour:url(border-radius.htc); /* dodatek dla badzIEwnej przeglądarki */
}
Jquery:
<script type="text/javascript">
$("ul.prod_list").children("li").children("img").mouseenter(function() {
var zdjecie=$(this).attr("src");
$("div#picture_mouse").children("img").attr("src",zdjecie);
$("div#picture_mouse").show("scale", {}, 100);
}).mouseleave(function() {
$("div#picture_mouse").hide("scale", {}, 100);
});
</script>
Kod html:
<ul class="prod_list">
<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>"> <p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>"> <p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>"> <p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>"> <p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>"> <p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>"> <p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>"> <p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
</ul>
<div id="picture_mouse"><img src=""/></div>