Skip to content

Instantly share code, notes, and snippets.

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

Embed
What would you like to do?
<!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>
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.