Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

part 1: images Please follow these steps: 1- You should create an html file that

ID: 3667348 • Letter: P

Question

part 1: images Please follow these steps:

1- You should create an html file that displays the image above in the browser.

2- When the image is displayed, clicking on different parts of the image will have the results: - On the hat, the browser will open: http://www.villagehatshop.com/ - On the eye glasses, the browser will open: http://www.glassesshop.com/ - On the mouth, the browser will open: http://www.colgatetotal.com/home - On the bottom part of Jackson’s shirt, the browser will open: http://www.columbia.com/shirts-men/

1- For part 1, you need to use the image map tag. Please look for resources about this on the internet.

2- You will use the circle, rect, and polygon parts in the image map.

Explanation / Answer

I don't have the image source but it can be done with map html attributes. I have done this conisdering a local image. You need to adjust the coordinates of the rectangel and circle based on your requirements.

working html code:

<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="img.jpg" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="hat" href="http://www.villagehatshop.com">
<area shape="circle" coords="90,58,3" alt="eye" href="http://www.glassesshop.com">
<area shape="circle" coords="124,58,8" alt="mouth" href="http://www.glassesshop.com">
<area shape="circle" coords="65,58,8" alt="bottom" href="http://www.columbia.com/shirts-men/">
</map>

</body>
</html>