{"id":6117,"date":"2022-03-17T04:47:30","date_gmt":"2022-03-17T04:47:30","guid":{"rendered":"https:\/\/techpearl.com\/1645704443043\/?p=6117"},"modified":"2024-02-14T13:12:52","modified_gmt":"2024-02-14T13:12:52","slug":"how-to-create-an-image-map","status":"publish","type":"post","link":"https:\/\/techpearl.com\/1719395789229\/how-to-create-an-image-map\/","title":{"rendered":"How To Create An Image Map"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6117\" class=\"elementor elementor-6117\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-eec5d51 elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"eec5d51\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a9183fd jltma-glass-effect-no\" data-id=\"a9183fd\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-47e30cb elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"47e30cb\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-712e663 jltma-glass-effect-no\" data-id=\"712e663\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-42e8d96 jltma-glass-effect-no elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading\" data-id=\"42e8d96\" data-element_type=\"widget\" data-widget_type=\"theme-post-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/techpearl.com\/1719395789229\/how-to-create-an-image-map\/\">How To Create An Image Map<\/a><\/h1>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa1e578 elementor-author-box--align-left elementor-author-box--image-valign-top elementor-author-box--name-yes elementor-author-box--biography-yes elementor-author-box--link-no jltma-glass-effect-no elementor-widget elementor-widget-author-box\" data-id=\"fa1e578\" data-element_type=\"widget\" data-widget_type=\"author-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-author-box\">\n\t\t\t\n\t\t\t<div class=\"elementor-author-box__text\">\n\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t<h4 class=\"elementor-author-box__name\">Chandradeep Kanumalla<\/h4>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-author-box__bio\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b13766b bdt-ss-btns-view-icon bdt-ss-btns-shape-rounded bdt-ss-btns-align-left bdt-ep-grid-0 bdt-ss-btns-style-flat bdt-ss-btns-color-original jltma-glass-effect-no elementor-widget elementor-widget-bdt-social-share\" data-id=\"b13766b\" data-element_type=\"widget\" data-widget_type=\"bdt-social-share.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"bdt-social-share bdt-ep-grid\">\n\t\t\t\t\t\t\t<div class=\"bdt-social-share-item bdt-ep-grid-item\">\n\t\t\t\t\t<div class=\"bdt-ss-btn bdt-ss-linkedin\" data-social=\"linkedin\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"bdt-ss-icon\">\n\t\t\t\t\t\t\t\t<i class=\"ep-linkedin\"><\/i>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"bdt-social-share-item bdt-ep-grid-item\">\n\t\t\t\t\t<div class=\"bdt-ss-btn bdt-ss-twitter\" data-social=\"twitter\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"bdt-ss-icon\">\n\t\t\t\t\t\t\t\t<i class=\"ep-twitter\"><\/i>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"bdt-social-share-item bdt-ep-grid-item\">\n\t\t\t\t\t<div class=\"bdt-ss-btn bdt-ss-facebook\" data-social=\"facebook\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"bdt-ss-icon\">\n\t\t\t\t\t\t\t\t<i class=\"ep-facebook\"><\/i>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-baf1ea0 elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"baf1ea0\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-070c6da jltma-glass-effect-no\" data-id=\"070c6da\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e4a76cb jltma-glass-effect-no elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image\" data-id=\"e4a76cb\" data-element_type=\"widget\" data-widget_type=\"theme-post-featured-image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1152\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/How-To-Create-An-Image-Map-2048x1152-1.jpg\" class=\"attachment-full size-full\" alt=\"How To Create An Image Map\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/How-To-Create-An-Image-Map-2048x1152-1.jpg 2048w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/How-To-Create-An-Image-Map-2048x1152-1-300x169.jpg 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/How-To-Create-An-Image-Map-2048x1152-1-1024x576.jpg 1024w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/How-To-Create-An-Image-Map-2048x1152-1-768x432.jpg 768w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/How-To-Create-An-Image-Map-2048x1152-1-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-b586ca4 elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"b586ca4\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2ee971b jltma-glass-effect-no\" data-id=\"2ee971b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8e68be2 jltma-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"8e68be2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What is an imagemap?<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ed88a1 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"3ed88a1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The objective of this blog is to provide an overview on how to create an image map, one composed specifically of the polygon shape. Image maps are defined in terms of clickable areas that allow for user interaction. We used polygons as the shape as they provide us with the most versatility in terms of defining the image area. Further we look at how to define this map in static and dynamic terms and which is the most viable approach.<br \/>Put simply, an image map is an image with clickable areas.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cee27ee jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"cee27ee\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The idea behind an image map is that you should be able to perform different actions depending on where you click in the image.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54a9666 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"54a9666\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Critical components &lt; Img&gt; specifies the location of the image to be included in the map.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a4851d jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"2a4851d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The name attribute of the &lt; map&gt; element is associated with the usemap attribute of the &lt; img&gt; element. This creates a relationship between the image and the map.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bec833 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"0bec833\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The &lt; map&gt; element contains &lt; area&gt; elements that defines the clickable areas in the image map.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-181e35f elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"181e35f\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bcd9cd3 jltma-glass-effect-no\" data-id=\"bcd9cd3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a7b6140 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"a7b6140\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"243\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code1-1024x243.png\" class=\"attachment-large size-large\" alt=\"code1\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code1-1024x243.png 1024w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code1-300x71.png 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code1-768x182.png 768w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code1.png 1390w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a1866a jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"3a1866a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Understanding the code<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c27764 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"6c27764\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li>&lt; img src&gt; retrieves the image file<\/li><li>defines the relationship between the map and image in terms of areas and coordinates<\/li><li>&lt; map name&gt; defines the name associated with the map<\/li><li>&lt; area href&gt; specifies a targeted link associated with clickable area components<\/li><li>&lt; target=&#8221;&#8221; shape=&#8221;poly &gt; defines the shape of the area of the map in terms of clickable of a series of x,y coordinates, aka polygon. Other shapes include circle and rectangles<\/li><li>&lt; title&gt; specifies the names of the clickable areas that are viewable in the browser<\/li><li>&lt; coords&gt; helps define the shape and size of the clickable areas of the image map. We draw the coordinate data from a suitable map generator<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-5ec4f6d elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"5ec4f6d\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f05a42e jltma-glass-effect-no\" data-id=\"f05a42e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-692b110 jltma-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"692b110\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Example:<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2044c16 elementor-aspect-ratio-219 jltma-glass-effect-no elementor-widget elementor-widget-video\" data-id=\"2044c16\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;aspect_ratio&quot;:&quot;219&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-fit-aspect-ratio elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/Mapped_Area-2.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d4c46d jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"1d4c46d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>When the scenario lends itself such that we can define the image and the definition of imagemap statically as part of the HTML definition, then the imagemap would work fine even when we resize \/ zoom in on the image, etc., it shouldn\u2019t cause any issues. Let us consider this scenario as a static definition scenario.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aee4949 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"aee4949\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>However, there are circumstances when the image would alter itself during runtime and the imagemap coordinates has to be defined during this period. This is where DOM comes into play. DOM stands for Document Object Model. DOM is a programming language interface, which provides the JavaScript language a notion of what web pages, HTML documents, XML documents, and their component parts (e.g., elements) represent. It acts an intermediary of sorts. The area elements are dynamically added to the DOM node. In such a scenario, though the rendered imagemap click events would work fine, when you resize of the browser or perform a zoom operation, then the imagemap would no longer work because the coordinates would need to be redefined.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca110ce jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"ca110ce\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>To address this issue, one can consider using the following approach:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ac1c34 jltma-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"7ac1c34\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Dynamic definition<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37e72be jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"37e72be\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\tOur agenda is to create a function which will calculate coordinates based on our image size. The approach used is to calculate the coordinates for the new width in relation to the coordinates calculated for the original width.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3042099 jltma-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"3042099\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Approach<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-681e0d2 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"681e0d2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Most of the time the original width and rendered width of Image would be different, rendered width is dependent on our device \/ window size.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e880967 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"e880967\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"text-decoration: underline;\">Functions needed<\/span><br \/>let originalWiidth = document.getElementById(\u2018image\u2019).naturalWidth;<br \/>let renderedWiidth = document.getElementById(\u2018image\u2019).renderedWidth;<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2951566 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"2951566\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"text-decoration: underline;\">High level explanation<\/span><br \/>Let us create a function which will recalculate coordinates based on the rendered size.<br \/>All the coordinates of all the areas are recalculated<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-36d5ce4 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"36d5ce4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"text-decoration: underline;\">Sample pseudo-code<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a633b66 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"a633b66\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code2-1024x557.png\" class=\"attachment-large size-large\" alt=\"code2\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code2-1024x557.png 1024w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code2-300x163.png 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code2-768x418.png 768w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code2.png 1128w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea7676a jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"ea7676a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Breaking it down<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7363a8a jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"7363a8a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li>&lt; calculateCoordinates&gt; defines the coordinates in relation to the parameters of the function specified earlier<\/li><li>&lt; ratio&gt; assigns the value of the ratio that helps determine the zoom level<\/li><li>&lt; for&gt; the for loop helps set the parameters of the manipulation of the image map. \u2018i\u2019 and \u2018j\u2019 are variables we create<\/li><li>&lt; var area&gt; defines the coordinates<\/li><li>&lt; area.setAttribute&gt; assigns a dynamic link to the attribute<\/li><li>area.setAttribute(\u201ccoords\u201d, coordinates.toString()); here we convert the coordinates to the string as that\u2019s the compatible format<\/li><li>document.getElementById(\u201cmapping\u201d).appendChild(area); this essentially assigns the map data to the coordinates. appendChild represents the last node of the parent node<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-984f55c jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"984f55c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"text-decoration: underline;\">When do we invoke it?<\/span><br \/>When to call this function calculateCoordinates()?<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-966f825 jltma-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"966f825\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">1. Whenever there is change in window size<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5f8f69 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"e5f8f69\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"574\" height=\"128\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code3.png\" class=\"attachment-large size-large\" alt=\"code3\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code3.png 574w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code3-300x67.png 300w\" sizes=\"auto, (max-width: 574px) 100vw, 574px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c15365 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"5c15365\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t&lt; window.onresize&gt; determines when the resize event happens\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c1fc34 jltma-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"9c1fc34\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">2. Whenever zoom in (+) and zoom out (-) the image\n<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf271c3 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"bf271c3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"847\" height=\"501\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/zoom.png\" class=\"attachment-large size-large\" alt=\"zoom\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/zoom.png 847w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/zoom-300x177.png 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/zoom-768x454.png 768w\" sizes=\"auto, (max-width: 847px) 100vw, 847px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cac6723 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"cac6723\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\tLet us consider the initial zoomValue is 100 and x be the increment that we want to do for every + \/ -. Let x be 25\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ea5ad9 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"8ea5ad9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"377\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code4-1024x377.png\" class=\"attachment-large size-large\" alt=\"code4\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code4-1024x377.png 1024w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code4-300x111.png 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code4-768x283.png 768w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code4.png 1362w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c83a2da jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"c83a2da\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\tThe calculateCoordinates should be appropriately modified to accommodate the Zoom Level.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f210301 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"f210301\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"547\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code5-1024x547.png\" class=\"attachment-large size-large\" alt=\"code5\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code5-1024x547.png 1024w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code5-300x160.png 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code5-768x411.png 768w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2022\/03\/code5.png 1130w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e4714e jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"4e4714e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"text-decoration: underline;\">Breaking down the code<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5737c0 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"c5737c0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Using if and else loops, the relative zoom levels are calculated in case of user manipulation, which is assumed to be in increments or decrements of 25. The rendered width is calculated in accordance with our determined ratio. The rest of the functions are described in the earlier sections and essentially boil down to assigning a dynamic link using href, and assigning coordinated to the map in accordance with the polygon shape.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ceb35f jltma-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"9ceb35f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Closing thoughts<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-221fb3a jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"221fb3a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\tWhile image maps are not as popular as they used to be, they still have their use, primarily as a way to display a complex set of links. The days of using them for navigation menus have more or less passed. We chose to define our map with polygons as they provide the most versatile way of defining map areas as compared to circles and rectangles. Image maps require use of JavaScript, HTML and the DOM, thus providing a rich experience for users and an interesting concept for developers.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>What is an imagemap? The objective of this blog is to provide an overview on how to create an image map, one composed specifically of the polygon shape. Image maps are defined in terms of clickable areas that allow for user interaction. We used polygons as the shape as they provide us with the most &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/techpearl.com\/1719395789229\/how-to-create-an-image-map\/\"> <span class=\"screen-reader-text\">How To Create An Image Map<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":11,"featured_media":10936,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[63,24,21,23],"tags":[34,35,36],"class_list":["post-6117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-serverless","category-software-development","category-web-development","tag-html-image-maps","tag-image-map-example","tag-web-development"],"_links":{"self":[{"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/posts\/6117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/comments?post=6117"}],"version-history":[{"count":257,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/posts\/6117\/revisions"}],"predecessor-version":[{"id":15670,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/posts\/6117\/revisions\/15670"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/media\/10936"}],"wp:attachment":[{"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/media?parent=6117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/categories?post=6117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/tags?post=6117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}