Bram_Boterham Bram_Boterham - 1 month ago 18
jQuery Question

Wordpress ACF: Image field, change image on mouse over

Instead of this:

<?php $image = wp_get_attachment_image_src(get_sub_field('med_foto'), 'medium'); ?>
<?php $thumb = wp_get_attachment_image_src(get_sub_field('med_foto'), 'thumbnail'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php the_sub_field('med_naam');?>" rel="<?php echo $thumb[0]; ?>" />


I use this (and its working):

<?php $image = wp_get_attachment_image_src(get_sub_field('med_foto'), 'medium'); ?>
<?php $image2 = wp_get_attachment_image_src(get_sub_field('med_foto2'), 'medium'); ?>
<?php $thumb = wp_get_attachment_image_src(get_sub_field('med_foto'), 'thumbnail'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php the_sub_field('med_naam');?>"
rel="<?php echo $thumb[0]; ?>" onmouseover="this.src='<?php echo $image2[0]; ?>'"
onmouseout="this.src='<?php echo $image[0]; ?>'" />


Original Question:

I have a flexible content field containing a name, a link to a personal page and 2 image fields (both returning object id): the original image and a "mouse-over" image.

I want to display these fields on a page, so i added the following code (between a while-statement, but that messes up the code:

<?php if(get_row_layout() == "medewerker"): // layout: Content ?>
<div class="medewerker_blok">
<div class="med_naam">
<?php the_sub_field("med_naam"); ?>
</div>
<a href="<?php the_sub_field('medewerkers_pagina'); ?>" >
<div class="med_foto">
<?php $image = wp_get_attachment_image_src(get_sub_field('med_foto'), 'medium'); ?>
<?php $thumb = wp_get_attachment_image_src(get_sub_field('med_foto'), 'thumbnail'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php the_sub_field('med_naam');?>" rel="<?php echo $thumb[0]; ?>" />

</div>
</a>
</div>
<div class="clear"></div>

<?php endif; ?>


This works fine: it shows the name field, the image.
So far so good.
But now I would like an option where it replaces this image with the second image field when you hover over the picture.

I cant get it working, must be missing something.

Please note, it is a flexible field, so the mouseover shouldn't trigger al the other repeated blocks.

I hope someone can help me with this!

Cheers,

Bram

Answer

Solved it with the following code.

Instead of this:

 <?php $image = wp_get_attachment_image_src(get_sub_field('med_foto'), 'medium'); ?>
 <?php $thumb = wp_get_attachment_image_src(get_sub_field('med_foto'), 'thumbnail'); ?>
 <img src="<?php echo $image[0]; ?>" alt="<?php  the_sub_field('med_naam');?>" rel="<?php echo $thumb[0]; ?>" />

I use this (and its working):

  <?php $image = wp_get_attachment_image_src(get_sub_field('med_foto'), 'medium'); ?>
  <?php $image2 = wp_get_attachment_image_src(get_sub_field('med_foto2'), 'medium'); ?>
  <?php $thumb = wp_get_attachment_image_src(get_sub_field('med_foto'), 'thumbnail'); ?>
  <img src="<?php echo $image[0]; ?>" alt="<?php  the_sub_field('med_naam');?>"
  rel="<?php echo $thumb[0]; ?>" onmouseover="this.src='<?php echo $image2[0]; ?>'" 
  onmouseout="this.src='<?php echo $image[0]; ?>'" />