Created
April 12, 2011 12:15
-
-
Save obeattie/915403 to your computer and use it in GitHub Desktop.
Quick proof-of-concept for clickable regions in HTML5. Uses Raphaël to draw SVG.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html xmlns:og="http://ogp.me/ns#"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Links demo</title> | |
| <style> | |
| * { margin: 0; padding: 0; } | |
| </style> | |
| <script type="text/javascript" src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script> | |
| </head> | |
| <body> | |
| <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Glasses_800_edit.png/800px-Glasses_800_edit.png" /> | |
| <script type="text/javascript"> | |
| var paper = Raphael(0, 0, 800, 600); | |
| var drawClickablePolygon = function(lineDesc, href, scale){ | |
| var polygon = paper.path(lineDesc); | |
| scale = (scale || 1.2); | |
| polygon.scale(scale, scale); | |
| polygon.attr({ | |
| // Work around FF's bug where transparent objects aren't drawn | |
| 'fill': '#000', | |
| 'opacity': 0, | |
| 'stroke-width': 0, | |
| 'href': href, | |
| 'cursor': 'pointer' | |
| }); | |
| polygon.mouseover(function(){ polygon.attr('opacity', .5); }); | |
| polygon.mouseout(function(){ polygon.attr('opacity', 0); }); | |
| return polygon | |
| } | |
| var die1 = drawClickablePolygon( | |
| 'M347 500 L362 489 L406 493 L406 541 L396 551 L347 551 Z', | |
| 'http://www.google.com' | |
| ); | |
| var die2 = drawClickablePolygon( | |
| 'M422 517 L452 509 L494 515 L494 567 L464 577 L422 567 Z', | |
| 'http://www.google.com' | |
| ); | |
| </script>, | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment