How To: Tagging image like Facebook photo tagging

with No 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
xtagging-image-exaple-mouse-outside.png.pagespeed.ic.Hz6fqO1-Kx.jpg
Mouse inside tag
tagging-image-exaple-mouse-inside
It’s all, tagging your image is easy.

Leave a Reply