We help IT Professionals succeed at work.

Jquery Image Swap

john_yourspace
john_yourspace used Ask the Experts™
on
Hi guys,

I have the following structure

<div class="right-col">
        	<div class="panel crisispregancy">
            <h1 class="homepage"><a href="<?php echo get_permalink(21)?>">Crisis Help</a></h1>
          	<div class="panel_arrow"><a href="<?php echo get_permalink(21)?>"><img src="<?php bloginfo('template_directory'); ?>/images/arrow_homepage_panel.png" alt="go" width="30" height="36"/></a></div>
            <img src="<?php bloginfo('template_directory'); ?>/images/crisispreg_imag.jpg" alt="Crisis Pregnancy" width="225" height="172" class="panel_image" />
            </div>
            
		<div class="panel education">
        	<h1 class="homepage"><a href="<?php echo get_permalink(22)?>">Education</a></h1>
        <div class="panel_arrow"><a href="<?php echo get_permalink(22)?>"><img src="<?php bloginfo('template_directory'); ?>/images/arrow_homepage_panel.png" alt="go" width="30" height="36" /></a></div>
            <img src="<?php bloginfo('template_directory'); ?>/images/sexeducation_image.jpg" alt="Sex Education" width="225" height="172" class="panel_image" />
        </div>
        
        <div class="panel publications">
            <h1 class="homepage"><a href="<?php echo get_permalink(23)?>">Publications</a></h1>
        <div class="panel_arrow"><a href="<?php echo get_permalink(23)?>"><img src="<?php bloginfo('template_directory'); ?>/images/arrow_homepage_panel.png" alt="go" width="30" height="36" /></a></div>
            <img src="<?php bloginfo('template_directory'); ?>/images/publications_img.jpg" alt="Publications" width="225" height="172" class="panel_image" />
        </div>
        

        
        
    </div>

Open in new window




I am adding my listener to panel

<script>

$(function() {
    $(".panel")
        .mouseover(function() { 
         $(this).next('.panel_image').hide();
        })
        .mouseout(function() {
           console.log("out");
        });
});
</script>

Open in new window


I am trying to hide the image on mouse over and restore on mouse out, it dont seem to like the selector - any suggestions

John
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
well ideally if i have a image on page with id imageId, then to swap it with other image i will simply do this:-

on mouse over:-
$('#imageId').attr('src','mouseover_imagesource');

Open in new window


on mouse out:-
$('#imageId').attr('src','mouseout_imagesource');

Open in new window

Thanks BuggyCoder, cannot do that as there is more then one image all with different ids, any idea on how to get it to work using the $this.next("img") selector?

John
make a function called Swap like this:-

function SwapImage(ImageId,ImageSrc)
{
$('#'+ImageId).attr('src',ImageSrc);
}

Author

Commented:
Thanks for the idea, I used this in the end

<script language="javascript" type="application/javascript">

      $(function() {
    $(".panel")
        .mouseover(function() {
            
                   $('.panel_image',this).hide();
                  $('.panel_text',this).show();
                  $('.bottomPanelImage',this).hide();
                  

        })
        .mouseout(function() {
               $('.panel_text',this).hide();
           $('.panel_image',this).show();
               $('.bottomPanelImage',this).show();

        });
      });




</script>