Play with image annotation.

11 years ago · 710b009859
parent f2e983db25
commit 710b009859
4 changed files with 199 additions and 0 deletions
--- a/sandbox/annotate.html
+++ b/sandbox/annotate.html
@ -0,0 +1,74 @@
+<html>
+<head>
+<style>
+.annotated{
+  position:relative;
+}
+.annotated img{ /* Set this to stop white-space appearing under the image. */
+  display:block;
+}
+.annotated b{ /* Hide the figcaption’s title. */
+  position:absolute;
+  left:-99999px;
+}
+.annotated ul{ /* Set up the canvas for the annotations to sit on. */
+  list-style:none;
+  position:absolute; 
+  top:0;
+  right:0;
+  bottom:0;
+  left:0;
+}
+.annotated li{
+  display:block;
+  padding:0 5px;
+
+  width:auto;
+  line-height: 12px;
+  position:absolute;
+
+  font: 10px 'Open Sans';
+
+
+
+  white-space:nowrap; /* Stop the annotations breaking onto several lines. */
+  cursor:default;
+  background:#fff;
+  background:rgba(255,255,255,0.75);
+
+  -webkit-box-shadow:0 0 5px rgba(0,0,0,0.25);
+     -moz-box-shadow:0 0 5px rgba(0,0,0,0.25);
+          box-shadow:0 0 5px rgba(0,0,0,0.25);
+}
+</style>
+
+<link rel='stylesheet' href='tooltips.css'>
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
+<!--[if !IE | (gt IE 8)]><!-->
+<script src="tooltips.js"></script>
+<script>
+    $(function() {
+        $("figure.annotated figcaption ul li").tooltips();
+    });
+</script>
+<!--<![endif]-->
+
+</head>
+<body>
+    <figure class="annotated">
+        <img src="spa504g-front.jpg" alt="Cisco SPA504g" />
+        <figcaption>
+	        <b>Line/Key Selection:</b>
+            <ul>
+                <li style="top:55px; left:495px;">test1@example.org</li>
+                <li style="top:72px; left:495px;">test2@example.org</li>
+                <li style="top:89px; left:495px;">test3@example.org</li>
+                <li style="top:105px; left:495px;">test4@example.org</li>
+            </ul>
+	        <i><a href="#">Cisco SPA504G</a></i>
+      </figcaption>
+    </figure>
+</body>
+</html>
+<!-- vim: set tabstop=4 syntax=html expandtab: -->
--- a/sandbox/spa504g-front.jpg
+++ b/sandbox/spa504g-front.jpg
--- a/sandbox/tooltips.css
+++ b/sandbox/tooltips.css
@ -0,0 +1,60 @@
+.tooltip, .arrow:after {
+  background: black;
+  border: 2px solid white;
+}
+
+.tooltip {
+  pointer-events: none;
+  opacity: 0;
+  display: inline-block;
+  position: absolute;
+  padding: 10px 20px;
+  color: white;
+  border-radius: 20px;
+  margin-top: 20px;
+  text-align: center;
+  font: bold 14px "Helvetica Neue", Sans-Serif;
+  font-stretch: condensed;
+  text-decoration: none;
+  text-transform: uppercase;
+  box-shadow: 0 0 7px black;
+}
+.arrow {
+  width: 70px;
+  height: 16px;
+  overflow: hidden;
+  position: absolute;
+  left: 50%;
+  margin-left: -35px;
+  bottom: -16px;
+}
+.arrow:after {
+  content: "";
+  position: absolute;
+  left: 20px;
+  top: -20px;
+  width: 25px;
+  height: 25px;
+  -webkit-box-shadow: 6px 5px 9px -9px black,
+                      5px 6px 9px -9px black;
+  -moz-box-shadow: 6px 5px 9px -9px black,
+                   5px 6px 9px -9px black;
+  box-shadow: 6px 5px 9px -9px black,
+              5px 6px 9px -9px black;
+  -webkit-transform: rotate(45deg);
+  -moz-transform:    rotate(45deg);
+  -ms-transform:     rotate(45deg);
+  -o-transform:      rotate(45deg);
+}
+.tooltip.active {
+  opacity: 1;
+  margin-top: 5px;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition:    all 0.2s ease;
+  -ms-transition:     all 0.2s ease;
+  -o-transition:      all 0.2s ease;
+}
+.tooltip.out {
+  opacity: 0;
+  margin-top: -20px;
+}
--- a/sandbox/tooltips.js
+++ b/sandbox/tooltips.js
@ -0,0 +1,65 @@
+// IIFE to ensure safe use of $
+(function( $ ) {
+
+  // Create plugin
+  $.fn.tooltips = function(el) {
+
+    var $tooltip,
+      $body = $('body'),
+      $el;
+
+    // Ensure chaining works
+    return this.each(function(i, el) {
+    
+      $el = $(el).attr("data-tooltip", i);
+
+      // Make DIV and append to page 
+      //var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.attr('title') + '<div class="arrow"></div></div>').appendTo("body");
+      var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.text() + '<div class="arrow"></div></div>').appendTo("body");
+
+      // Position right away, so first appearance is smooth
+      var linkPosition = $el.position();
+
+      $tooltip.css({
+        top: linkPosition.top - $tooltip.outerHeight() - 13,
+        left: linkPosition.left - ($tooltip.width()/2)
+      });
+
+      // Mouseenter
+      .hover(function() {
+
+        $el = $(this);
+
+        $tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']');
+
+        // Reposition tooltip, in case of page movement e.g. screen resize                        
+        var linkPosition = $el.position();
+
+        $tooltip.css({
+          top: linkPosition.top - $tooltip.outerHeight() - 13,
+          left: linkPosition.left - ($tooltip.width()/2)
+        });
+
+        // Adding class handles animation through CSS
+        $tooltip.addClass("active");
+
+        // Mouseleave
+      }, function() {
+
+        $el = $(this);
+
+        // Temporary class for same-direction fadeout
+        $tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']').addClass("out");
+
+        // Remove all classes
+        setTimeout(function() {
+          $tooltip.removeClass("active").removeClass("out");
+          }, 300);
+
+        });
+
+      });
+
+    }
+
+})(jQuery);