|
|
The This can be used to create any shape. Like maybe a croissant shape! How can we make the croissant in the image below become a clickable link? |
Output should be:
We have to find the x and y coordinates for all edges of the croissant:
Output should be:
The coordinates come in pairs, one for the x-axis and one for the y-axis:
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the croissant to go to a new page and read more about the topic:</p>
<img src="https://www.w3schools.com/html/frenchfood.jpg" alt="French Food" usemap="#foodmap" width="450" height="675">
<map name="foodmap">
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" alt="Croissant" href="croissant.htm">
</map>
</body>
</html>
Output should be:
This is the area that becomes clickable and will send the user to the page "croissant.htm":
Output should be:
| What is HTML Image Maps | HTML Image Maps |
| How Does it HTML Image Maps? | HTML Image Maps |
| How to create HTML Image Map | HTML Image Maps |
| How to create HTML Image Imap Shape="circle" | HTML Image Maps |
| How to create HTML Image Map Shape="poly" | HTML Image Maps |
| How to create HTML Image Map and JavaScript | HTML Image Maps |
Read Full: | HTML Image Maps |
Category: | Web Tutorial |
Sub Category: | HTML Image Maps |
Uploaded: | 1 year ago |
Uploaded by: | Admin |
Views: | 58 |
Reffered: https://www.w3schools.com/html/html_images_imagemap.asp