Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #310431

    Hei guys,

    I want an image to change (to another image, same size) on mouseover. Is there a possibility to do this?

    Thank you in advance!

    #310489

    Hey allaboutapps!

    Please edit your product and add image to your product gallery on the right hand side of the screen. Then on “Product hover” section choose “Show first gallery image” – http://i.imgur.com/MIrVuOJ.png
    You can see example on Enfold demo site – http://kriesi.at/themes/enfold/shop/

    Best regards,
    Yigit

    #310598

    Hei Yigit,

    thank you for your hint, but it’s not about a product, but about an “about us” page for the company. There should be a photo and when you move your cursor over it, the photo should change to another one.

    Sorry for me being so unspecific!

    #310616

    Hi!

    Please turn on Custom CSS field element for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and give your image a unique class ( i.e.: custom-image ) and then add following code to Functions.php file in Appearance > Editor

    function add_custom_image(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery('.custom-image img').hover(function(){ 
    jQuery('.custom-image img').attr('src','http://kriesi.at/themes/wp-content/plugins/avia_cachable_style_switch/images/logo-enfold/splash-orange.png');
    });
    jQuery('.custom-image img').mouseleave(function(){
    jQuery('.custom-image img').attr('src','http://kriesi.at/wp-content/themes/kriesi/images/logo.png');
    });
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_image');

    You should change image url’s. Second url should be to the initial image.
    For more advanced solution, please hire a freelance developer

    Regards,
    Yigit

    #310950

    Maybe a nice html-based solution:
    what-ever-you-like

    #310952

    Maybe a nice html-based solution:

    
    <img onmouseover="this.src='path-to-mouse-over-image';" onmouseout="this.src='path-to-normal-image';" src="path-to-normal-image" alt="what-ever-you-like"  />
    
    #310954

    Hi!


    @martijn_fernandez_cordoba
    thank you for your input

    Best regards,
    Yigit

    #311717

    Thank you a lot guys! I tried it with the html-solution and it worked just as I wanted!

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Change Image on Mouseover’ is closed to new replies.