Instructions to make maphilight in 10 minutes

Tram Ho

  • Images on your web pages will be more interesting when users can interact with them. In this post, I will show you how to make images more interesting using jQuery maphilight.
  • jQuery maphilight is an open source jQuery plugin that activates an HTML image map. We will also show you how to use some of jQuery maphilight’s nifty features, including customizable tool tips that highlight the image.

Image Maps

  • Image Maps is an HTML <map> element that contains a list of coordinates (x, y, z) from an image grouped together in the <area> tags.
  • How do we get these coordinates? Well, a quick way to get coordinates to create your own image maps is by using a free image mapping web tool. I use this
  • All you have to do is upload the image and select the desired area. The coordinates are then automatically generated for each automatically selected area. Please select an image to upload.
  • We can start by uploading the image to https://www.image-map.net/ and creating image maps. We should outline the area by clicking on each area like the Pen button in photoshop, because we want to highlight the image of the bear’s nose eyes in the image below.

  • Upload Photos then we select in the select box and select popy then outline as this image

  • After sketching, we click on the button show me the code will show the html code we need

Use jQuery maphilight

  • You install using the command: npm i maphilight or download at this link to use the code below

  • We can call maphilight by calling the function $ (# image-map ‘). Maphilight (options) in the script block. We can target a specific area of ​​the image by using the id of each <area> as the key. This code needs to be embedded between the <script> tags. This is my JavaScript part.

  • You can customize the color, border …. to your liking

Demo is below:

Conclude

  • I have finally done my demo! maphilight also offers many functional demos, great documentation, and instructions on how to do some handy tricks and techniques at the link here https://davidlynch.org/projects/maphilight/docs/#options . Hopefully the article will make you understand and use maphightlight for future projects. Remember, don’t just settle for still images, make them interact with each other.
Share the news now

Source : Viblo