event mouseover/mouseout img repeater ACF

• alexcrc

• June 20, 2020 at 5:15 pm

Hello everyone !

Currently, I’m trying to configure a rollover effect with mouseover / mouseout events on an image in the ACF wordpress plugin repeater and have the rollover change the image to another image. Here is the repeater code which means that when you press the new project key, it should display an image with a built-in link and the name of the project. (see the site orianehelbert.fr for the example of projects).

<?php if( have_rows('projets') ): ?>
                    <?php while( have_rows('projets') ): the_row(); 
                                $image = get_sub_field('image_projet');
                                $imageHover = get_sub_field('image_hover_projet');
                            ?>

                    <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 cas justify-content-center">
                        <a href="<?php  the_sub_field('lien_vers_le_projet');   ?>" class="d-block w-100 a">

                            <?php if( get_sub_field('image_projet')  ): ?>
                            <img class="imageProjet" src="<?php the_sub_field('image_projet'); ?>"
                               onmouseover="this.src='<?php the_sub_field('image_hover_projet') ?>'"
                               onmouseout="this.src='<?php the_sub_field('image_projet') ?>'" />
                            <?php endif; ?>
                        </a>

                        <div class="titreProjet" data-aos-duration="900" data-aos-once="true">
                            <?php the_sub_field('titre_du_projet');;?>
                        </div>
                        <div data-aos-delay="300" data-aos-duration="700" data-aos-easing="ease-in-out"
                            data-aos-once="true" class="trait">
                        </div>
                    </div>
                    <?php endwhile; ?>
              <?php endif; ?>

so the images with the incorporated link are displayed nickel but when I want to put the mouseout and mouseover events, there is only the first image which has a hover effect, the following 3 do not.

<?php if( get_sub_field('image_projet')  ): ?>
                            <img class="imageProjet" src="<?php the_sub_field('image_projet'); ?>"
                               onmouseover="this.src='<?php the_sub_field('image_hover_projet') ?>'"
                               onmouseout="this.src='<?php the_sub_field('image_projet') ?>'" />
                          <?php endif; ?>

if anyone would have a lead to help me. I thank you in advance

• alexcrc

• June 22, 2020 at 5:47 am

I’m Trying this :

  <?php if( have_rows('projets') ): ?>
                        <?php while( have_rows('projets') ): the_row(); 
                                    $image = wp_get_attachment_image_src(get_sub_field('image_projet'));
                                    $imageHover = wp_get_attachment_image_src(get_sub_field('image_hover_projet'));
                                ?>
                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 cas justify-content-center">
                            <a href="<?php  the_sub_field('lien_vers_le_projet');   ?>" class="d-block w-100 a">
                                <?php if( get_sub_field('image_projet')  ): ?>
                                <img class="imageProjet" src="<?php echo $image[0]; ?>"
                                   onmouseover="this.src='<?php echo $imageHover[0]; ?>'"
                                   onmouseout="this.src='<?php echo $image[0]; ?>'" />
                                <?php endif; ?>
                            </a>
                            <div class="titreProjet" data-aos-duration="900" data-aos-once="true">
                                <?php the_sub_field('titre_du_projet');;?>
                            </div>
                            <div data-aos-delay="300" data-aos-duration="700" data-aos-easing="ease-in-out"
                                data-aos-once="true" class="trait">
                            </div>
                        </div>
                        <?php endwhile; ?>
                        <?php endif; ?>

the hover on the first image works very well and when I move the mouse over it, the new image appears more disappears when I remove the mouse.
By cons I can not recover the url of the hover image on the following images ……

someone to help me, i am a little lost.
thank you

• alexcrc

• June 22, 2020 at 11:39 pm

Here is the solution to the problem :

in the acf parameters you create two sub fields, one with the first image and the second with the image that will appear during the hover.
You select Image URL for the two images and then you integrate this code:

<?php if( have_rows('projets') ): ?>
                        <?php while( have_rows('projets') ): the_row(); 
                                    $image = get_sub_field('image_projet');
                                    $imageHover = get_sub_field('imghover');
                                ?>
                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 cas justify-content-center">
                            <a href="<?php  the_sub_field('lien_vers_le_projet');   ?>" class="d-block w-100 a">
                                <?php if( get_sub_field('image_projet')  ): ?>
                                <img class="imageProjet" src="<?php echo $image; ?>"
                                   onmouseover="this.src='<?php echo $imageHover; ?>'"
                                   onmouseout="this.src='<?php echo $image; ?>'" />
                                <?php endif; ?>
                            </a>
                            
                        </div>
                        <?php endwhile; ?>
                        <?php endif; ?>