0

I am building a responsive site with WordPress and I need to make an interactive diagram with 3 hotspots: each of the 3 icons in the corners of the triangle here will be a different hotspot...

When the blue is rolled over, blue arrows & text will appear, partly obscuring other parts of the triangle - as seen here. Likewise, when the green is rolled over, green arrows & text are shown. And finally, when the pink is rolled over, pink arrows & text are shown.

I have never tried CSS sprites before but I understand that they're better than the old javascript onMouseOut / onMouseOver method. Can anyone please advise me how I may best go about making this interactive diagram? I'm not very sophisticated at coding. Any assistance would be greatly appreciated.

Thanks!

user2525922
  • 3
  • 1

1 Answers1

0

With CSS you can use the :hover pseudo-class to display something on rollover - no JS needed!

#main div div {
    display: none;
}

#main div:hover div {
    display: block;
}

See this fiddle.

Russell Zahniser
  • 16,188
  • 39
  • 30
  • Russell, thank you so much for your reply. I really appreciate it. I had a go at editing that fiddle but am still a little stuck... I need the base image to show in full and only be obscured by a rollover image when one of the 3 hotspots are rolled over. The 4 layers of images I have are all the exact same size. If you look at that same link, you'll see what I have done. Thanks again for the help! – user2525922 Jun 27 '13 at 08:32
  • OK, how about [this](http://jsfiddle.net/LpxmL/2/)? It uses sibling selectors instead, to swap in different background images in a single background div. – Russell Zahniser Jun 27 '13 at 13:53
  • Thanks Russell, you're a star! That is great. Exactly what I need. Delighted! – user2525922 Jun 27 '13 at 17:24