Brian Su Brian Su - 7 days ago 6
HTML Question

change on mouseover, make the main.jpg

Is it possible to make the main.jpg change to specific img when hovering so that it would be like...


  • onmousehover #1 --> changeto.. main1.jpg

  • onmousehover #2 --> changeto.. main2.jpg

  • onmousehover #3 --> changeto.. main3.jpg



This is... what it looks like...




enter image description here




Let me know how I should tackle this... thanks!

Answer

you need to give your a tags classes like this

<a class="a-1 main">

so that we can access them with an aditional style tag, in this we define what happens when you hover this elements.

<style>
.main {
  background-image: url('main.png');
}
.a-1:hover {
  background-image: url('main1.png');
}
.a-2:hover {
  background-image: url('main2.png');
}
.a-3:hover {
  background-image: url('main3.png');
}
</style>

EDIT

If you have to use tags you could only do this with javascript. I recommend using css backgrounds.

Comments