Brian Su Brian Su - 2 months ago 18
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!


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.

.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');


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