1 (edited by 2014-03-16 19:09:51)

Topic: HTML Mouse over link changes image?

I am making a website and i want an image to change when i hover over a link.

I have Image A and Image B which are layered on top of each other and i also have a link above it.

When i hover over Image A i want Image B to appear in its place. Does anyone have any idea how i could achieve this?

</head>

<body onload="MM_preloadImages('green.jpg')">

www.facebook.com
</body>
</html>

Here you can see the code i have at the moment,

When i hover over Image A it changes to Image B.

But i do not have the part of the code that when i hover over a link, Image A changes to Image B.

Many Thanks
____________________
choose direct hot tubs

2 (edited by Richard925 2019-09-17 05:25:32)

Re: HTML Mouse over link changes image?

You need to create hover effect and use show hide option to replace images.

-------------------------------------------------------------------------------------
showbox

3 (edited by albertareed 2020-11-10 04:21:54)

Re: HTML Mouse over link changes image?

You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.

Let's try out the following example to understand how it basically works:
<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">My Name is John</div>
</div> myaarpmedicare

4 (edited by oliveadams1999 2020-11-23 11:50:39)

Re: HTML Mouse over link changes image?

Thanks for the update and quick reply. I'll be sure to keep an eye on this thread.
mypascoconnect