Wednesday, 11 September 2013

Wordpress ACF: Image field, change image on mouse over

Wordpress ACF: Image field, change image on mouse over

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

No comments:

Post a Comment