How to make an image draggable in HTML?

How to create a client-side image-map in HTML5 ?

Last Updated : 20 Oct, 2020

In this article, we will create a client-side image map by using an <img> tag. The <img> tag is used to add images on a webpage. This tag is an empty tag which means it can contain only a list of attributes and it has no closing tag.

Syntax:

<img src="url" alt="some_text" usemap="#mapname">

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Define a client-side 
        image-map 
    </title> 
</head> 
  
<body> 
    <h2> 
        HTML5: How to define a 
        client-side image-map? 
    </h2> 
  
    <h4> 
        Inserted image 
        using <img> tag: 
    </h4> 
    <img src= 
"https://www.geeksforgeeks.org/wp-content/uploads/gfgLogo.png"
    alt="GeeksforGeeks logo"> 
</body> 
  
</html> 

Output:

Supported Browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

How to make an image draggable in HTML?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to Create an Image Map in HTML ?

An image map is a graphical representation that allows you to define clickable areas (or "hotspots") within an image. Each hotspot can be associated with a hyperlink, making different parts of the image interactive. Image maps are commonly used for navigation menus, interactive diagrams, and geograp

How to Create Image Maps in HTML?

Image maps in HTML5 allow you to make certain areas of an image clickable, leading users to different links or triggering specific actions. The clickable areas (also known as hotspots) are defined using the <area> tag, while the <map> tag is used to specify the map itself. What Is an Ima

How to make an image draggable in HTML?

Drag and drop is a very common and widely used feature in a modern-day website. It simply means to drag an image with the cursor and drop it to any other place. In this article, we are going to learn how to make an image draggable using HTML 5. Making any HTML5 elements including images draggable is

How to Generate Video from Images in HTML5 ?

Generating a video from images in HTML5 involves utilizing HTML, CSS, and JavaScript to dynamically create a video by stitching together a sequence of images. Additionally, the transition effects and frame rate control ensure a seamless and optimized viewing experience for the generated video. Appro

How to create an area inside an image-map using HTML?

To define clickable regions within an image map in an HTML document, use the <area> tag. This tag directs users to different links when they click on specific areas of the mapped image. It is nested within the <map> tag as a child element. In HTML, <area> is self-closing. Syntax:

How to resize an image in an HTML 5 canvas ?

The canvas element is part of HTML 5 and it allows the rendering of 2D shapes and bitmap(also called "raster") images. A canvas actually has two sizes: the size of the element. the size of the element's drawing surface. The element's width and height attributes set both the size of the element and t

How to create Image Slider in ReactJS ?

Image Slider is a dynamic web element that displays a collection of images and has a slider to switch between the Images. It is the most common feature to show image collection in web applications or mobile apps. Websites like Amazon.com, Flipkart.com, and many e-commerce sites use image sliders to

How to Insert an Image in HTML?

To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML. Table of Content Using img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary meth

How to create an image map in JavaScript ?

An image map is nothing but an image that is broken into various hotspots and each hotspot will take you to a different file. Hotspots are nothing but clickable areas which we create on an image by using the <area> tag. This type of map is called a client-side image map as the map is embedded

How to specify an image as a server-side image-map in HTML ?

In image mapping, an image is specified with certain set of coordinates inside the image which act as hyperlink areas to different destinations. It is different from an image link since in image linking, an image can be used to serve a single link or destination whereas in a mapped image, different