asked on

Jquery Image Swap

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

BuggyCoder

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

ASKER CERTIFIED SOLUTION

john_yourspace

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

BuggyCoder

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

john_yourspace

ASKER

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>