KacT9H/page.html

## page.html
<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  %{--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"/>
</head>

<body>
<div class="taggd-wrapper">
  <img src="images/images.jpg" id="image">
</div>
<script>
  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
    yodaTag.buttonElement.style.height = yodaTagData.height.toString() + "%";
    yodaTag.buttonElement.style.width = yodaTagData.width.toString() + "%";

    //Set custom events
    yodaTag.buttonElement.addEventListener('mouseenter', function () {
      yodaTag.buttonElement.style.opacity = 0.9;
      yodaTag.show()
    });
    yodaTag.buttonElement.addEventListener('mouseleave', function () {
      yodaTag.buttonElement.style.opacity = 0.2;
      yodaTag.hide()
    });
    yodaTag.buttonElement.addEventListener('click', function () {
      window.open("https://en.wikipedia.org/wiki/Yoda");
    });

    //init Taggd
    var taggd = new Taggd(image, options, [yodaTag]);
  });
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Test</title>
	%{--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"/>
	</head>

	<body>
	<div class="taggd-wrapper">
	<img src="images/images.jpg" id="image">
	</div>
	<script>
	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
	yodaTag.buttonElement.style.height = yodaTagData.height.toString() + "%";
	yodaTag.buttonElement.style.width = yodaTagData.width.toString() + "%";

	//Set custom events
	yodaTag.buttonElement.addEventListener('mouseenter', function () {
	yodaTag.buttonElement.style.opacity = 0.9;
	yodaTag.show()
	});
	yodaTag.buttonElement.addEventListener('mouseleave', function () {
	yodaTag.buttonElement.style.opacity = 0.2;
	yodaTag.hide()
	});
	yodaTag.buttonElement.addEventListener('click', function () {
	window.open("https://en.wikipedia.org/wiki/Yoda");
	});

	//init Taggd
	var taggd = new Taggd(image, options, [yodaTag]);
	});
	</script>
	</body>
	</html>