Scribd
Upload
2 views

Image Mapping HTML

The document provides HTML code for an image mapping demo featuring an image with clickable areas leading to different pages: CPU, Monitor, and Mouse. Each area is defined with specific coordinates and shapes, linking to corresponding HTML pages that display a simple greeting. The pages are styled with a light blue background.

Uploaded by

Anjali Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Image Mapping HTML

The document provides HTML code for an image mapping demo featuring an image with clickable areas leading to different pages: CPU, Monitor, and Mouse. Each area is defined with specific coordinates and shapes, linking to corresponding HTML pages that display a simple greeting. The pages are styled with a light blue background.

Uploaded by

Anjali Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Image mapping html

Code:
<!DOCTYPE html>
<html>
<head><title>Image mapping Demo</title>
</head>
<body><h1>This is image mapping!!</h1>
<img src="computer.jpeg" usemap="#Mymap">
<map name="Mymap">
<area shape="rect" coords="121,43,285,189" href="Monitor.html">
<area shape="circle" coords="391,218,50" href="Mouse.html">
<area shape="poly" coords="16,80,17,207,43,232,109,76" href="Cpu.html">
</map></body>
</html>

CPU PAGE
Code:
<!doctype html>
<html>
<head>
<title>CPU</title></head>
<body bgcolor="lightblue">
<h1>Hello,<br>THIS IS CPU PAGE....! </H1>
</body>
</html>
Output:

MONITOR PAGE
Code:
<!doctype html>
<html>
<head>
<title>Monitor</title></head>
<body bgcolor="lightblue">
<h1>Hello,<br>THIS IS MONITOR PAGE....! </H1>
</body>
</html>
Output:

MOUSE PAGE
Code:
<!doctype html>
<html>
<head>
<title>MOUSE</title></head>
<body bgcolor="lightblue">
<h1>Hello,<br>THIS IS MOUSE PAGE....! </H1>
</body>
</html>
Output:

You might also like