I tried to fix response div position fixed:
HTML is:
<div id="response">
<table width="100%" cellspacing="5" style="background-image:url(images/bg.gif); background-repeat:no-repeat; width:100%;">
<tr>
<td class="clock" colspan="2"><?php include'scripts/clock.html'; ?></td>
</tr>
</table>
</div>
<div>
<img src="images/map.gif" border="0" usemap="#Msj_Map" alt="map" class="map" />
<map name="Msj_Map" id="Msj_Map">
<area id="8" shape="poly" coords="436,141,486,141,486,207,436,206" />
<area id="1" shape="poly" coords="163,148,163,170,159,170" />
<area id="2" shape="poly" coords="163,207,153,207,159,173,163,173" />
<area id="189" shape="poly" coords="198,281,199,307,161,307,161,282" />
<area id="190" shape="poly" coords="198,309,199,333,161,334,161,309" />
<area id="165" shape="poly" coords="540,230,570,230,577,236,577,271,540,271" />
<area id="40" shape="poly" coords="384,1156,419,1156,419,1180,383,1180" />
<area id="39" shape="poly" coords="422,1156,458,1156,458,1180,422,1181" />
<area id="54" shape="poly" coords="321,1109,353,1109,359,1116,360,1159,321,1159" />
<area id="29" shape="poly" coords="356,1235,387,1235,387,1274,356,1274" />
<area id="22" shape="poly" coords="390,1277,457,1277,457,1311,453,1315,390,1315" />
<area id="23" shape="poly" coords="321,1277,387,1277,387,1315,321,1315" />
<area id="24" shape="poly" coords="319,1277,319,1316,252,1316,252,1277" />
</map>
</div>
like http://www.noobcube.com/wp-content/uploads/demos/062709-fixed-header-footer/demo/
I used its logic but during implementation I found that <map> tag does not play its part with other elements because <map> draws just over an image and therefore does not support overflow:scroll. But <map> is the key element in my code.
May be there is some other solution to fix it.
After a long struggle i catch z-index and create css for response and <map> divs:
.calculator{
z-index:1000;
position:fixed;
top:0px;
}
.map-wrap{
margin-top:350px;
}
<div id="response" class="calculator">
<table width="100%" cellspacing="5" style="background-image:url(images/bg.gif); background-repeat:no-repeat; width:100%;">
<tr>
<td class="clock" colspan="2"><?php include'scripts/clock.html'; ?></td>
</tr>
</table>
</div>
<div class="map-wrap">
<img src="images/map.gif" border="0" usemap="#Msj_Map" alt="map" class="map" />
<map name="Msj_Map" id="Msj_Map">
<area id="8" shape="poly" coords="436,141,486,141,486,207,436,206" />
<area id="1" shape="poly" coords="163,148,163,170,159,170" />
<area id="2" shape="poly" coords="163,207,153,207,159,173,163,173" />
<area id="189" shape="poly" coords="198,281,199,307,161,307,161,282" />
<area id="190" shape="poly" coords="198,309,199,333,161,334,161,309" />
<area id="165" shape="poly" coords="540,230,570,230,577,236,577,271,540,271" />
<area id="40" shape="poly" coords="384,1156,419,1156,419,1180,383,1180" />
<area id="39" shape="poly" coords="422,1156,458,1156,458,1180,422,1181" />
<area id="54" shape="poly" coords="321,1109,353,1109,359,1116,360,1159,321,1159" />
<area id="29" shape="poly" coords="356,1235,387,1235,387,1274,356,1274" />
<area id="22" shape="poly" coords="390,1277,457,1277,457,1311,453,1315,390,1315" />
<area id="23" shape="poly" coords="321,1277,387,1277,387,1315,321,1315" />
<area id="24" shape="poly" coords="319,1277,319,1316,252,1316,252,1277" />
</map>
</div>
and get rid of it. :)
Thanks all.
Wrap a div around <img> and <map>. Like so :
<div class="map-wrap">
<img ... >
<map>
...
</map>
</div>
And add css :
.map-wrap {position:relative;}
For the other 2 answers <map> cannot be replaced by <div>
The <map> tag is used for defining an image map. Which is the image divided in to clickable areas or mouse sensitive areas.
Better using a <div> instead <map>.
Tell in CSS that the <div> must have a fixed position and everything should works fine.
Related
I have an image of the solar system, I need to display a span above the image, for example, "The sun" when I hover over the sun how do I do that
<div class="map">
<div id="p-name">
<p>
<span class="nsun">The sun</span>
<span class="nmerc">Mercury</span>
<span class="nvenu">Venus</span>
<span class="nearth">Earth</span>
<span class="nmars">Mars</span>
<span class="njupi">Jupiter</span>
<span class="nsat">Saturn</span>
<span class="nura">Uranus</span>
<span class="nnep">Neptune</span>
<span class="npluto">Pluto</span>
</p>
</div>
<img class="map" src="map.png" alt="Solar map" usemap="#solarmap">
<map name="solarmap">
<area class="sun" shape="circle" coords="145,285,140" alt="The sun">
<area class="merc" shape="circle" coords="332,300,22" alt="Mercury">
<area class="venu" shape="circle" coords="400,300,36" alt="Venus">
<area class="earth" shape="circle" coords="478,300,36" alt="Earth">
<area class="mars" shape="circle" coords="549,300,26" alt="Mars">
<area class="jupi" shape="circle" coords="669,300,82" alt="Jupiter">
<area class="sat" shape="circle" coords="835,309,77" alt="Saturn">
<area class="ura" shape="circle" coords="1004,309,60" alt="Uranus">
<area class="nep" shape="circle" coords="1134,309,60" alt="Neptune">
<area class="pluto" shape="circle" coords="1226,309,12" alt="Pluto">
</map>
</div>
You can use the jQuery .mouseenter() and .mouseleave() events to trigger what you need. See https://api.jquery.com/mouseenter/. And I would suggest to use data attributes on maps to make it more dynamic, otherwise you'll need to match the case for each planet (What will happen if we discover a new one ?? ;-) ).
Or alternatively, if you don't want to use jQuery, you can follow the example given at w3schools: https://www.w3schools.com/js/tryit.asp?filename=tryjs_imagemap
You can use CSS
:hover
Example
#p-name{
display:none;
}
.sun:hover + .nsun{
disply:block!important;
}
Just make sure you place your map before the spans
so your HTML will look like this
<div class="map">
<img class="map" src="map.png" alt="Solar map" usemap="#solarmap">
<map name="solarmap">
<area class="sun" shape="circle" coords="145,285,140" alt="The sun">
<area class="merc" shape="circle" coords="332,300,22" alt="Mercury">
<area class="venu" shape="circle" coords="400,300,36" alt="Venus">
<area class="earth" shape="circle" coords="478,300,36" alt="Earth">
<area class="mars" shape="circle" coords="549,300,26" alt="Mars">
<area class="jupi" shape="circle" coords="669,300,82" alt="Jupiter">
<area class="sat" shape="circle" coords="835,309,77" alt="Saturn">
<area class="ura" shape="circle" coords="1004,309,60" alt="Uranus">
<area class="nep" shape="circle" coords="1134,309,60" alt="Neptune">
<area class="pluto" shape="circle" coords="1226,309,12" alt="Pluto">
</map>
<div id="p-name">
<p>
<span class="nsun">The sun</span>
<span class="nmerc">Mercury</span>
<span class="nvenu">Venus</span>
<span class="nearth">Earth</span>
<span class="nmars">Mars</span>
<span class="njupi">Jupiter</span>
<span class="nsat">Saturn</span>
<span class="nura">Uranus</span>
<span class="nnep">Neptune</span>
<span class="npluto">Pluto</span>
</p>
</div>
</div>
I would like to create an image responsive with bootstrap. The problem is when I use the class img-responsive then the usemap is not working anymore.
<div class="col-lg-6">
<img class="center-block" src="images/plattegrond.jpg" alt="IGS Plattegrond" id="changer" usemap="#igsmap" onclick="changeImage(this)">
<map name="igsmap">
<!-- De knoppen op de Plattegrond -->
<area shape="rect" coords="522,263,542,285" alt="stand 1" href="#" onclick='show(1);'>
<area shape="rect" coords="458,311,479,334" alt="stand 2" href="#" onclick='show(2);'>
<area shape="rect" coords="458,213,477,232" alt="stand 3" href="#" onclick='show(3);'>
<area shape="rect" coords="587,315,606,335" alt="stand 4" href="#" onclick='show(4);'>
<area shape="rect" coords="586,214,605,231" alt="stand 5" href="#" onclick='show(5);'>
<area shape="rect" coords="522,167,542,188" alt="stand 6" href="#" onclick='show(6);'>
<area shape="rect" coords="523,125,540,142" alt="stand 7" href="#" onclick='show(7);'>
<area shape="rect" coords="237,126,251,141" alt="stand 8" href="#" onclick='show(8);'>
<area shape="rect" coords="192,319,207,332" alt="stand 9" href="#" onclick='show(9);'>
<area shape="rect" coords="266,303,280,319" alt="stand 10" href="#" onclick='show(10);'>
<area shape="rect" coords="228,407,246,424" alt="stand 11" href="#" onclick='show(11);'>
</map>
</div>
I hope someone can help me out,
Sincerely Dennis.
Thanks Andrew, I found it. The solution was :
Add this to Javascript :
!function(){"use strict";function a(){function a(){function a(a,c){function d(a){var c=1===(e=1-e)?"width":"height";return Math.floor(Number(a)*b[c])}var e=0;i[c].coords=a.split(",").map(d).join(",")}var b={width:k.width/k.naturalWidth,height:k.height/k.naturalHeight};j.forEach(a)}function b(a){return a.coords.replace(/ *, */g,",").replace(/ +/g,",")}function c(){clearTimeout(l),l=setTimeout(a,250)}function d(){(k.width!==k.naturalWidth||k.height!==k.naturalHeight)&&a()}function e(){k.addEventListener("load",a,!1),window.addEventListener("focus",a,!1),window.addEventListener("resize",c,!1),window.addEventListener("readystatechange",a,!1),document.addEventListener("fullscreenchange",a,!1)}function f(){return"function"==typeof h._resize}function g(){i=h.getElementsByTagName("area"),j=Array.prototype.map.call(i,b),k=document.querySelector('img[usemap="#'+h.name+'"]'),h._resize=a}var h=this,i=null,j=null,k=null,l=null;f()?h._resize():(g(),e(),d())}function b(){function b(a){if(!a.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==a.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+a.tagName+">.")}function c(c){c&&(b(c),a.call(c),d.push(c))}var d;return function(a){switch(d=[],typeof a){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(a||"map"),c);break;case"object":c(a);break;default:throw new TypeError("Unexpected data type ("+typeof a+").")}return d}}"function"==typeof define&&define.amd?define([],b):"object"==typeof module&&"object"==typeof module.exports?module.exports=b():window.imageMapResize=b(),"jQuery"in window&&(jQuery.fn.imageMapResize=function(){return this.filter("map").each(a).end()})}();
and this on the bottom of the page :
<script>
imageMapResize();
</script>
again thanks for looking in to it guys :D
<img src="images/imagemap.png" width="600" height="100" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Eric -->
<area shape="rect" coords="2,2,98,97" onclick="scrollto1()" style="cursor: pointer;" />
<area shape="rect" coords="102,3,202,95" onclick="scrollto2()" style="cursor: pointer;" />
<area shape="rect" coords="208,3,307,95" onclick="scrollto3()" style="cursor: pointer;"/>
<area shape="rect" coords="315,5,409,98" onclick="scrollto4()" style="cursor: pointer;"/>
<area shape="rect" coords="413,6,502,97" onclick="scrollto5()" style="cursor: pointer;"/>
<area shape="rect" coords="507,4,597,97" onclick="scrollto6()" style="cursor: pointer;"/>
</map>
The image map is clickable in all browsers except Internet Explorer 10. I am wondering if there is some way to get things working in Internet Explorer.
I have updated your code, its working now :)
you do not have the area self closing, and you were missing href="#" and style is not required at all :)
check the fiddle in case you want to check
Link : http://jsfiddle.net/MarmeeK/bD4s7/
<img src="http://images5.fanpop.com/image/photos/30600000/Template-800-x-100-pippy-and-jezzis-world-of-purdy-mindedness-30664157-800-100.jpg" width="600" height="100" border="0" usemap="#maps" alt="" />
<map name="maps">
<area shape="rect" coords="2,2,98,97" onclick="scrollto1()" style="cursor: pointer;" >
<area shape="rect" coords="102,3,202,95" href="#" >
<area shape="rect" coords="208,3,307,95" href="#" >
<area shape="rect" coords="315,5,409,98" href="#" >
<area shape="rect" coords="413,6,502,97" href="#" >
<area shape="rect" coords="507,4,597,97" href="#" onclick="javascript:alert('hi');" >
</map>
Why doesnt this map work, in Firefox?
<img usemap="m_one" id="one" src="/images/layout/town_and_country/Town__Country_Web_Map.jpg" alt="Town__Country_Web_Map" border="0" height="507" width="720">
<map id="m_one" name="m_one">
<area href="/local-area/in-the-community" coords="374,278,375,267,378,257,390,240,407,228,417,225,428,224,438,225,448,228,465,240,477,257,480,267,481,278,480,288,477,298,465,315,448,327,438,330,428,331,417,330,407,327,390,315,378,298,375,288,374,278,374,278" shape="poly">
<area href="/local-area/woodside-village-profile" coords="589,63,590,56,592,50,599,40,609,33,616,31,623,30,629,31,636,33,646,40,653,50,655,56,656,63,655,70,653,76,646,86,636,93,629,95,623,96,616,95,609,93,599,86,592,76,590,70,589,63,589,63" shape="poly">
<area href="/flamstead-village-profile" coords="571,392, 41" shape="circle">
<area href="/slip-end-village-profile" coords="575,118, 41" shape="circle">
<area href="/caddington-village-profile" coords="450,55, 41" shape="circle">
<area href="/aly-green-village-profile" coords="383,118, 41" shape="circle">
<area href="/Kensworth-village-profile" coords="235,144, 41" shape="circle">
<area href="/studham-village-profile" coords="53,147, 41" shape="circle">
<area href="/studham-village-profile" coords="145,304, 41" shape="circle">
</map>
Try adding a # inside "usemap"
<img usemap="#m_one" id="one" src="/images/layout/town_and_country/Town__Country_Web_Map.jpg" alt="Town__Country_Web_Map" border="0" height="507" width="720">
The code below works great in all modern browsers. I'm using a transparent gif as an image map so I can swap different keyboard images/divs below it to make the keyboard appear to be playable. In IE8 everything functions, but I get that ugly icon in the top left corner. Any ideas?
<div id="pressed-keys" class="kb-none">
<div id="kb-audio"></div>
</div>
<div id="mapped-keys" class="hide">
<img src="keyboard-overlay.gif" border="0" width="316" height="250" usemap="#keyboard-map" border="0" alt="Keyboard" class="alpha-0" style="background:transparent;border:0;" />
<map name="keyboard-map" id="keyboard-map">
<area id="key-1" class="kb1-C2" shape="poly" coords="77,155,88,149,157,189,165,182,213,208,193,229" href="#" alt="C">
<area id="key-2" class="kb2-C2s" shape="poly" coords="97,138,89,142,89,149,157,188,167,180,155,167" href="#" alt="C#">
<area id="key-3" class="kb3-D2" shape="poly" coords="111,138,105,141,155,166,168,179,166,182,214,208,232,191,184,168,182,170" href="#" alt="D">
<area id="key-4" class="kb4-D2s" shape="poly" coords="113,131,113,137,181,168,191,163,179,151,120,127" href="#" alt="D#">
<area id="key-5" class="kb5-E2" shape="poly" coords="233,190,186,168,192,163,180,150,129,129,131,129,247,174" href="#" alt="E">
<area id="key-6" class="kb6-F2" shape="poly" coords="248,173,259,161,215,145,209,149,140,125,133,129" href="#" alt="F">
<area id="key-7" class="kb7-F2s" shape="poly" coords="140,125,141,117,146,115,205,134,215,144,208,149" href="#" alt="F#">
<area id="key-8" class="kb8-G2" shape="poly" coords="260,160,270,149,226,135,224,137,205,133,216,144" href="#" alt="G">
<area id="key-9" class="kb9-G2s" shape="poly" coords="223,136,155,116,156,110,160,107,219,124,228,133" href="#" alt="G#">
<area id="key-10" class="kb10-A2" shape="poly" coords="221,124,229,133,228,135,270,149,278,139,237,127,236,127" href="#" alt="A">
<area id="key-11" class="kb11-A2s" shape="poly" coords="169,108,170,103,174,101,231,115,239,123,236,127" href="#" alt="A#">
<area id="key-12" class="kb12-B2" shape="poly" coords="278,138,286,129,234,117,240,123,238,126" href="#" alt="B">
<area id="key-13" class="kb13-C3" shape="poly" coords="285,128,233,115,230,114,182,102,185,100,250,114,253,111,291,120" href="#" alt="C">
<area id="key-14" class="kb14-C3s" shape="poly" coords="249,113,186,99,186,94,189,92,245,103,252,110" href="#" alt="C#">
<area id="key-15" class="kb15-D3" shape="poly" coords="291,119,296,113,260,105,257,106,247,104,253,110" href="#" alt="D">
<area id="key-16" class="kb16-D3s" shape="poly" coords="257,105,244,102,196,92,196,89,201,86,253,95,261,102" href="#" alt="D#">
<area id="key-17" class="kb17-E3" shape="poly" coords="296,111,301,106,256,97,262,102,260,104" href="#" alt="E">
</map>
</div>