Simple jQuery question | show selected object previously hidden

Discussion in 'jQuery' started by jeremyhowell, Jan 6, 2011.

0
  1. #1
    I would simply like to achieve this in jQuery:

    I would like an image caption to be displayed when a user hovers over a particular image on a page (there are several) I was thinking I could

    (a) Append the caption div when the user hovers over the image and delete it when it leaves focus
    (b) change the visibilty of the div when the user hovers over the image, and hide it when its not

    I can set this up simply enough, but my problem is how would I append the caption to the particular image's container div I hovered over?

    So here is my code:

    
  <div class="logoleft"><img src="images/logos/logo1.png" alt="Yazah" /><div class="caption">Yazah</div></div>
  <div class="logocentre"><img src="images/logos/logo1.png" alt="Yazah" /><div class="caption">Yazah</div></div>
  <div class="logoright"><img src="images/logos/logo1.png" alt="Yazah" /><div class="caption">Yazah</div></div>
    Code (markup):
    How would I set the visibility of the particular caption depending on what image I rolled over, there might be several more rows of these logos, so would need it to work for all of them, I cant make a function for every single image on the page.

    All help appreciated.
     
    jeremyhowell, Jan 6, 2011 IP
  2. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #2
    INFO: I may not have explained it properly, but in case you are wondering, the div with class "caption" is the div that must be hidden (or deleted) when the user is not focused on the image and must be visible when the user rolls over it.
     
    jeremyhowell, Jan 6, 2011 IP
  3. GNi33

    GNi33 Peon

    Messages:
    16
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    you could just attach a mouseover - handler to the images. (or even better to a surrounding div)
    In the Handler-Function, you can address the image-div that triggered the handler with the "this"-object.

    So now you can access the ".caption"-div, because it's a child of the div that triggered the handler (this.find('.caption')) and just fade it in
    do the same with a mouseout - handler and it should work...
     
    GNi33, Jan 12, 2011 IP
  4. fardesi

    fardesi Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    here is a sample code...



    <style type="text/css">
    div.caption { display:none; }
    </style>

    <div class="imageHolder"><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTiy0y-zjyJoB4ylmKpaa9Yq7C_tCxZuWI08wLaA1UGesFYcHPz"><div class="caption">Caption1</div></div>
    <div class="imageHolder"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSGBr0OEoBktwz1-jSEm9OdqYbbJ6UvQg4-aT3Zo0HRhUq9M5bvPQ"><div class="caption">Caption1</div></div>
    <div class="imageHolder"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcQxJhInUvRFaEi1YfwjBpUc_mBGTFmEOpwMuk4XcZT9-ot6mkwcIQ"><div class="caption">Caption1</div></div>


    $(function(){
    $('div.imageHolder img').mouseover(function(){ $(this).parent().find('div.caption').show(); });
    $('div.imageHolder img').mouseout(function(){ $(this).parent().find('div.caption').hide(); });
    });

    You can see the workings at ...jsbin.com/ewicu5

    You can aslo do this be finding siblings etc... but parent is easier to maintain.
     
    fardesi, Jan 18, 2011 IP