Switch the image source when hovering over a text menu

Question

Switch the image source when hovering over a text menu

Currently, I have been using the following code to switch between images. However, what I actually want to do is change the image when hovering over the title link of the image.

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

For instance, when someone hovers over the title link such as 'Chicken Menu', the image below it will transition from img.png to img2.png. In this scenario, img.png represents the front page image and img2.png showcases a list of menu items.

javascript jquery html css image

Answer 1

Answer №1

To achieve this effect using only CSS, you can utilize the adjacent sibling combinator (+).

Let's consider your HTML structure:

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

The corresponding CSS would 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;
}

Here is a Fiddle Demo showcasing this implementation: http://jsfiddle.net/3z8CN/

Answer 2

To achieve this effect using only CSS, you can utilize the adjacent sibling combinator (+).

Let's consider your HTML structure:

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

The corresponding CSS would 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;
}

Here is a Fiddle Demo showcasing this implementation: http://jsfiddle.net/3z8CN/

Answer 3

Answer №2

One way to achieve this is by using the following code:

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

You can view a live demo of this code here

By using .hover(), you are able to dynamically change the image source attribute when hovering over the link, and revert it back to the original image when the mouse leaves the link.

Answer 4

One way to achieve this is by using the following code:

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

You can view a live demo of this code here

By using .hover(), you are able to dynamically change the image source attribute when hovering over the link, and revert it back to the original image when the mouse leaves the link.

Answer 5

Answer №3

Take a look at the demonstration on the fiddle...

View the Fiddle Here

Make sure to include jQuery in your code.

--HTML--

<ul>
    <li>
        <span class='my_span'>Here is an image</span>
        <img src="http://dummyimage.com/100x100/000000/fff"/>
    </li>
    <li>
        <span class='my_span'>Here is another 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");             
    }
);

Answer 6

Take a look at the demonstration on the fiddle...

View the Fiddle Here

Make sure to include jQuery in your code.

--HTML--

<ul>
    <li>
        <span class='my_span'>Here is an image</span>
        <img src="http://dummyimage.com/100x100/000000/fff"/>
    </li>
    <li>
        <span class='my_span'>Here is another 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");             
    }
);

Switch the image source when hovering over a text menu

Answer №1

Answer №2

Answer №3

Similar questions

Maximizing the efficiency of a personalized hook that facilitates data sharing in React

Storing information upon refresh in Angular 8

Guide on keeping a footer anchored at the bottom of a webpage

Spotting the Visible Element; Detecting the Element in

Tips for setting up OpenLayers demonstrations on a personal server?

I'm not sure where to set the timeout for automatically refreshing the page

Tips for filling jstree with information in Grails

What causes the selected option to be hidden in React?

The functionality of triggers is not applicable to content that is dynamically loaded through ajax requests

Looking for a simple method to generate a text-only dropdown link in Bootstrap 4 without using a button?

Determine the height of an element in JavaScript or jQuery by using the CSS property height: 0;

The browser sends a request for a file, the server then downloads a pdf, and finally, the

What is the reason for the error that Express-handlebars is showing, stating that the engine

How can I transform a JSON object into a series of nested form fields?

When attempting to pass data to another page by clicking on a row, the result is that the data appears to be empty

Utilizing PHP, Javascript, and jQuery in mobile technology gadgets

Unable to display Apexcharts bar chart in Vue.js application

Is there a way to identify which elements are currently within the visible viewport?

When attempting to use the ResponsiveSlides plugin, the functionality of 'Image links' seems to be disabled in the Chrome browser

Resources for Vue.js stylesheets