8770447379 | Info@paramclasses.in
Paramclasses Academy - Blog

Blog

Home / Tutorials

Tutorials Details

How to Add Clickable Areas on Images Using Image Maps

How to Add Clickable Areas on Images Using Image Maps

October 18, 2024

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Insertion and Styling</title>
    <style>
        .image-container {
            text-align: center;  /* Centers the image horizontally */
            background-color: #f0f0f0; /* Light gray background */
            padding: 20px;
            border: 2px solid #ddd; /* Adding a border around the container */
        }
        .highlight {
            color: red;
            font-weight: bold;
        }
        .img-span {
            border: 2px solid blue; /* Adding a blue border around the image */
            display: inline-block;
            padding: 5px; /* Adds space between image and border */
        }
    </style>
</head>
<body>

    <h2>Welcome to My Photo Gallery</h2>
    
    <!-- Image inside a centered and styled div -->
    <div class="image-container">
        <p>Here's an amazing picture of a <span class="highlight">beautiful scenery</span>:</p>
        
        <!-- Adding image map to the first image -->
        <span class="img-span">
            <img src="img/scenery.jpg" alt="A beautiful scenery" width="400" height="300" usemap="#scenerymap">
            <map name="scenerymap">
                <!-- Defines a clickable area shaped like a rectangle -->
                <area shape="rect" coords="50,50,150,150" href="https://en.wikipedia.org/wiki/Nature" alt="Nature Info" title="Learn about Nature">
                
                <!-- Defines a circular clickable area -->
                <area shape="circle" coords="200,150,50" href="https://unsplash.com/s/photos/scenery" alt="Beautiful Scenery" title="Explore Scenery Images">
                
                <!-- Defines a polygon-shaped clickable area -->
                <area shape="poly" coords="300,50,350,100,300,150" href="https://pixabay.com/photos/nature-sky-clouds-tree-sun-3294645/" alt="Sky and Nature" title="Explore Sky and Nature Images">
            </map>
        </span>
        
        <!-- Second image with image map -->
        <span class="img-span">
            <img src="img/girl.jpg" alt="A beautiful girl" width="400" height="300" usemap="#girlmap">
            <map name="girlmap">
                <!-- Rectangular clickable area for face -->
                <area shape="rect" coords="120,50,220,150" href="https://www.pexels.com/search/face/" alt="Girl's Face" title="Explore Face Images">
                
                <!-- Circular clickable area for hat/flower -->
                <area shape="circle" coords="300,100,50" href="https://www.pexels.com/search/hat/" alt="Hat or Flower" title="Explore Fashion Accessories">
                
                <!-- Polygon clickable area for dress -->
                <area shape="poly" coords="100,200,150,250,200,250,250,200,150,180" href="https://pixabay.com/images/search/fashion/" alt="Girl's Dress" title="Explore Fashion Styles">
            </map>
        </span>
    </div>

</body>
</html>

Inserting and Styling Images with Image Maps in HTML

This HTML document demonstrates how to insert and style images using CSS while making specific parts of the images clickable with image maps. Below is a detailed breakdown of each section:

1. HTML Structure

  • The document starts with a basic HTML5 structure. It includes a <head> section for metadata and CSS, and a <body> section for content.

  • Inside the <body>, the document displays two images, each enclosed within a <div> for styling. Each image has an associated image map that defines clickable regions within the image.

2. CSS Styling

  • The CSS styles applied within the <style> tag help enhance the appearance of the images and the container they are placed in:
    • .image-container: This class centers the content horizontally, adds padding and a light gray background, and surrounds the container with a light border.
    • .highlight: This class styles certain text (like "beautiful scenery") with red color and bold font.
    • .img-span: Each image is wrapped in a span with a blue border and padding to create some space between the image and the border.

3. Inserting Images

  • Two images (scenery.jpg and girl.jpg) are displayed in the document:
    • The <img> tag is used to insert the images, and the usemap attribute links each image to its respective image map (using #scenerymap and #girlmap).

4. Image Maps

  • Image maps allow specific areas of an image to be clickable, redirecting the user to different links.

For the Image

  • Rectangle Area: A rectangular region on the image is made clickable, directing users to learn more about the image
  • Circle Area: A circular area is clickable
  • Polygon Area: A polygon-shaped region

5. Key Takeaways

You can add your own internal pages in place of external links within an image map. Instead of linking to external websites, you can link to pages like "About Us," "Services," or any other page on your website. Just use relative URLs (like /about.html or /services.html) in the href attribute of the image map areas. This way, when users click on different parts of the image, they'll be taken to specific pages on your site.

This code demonstrates how to combine HTML, CSS, and image maps to create an engaging and interactive image gallery.

Categories

Recent post

How to Use the Ternary Operator in JavaScript: Tutorial with Code Example
December 19, 2024
How to Use the Ternary Operator in JavaScript: Tutorial with Code Example
JavaScript switch Statement Simplified: A Beginner’s Guide with Code Examples
December 18, 2024
JavaScript switch Statement Simplified: A Beginner’s Guide with Code Examples
JavaScript if, if...else, and else Explained with Real-Life Examples
December 18, 2024
JavaScript if, if...else, and else Explained with Real-Life Examples
Exploring JavaScript Data Types: Strings, Numbers, Booleans, and More.
December 17, 2024
Exploring JavaScript Data Types: Strings, Numbers, Booleans, and More.
JavaScript Tutorial for Beginners: Learn Basics
December 5, 2024
JavaScript Tutorial for Beginners: Learn Basics
Build an Interactive FAQ Section Without JavaScript – HTML & CSS Guide
November 7, 2024
Build an Interactive FAQ Section Without JavaScript – HTML & CSS Guide

Get In Touch

Paramwebinfo,Raja talab Pandri, Raipur,Chhattisgarh India

8770447379

Info@paramclasses.in

Quick Links

Home About Course Our Gallery Contact Us Terms & Conditions Privacy Policy

Explore More

Placement Registration Enquiry Login Registration sitemap

Recent post

How to Use the Ternary Operator in JavaScript: Tutorial with Code Example
JavaScript switch Statement Simplified: A Beginner’s Guide with Code Examples
JavaScript if, if...else, and else Explained with Real-Life Examples
Exploring JavaScript Data Types: Strings, Numbers, Booleans, and More.
JavaScript Tutorial for Beginners: Learn Basics
Build an Interactive FAQ Section Without JavaScript – HTML & CSS Guide

Copyright © Paramwebinfo Academy.All Rights Reserved

Designed by PARAMWEBINFO