Image map: Difference between revisions
(Created page with "https://addons.mozilla.org/en-US/firefox/addon/ime/ <source lang="html4strict"> <!DOCTYPE html> <html> <head> <title></title> <script src="jquery.js"></script> <style> .popu...") |
No edit summary |
||
Line 1: | Line 1: | ||
* [http://addons.mozilla.org/en-US/firefox/addon/ime/ Browser plugin] | |||
* [http://developer.mozilla.org/en-US/docs/HTML/Element/map About the map element] | |||
<source lang="html4strict"> | <source lang="html4strict"> |
Latest revision as of 16:41, 21 January 2013
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<style>
.popup {
position: absolute;
width: 320px;
height: 320px;
overflow: auto;
border: 5px solid green;
display: none;
}
.popup img {
width: 100px;
}
</style>
</head>
<body>
<map name="a">
<area shape="rect" coords="198,127,310,163" href="#" data-popup-id="n1" title="area one">
<area shape="rect" coords="80,129,182,165" href="#" data-popup-id="n2" title="area two">
<area shape="poly" coords="276,19,463,23,387,216" href="#" title="area three">
<area shape="poly" coords="578,128,618,118,668,128,638,168,598,158" href="#" title="area four">
</map>
<img usemap="#a" src="adgangaarhus.png">
<div class="popup" id="n1" style="left: 50px; top: 50px">
<img src="test.jpg" />
</div>
<div class="popup" id="n2" style="left: 450px; top: 100px">
</div>
<script>
function myclicker () {
// magic variable "this" that knows which area has been clicked
var nid = $(this).attr("data-popup-id");
// alert("area clicked on:" + nid);
$("#"+nid).toggle();
// open that url in some iframe or ....
// get the data-popup-id of THIS
return false;
}
$("area").click(myclicker)
</script>
</body>
</html>