Forum PHP.pl > Jquery proste przenikanie obrazków

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Jquery proste przenikanie obrazków

Forum PHP.pl > Forum > Po stronie przeglądarki

Witek76

13.05.2013, 22:38:16

Witam!

Znalazłem na stronie prosty przykład przenikania obrazków http://css-tricks.com/snippets/jquery/fade...-another-image/ niestety niewiem jak go uruchomić - próbowałem tak ale (zupełny laik Jquery) tak niedziała- cos nie tak -hmm

CODE

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>

$("#kitten").hover(function(){

$(this).find("images/kitten2.jpg").fadeOut();

}, function() {

$(this).find("images/kitten3.jpg").fadeIn();

});
</script>

</head>

<body>
<div id="kitten">
<img src="images/kitten.jpg" alt="Kitten" />
</div>
</body>
</html>

za pomoc z góry dziękuje,
pozdrawiam,

_Borys_

13.05.2013, 23:50:04

[HTML] pobierz, plaintext 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
   #kitten{
    background: url('images/kitten2.jpg') no-repeat;
    width: 80px;
    height: 60px;
    margin: 0 auto;
   }
   #kitten > img{
    width: 80px;
    height: 60px;
   }
</style>
<script type="text/javascript">
 
  $(document).ready(function(){
  $("#kitten").hover(function(){
     $(this).find("img").fadeOut();
  }, function() {
     $(this).find("img").fadeIn();
  });
  });
</script>
</head>
 
 <body>
 <div id="kitten">
 <img src="images/kitten.jpg" alt="Kitten" />
</div>
 </body>
</html>
[HTML] pobierz, plaintext

Skrypt działa na zasadzie, że gdy najedzie się myszką na obrazek to ów znika a pokazuje się obrazek który jest tłem tego diva.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.