Search code examples
javascripthtmlimageonclickarea

Onclick that displays the text when you click area on the image

I have problem on my site. I trying to do onclick on area, when I click area on image I want to show image and text. This is an example of what I mean:

This is what I have created so far:


 <div class="interior" style="padding-left: 243px;">
 <img src="Pres7.png" usemap="#intr">
  <map name="intr">
   <area class="speedo" shape="circle" onclick="" coords="342,126,19" href="">
   <area class="screen" shape="circle" onclick="" coords="518,179,17" href="">
   <area class="light" shape="circle" onclick="" coords="730,229,17" href="">
   <area class="swheel" shape="circle" onclick="" coords="345,259,17" href="">
 </map>
</div>

It should display a different image and text so from what I guess needs to create 4 functions.

I tried to do it because there are several examples on the Internet, but when I assigned the variables, it didn't work.

While I could manage with creating text and images by onclick, I don't know how to do it on the area.

Solution

  • There is the CSS property called 'display', each HTML element has it's own default value for that propety (most of them are 'block's, which means they cover the entire X axie), but one of the values you can give for that display property is 'none' which mean it's hidden, you can use javascript to toggle it between "none" (hidden) and the value you want for it.

    See here for example: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp