[jquery]Wysuwany panel Opcje

[Taex]

Witam wszystkich. Potrzebuję skryptu dzięki, któremu po kliknięciu na jakiś obrazek wysunie mi się takie okienko (do góry) a po ponownym kliknięciu (na ten sam obrazek) zniknie. Postanowiłem wykorzystać do tego jquery. Mam takie coś:

jquery

[JAVASCRIPT] pobierz, plaintext 
  $(document).ready(function(){
 
    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div.b").slideDown("slow");
      } else {
        $("div.b").hide();
      }
    });
 
  });
[JAVASCRIPT] pobierz, plaintext 

html

[HTML] pobierz, plaintext 
<div class="b"><iframe src="phong.htm" style="width: 450px; height: 355px"></iframe></div>
<div class="sr02"><div class="a"><img src="img/fc_01.png" alt="01" /></div><div class="sr"><img src="img/game.png" alt="gra" /></div><div class="end"><img src="img/fc_04.png" alt="04" /></div></div>
[HTML] pobierz, plaintext 

css

[CSS] pobierz, plaintext 
div.b {
    margin:3px; 
    display:none; 
    float:left; 
    left:0px;
    bottom:0px;
    position:fixed;
}
.sr02 {
   position:fixed;
   left:10%;
   bottom:0px;
}
.a {
   float: left;
}
.sr {
    background:url(img/fc_02.png) repeat-x;
    width: 30px;
    height: 25px;
    float: left;
    text-align:center;
}
.end {
    float: left;
}
[CSS] pobierz, plaintext 

Wszystko działa niby ładnie ale problem jest taki, że okno to wysuwa się gdzie bym nie kliknął. Jak zrobić, żeby wysuwało się i wsuwało tylko po kliknięciu w obrazek (game.png) ?

Ten post edytował Taex 18.11.2009, 12:00:42

[skowron-line]

[JAVASCRIPT] pobierz, plaintext 
  $(document).ready(function(){
 
    $( 'img' ).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div.b").slideDown("slow");
      } else {
        $("div.b").hide();
      }
    });
 
  });
[JAVASCRIPT] pobierz, plaintext 

i html

[HTML] pobierz, plaintext 
 
      <div class="sr02"><div class="a"><img src="img/fc_01.png" alt="01" /></div><div class="sr"><img src="img/game.png" alt="gra" /></div><div class="end"><img src="img/fc_04.png" alt="04" id="img"/></div></div>
[HTML] pobierz, plaintext 

[Taex]

Hmmm... teraz wysuwa się po kliknięciu na wszystkie obrazki na stronie (IMG:style_emoticons/default/winksmiley.jpg)

[skowron-line]

Hmmm... teraz wysuwa się po kliknięciu na wszystkie obrazki na stronie (IMG:style_emoticons/default/winksmiley.jpg)

Widzisz ja się pomyliłem bo nie do tego obrazka co trzeba dodałem ID, nieznam się na jQuery ale wydawało mi się że to będzie rozwiązanie dodanie id do danego obrazka bo

[JAVASCRIPT] pobierz, plaintext 
$( 'img' )
[JAVASCRIPT] pobierz, plaintext 

odwołuje się do elementu o id="img"

[Taex]

Ten mały błąd zauważyłem i sam zmieniłem ale nic ;/

Edit./ Ok mam (IMG:style_emoticons/default/smile.gif) przed img wystarczyło dodać #

[JAVASCRIPT] pobierz, plaintext 
 $( '#img' ).click(function () {
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował Taex 18.11.2009, 12:22:55