悬停文本菜单时更改IMG src

Question

Currently I am using the code below to change the image but what I needed to do is change the image the same time I hover at the title link of the image

onmouseover="this.src='Images/img.png'" onmouseout="this.src='Images/img2.png'"

For example when someone hover to the title link eg 'Chicken Menu' the image below it will change from img.png to img2.png wherein img.png is a front page and img2.png is where my list of menu can be found

Answer 1

If you want to do this using only CSS you can use the adjacent sibling combinator (+).

considering ur HTML as -

<div id="headingtext">HEADING</div>
<div id="imgDiv"></div>

CSS can be -

#headingtext:hover + #imgDiv {
    background-image: url("https://images.blogthings.com/thesingleflowertest/flower-3.png");
    background-repeat:no-repeat;
    height:500px;
}

#imgDiv {
    background-image: url("https://images.blogthings.com/thesingleflowertest/flower-5.png");
    background-repeat:no-repeat;
    height:500px;
}

Fiddle Demo : http://jsfiddle.net/3z8CN/

Answer 2

You can do something like this :

<a href="#">Link</a>
<img src="http://www.blogwmp.com/wp-content/uploads/2009/08/google-logo-100x100.png" alt="">

<script>
    $('a').hover(function(){
        $('img').attr("src", "http://www.betaarchive.com/forum/download/file.php?avatar=16617_1318156786.png");             
    }, function(){
        $('img').attr("src", "http://www.blogwmp.com/wp-content/uploads/2009/08/google-logo-100x100.png");             
    });
</script>

Here's the Fiddle

So with .hover() you change the attribute src of the image and you replace it by your other image. .hover() has parameter onMouseOver and onMouseOut so when the mouse leaves the link we put back the initial image.

Answer 3

check the fiddle...

fiddle

you need to add the jquery

--HTML--

<ul>
    <li>
        <span class='my_span'>this is image</span>
        <img src="http://dummyimage.com/100x100/000000/fff"/>
    </li>
    <li>
        <span class='my_span'>this is image</span>
        <img src="http://dummyimage.com/100x100/000000/fff"/>
    </li>
</ul>

-- jquery --

$('span.my_span').hover(
    function(){
        $(this).next('img').attr("src","http://dummyimage.com/100x100/888888/000");
    },
    function(){
        $(this).next('img').attr("src", "http://dummyimage.com/100x100/000000/fff");             
    }
);