Wordpress ACF:图像字段,鼠标悬停时更改图像

时间:2013-09-11 10:30:17

标签: php jquery css image wordpress

而不是:

 <?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]; ?>" />

我使用它(及其工作):

  <?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]; ?>'" />

原始问题:

我有一个灵活的内容字段,其中包含名称,个人页面链接和2个图像字段(均返回对象ID):原始图像和“鼠标悬停”图像。

我想在页面上显示这些字段,所以我添加了以下代码(在while语句之间,但这会弄乱代码:

<?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; ?>

这很好用:它显示名称字段,图像。 到现在为止还挺好。 但是现在我想要一个选项,当你将鼠标悬停在图片上时,它会用第二个图像字段替换这个图像。

我无法正常工作,必须遗漏一些东西。

请注意,它是一个灵活的字段,因此鼠标悬停不应触发其他重复的块。

我希望有人可以帮助我!

干杯,

的Bram

1 个答案:

答案 0 :(得分:0)

使用以下代码解决它。

而不是:

 <?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]; ?>" />

我使用它(及其工作):

  <?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]; ?>'" />