Multiple Rollover Effect on Same Image

• 

  wboymedia · Member · Jun 21, 2017 at 2:05 pm

  • Copy link
  • Add topic to favorites

  I have a client that owns an insulation business wanting a website. He wants the main page to be a photo of a house cut in half (I would call it the dollhouse view). He wants the user to be able to rollover different parts of the home (attic, basement, kitchen) to get a brief description about insulation for the room and also be able to click and go to a separate page.

  So multiple rollover effects on the same image. GO. oh and thanks!

• 

  terrybrownell · Member · Jun 21, 2017 at 8:26 pm

  • Copy link

  Hello!

  This is known as Image Mapping. Check out this site.

  Hope that helps!

• 

  wboymedia · Member · Jun 22, 2017 at 2:46 pm

  • Copy link

  Thanks joerepublic. This is exactly what I am looking for. So being a newbie…. I need to map the image the way I want and then get the HTML for wordpress? Is that the best way to get it to wordpress? And what about rollover effect?

• 

  terrybrownell · Member · Jun 22, 2017 at 4:32 pm

  • Copy link

  Hi!

  Yes. It’s HTML markup. Here’s an example;

  <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
  
  <map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
  </map>

  ‘href=’ is the action. In this case it’s a URL link, but any action could be used.

  There’s a number of resources online.. this one comes from W3C Schools.

  Happy mapping!

• 

  justjennifer · Member · Jun 22, 2017 at 4:53 pm

  • Copy link

  @wboymedia Depending on whether your client’s site is hosted here on WordPressdotcom or on a self-hosted site using the WordPress.org software, you may have different options.

  Please provide us with the URL of the site you need help with,