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

  • Registered: 2014-03-15
  • Posts: 1

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 Reply by Richard925 (edited by Richard925 2019-09-17 05:25:32)

  • Registered: 2019-09-16
  • Posts: 1

Re: HTML Mouse over link changes image?

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

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

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

  • Registered: 2020-11-09
  • Posts: 1

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 Reply by oliveadams1999 (edited by oliveadams1999 2020-11-23 11:50:39)

  • Registered: 2020-11-19
  • Posts: 1

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