How To: Tagging image like Facebook photo tagging

with 2 Comments

I am using external JS library “TAGGD” for tagging images. You can read more about the library using the following link https://timseverien.com/taggd/v3/.

Create simple styles for tags and tags’ hover. In such a way, tag becomes transparent rectangle with borders, but taggd library allows the use of any styles.

Then create html page with image and short script.

HTML body contains image only. Script contains basic initialization details. However, you can set, add and remove any CSS classes, CSS properties and event listeners for tags. For getting tag position you can use this service or create custom implementation.

Result:

Mouse outside tag
tagging-image-exaple-mouse-outside
Mouse inside tag
tagging-image-exaple-mouse-inside

It’s all, tagging your image is easy.

2 Responses

  1. fahim
    | Reply

    what to write under taggd path and custom style path? Mine just shows /home as I had written that path.

    • Konstantin Khisamov
      | Reply

      You need to set path for the Taggd library and a custom tags style file in your project.

Leave a Reply