Html-learning-stage/mapping.html at main · RaySpot1/Html-learning-stage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<body>

<h2>Image maps</h2>
<p>Click on the computer to go to a new page and read more about the topic</p>

<img src="workspace.jpeg" alt="Workplace" usemap="#image_map" width="500" height="350">

<map name="image_map">
    <area title="Laptop" shape="rect" coords="134,69,307,199" href="http://www.dell.com" alt="computer"
    target="_blank">
    <area title="Flower" shape="circle" coords="432,96,52" href="http://www.proflowers.com" alt="flower"
    target="_blank">
    <area title="Phone" shape="rect" coords="117,209,141,266" href="http://www.apple.com" alt="Phone"
    target="_blank">
    <area title="Mug" shape="circle" coords="96,106,23" href="http://www.fnp.com" alt="Phone" target="_blank">
    <area title="Headphone" shape="circle" coords="59,177,43" href="http://www.beatsbydre.com alt="Headphone"
    target="_blank">
    <area title="Camera" shape="rect" coords="359,173,457,245" href="http://www.adorama.com" alt="Camera"
    target="_blank">
    <area title="Mouse" shape="rect" coords="289,241,344,287" href="http://www.logitech.com" alt="Mouse"
    target="_blank">
    <area title="Sanitizer" shape="rect" coords="348,125,379,156" href="http://www.purell.com" alt="Sanitizer"
    target="_blank">
</map>
<head>

<p>This is a full details of a workplace. You can point and click on any item<br>
on the picture above to get more information about them.</p>

</head>
</body>
</html>
<!--I think i am good at front end programming cause i love designing-->