Skip to content

Instantly share code, notes, and snippets.

@KacT9H KacT9H/page.html
Last active Nov 22, 2016

What would you like to do?
<!DOCTYPE html>
%{--taggd path--}%
<link rel="stylesheet" href="your path/taggd-master/dist/taggd.css"/>
<script src="your path/taggd-master/dist/taggd.js"></script>
%{--custom styles path--}%
<link rel="stylesheet" href="your path/test.css"/>
<div class="taggd-wrapper">
<img src="images/images.jpg" id="image">
document.addEventListener("DOMContentLoaded", function (event) {
var image = document.getElementById('image');
//Remove default event
var options = {show: '', hide: ''};
var yodaTagData = {
position: {"x": 0.65, "y": 0.23},
text: "Yoda", //hover text
button: {id: "yoda-button", class: "taggd-button"},
hover: {id: "yoda-hover", class: "taggd-hover"},
height: 27, //border height in percentages from image size
width: 20 //border width in percentages from image size
//create tag object
var yodaTag = new Taggd.Tag(yodaTagData.position, yodaTagData.text, yodaTagData.button, yodaTagData.hover);
//Set tag height/width = yodaTagData.height.toString() + "%"; = yodaTagData.width.toString() + "%";
//Set custom events
yodaTag.buttonElement.addEventListener('mouseenter', function () { = 0.9;
yodaTag.buttonElement.addEventListener('mouseleave', function () { = 0.2;
yodaTag.buttonElement.addEventListener('click', function () {"");
//init Taggd
var taggd = new Taggd(image, options, [yodaTag]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.