鼠标悬停在文本上会更改固定位置中的图像 - Wordpress

Question

I am working on a wordpress page and i want to set a fixed image and 3 different texts at the the bottom of it.

What I want to do is that when the mouse hover on Text1 the top image changes, when the mouse hover Text2 the top images changes again.

Example: http://fr.muaythaitv.com/pages/helpcenter/advertise.php

I searched on internet but couldn't really find what I'm looking for, hope someone can help me!

Answer 1

You mean something like this ?

HTML markup.

<div id="gallery2"> 
    <div id="panel"> 
        <img id="largeImage2" src="http://placehold.it/100/" /> 
        <div id="description">main image with simple links</div> 
    </div> 

    <div id="thumbs2">
        <a href="http://placehold.it/100/ff3322" >link1</a>
         <a href="http://placehold.it/100/ffc5c5">link1</a>
        <a href="http://placehold.it/100/eec777">link1</a>
        <a href="http://placehold.it/100/887744">link1</a>
    </div> 
</div> 

jQuery :

$('#thumbs2 a').hover(function(){
   $('#largeImage2').attr('src',$(this).attr('href'));
});

Css at your will ..

See Here again - it´s the second example is a live link, the third is anchor disabled link.