Website in question (Purple tile at bottom right, green boxes are the targets.
I have the following html using area tags to select the first green box however I can't click it as a link. I am using bootstrap if it makes any difference.
<div class="col-md-4">
<img src="octa.png" usemap="#pmc">
<map name="pmc">
<area shape="rect" coords="978,482,1038,512" alt="pmc" href="www.google.com">
</map>
</div>
Any help is appreciated!
You can include multiple areas in your imagemap.
<img src="octa.png" usemap="#map" />
<map name="map">
<area shape="rect" coords="51,47,112,77" href="..." title="PMC Post" />
<area shape="rect" coords="188,47,249,77" href="..." title="Direct Download" />
</map>
you can use relative and absolute css properties
<div style="position:relative;">
<img src="src/of/img.png" />
</div>
css side
.links {
display:block;
position:absolute;
}
Related
imagine you have a clock 700px/700px and each quoter is a button highlighted on hover
<header>
<div class="opening">
<div class="clock">
<img class="clock" src="./materialy-graficzne/stoper-01.png" usemap="#image-map">
<img class="clockArrow" src="materialy-graficzne/stoper-01-arrow.png">
<map name="image-map">
<area class="areaA" alt="link to ecurcum section" title="ecurcum" href="#eC" coords="699,2,352,349" shape="rect">
<area class="areaB" alt="link to ewasab section" title="ewasab" href="#eW" coords="352,351,699,699" shape="rect">
<area class="areaC" alt="link to eginger section" title="eginge" href="#eG" coords="349,352,3,699" shape="rect">
<area class="areaD" alt="link to esafforn section" title="esaffro" href="#eS" coords="348,349,1,1" shape="rect">
</map>
</div>
</div>
</header>
The problem is that div.clock includes also the clock arrow 700px/700px and it's over the clock and rotates.
Because of the problem with layers i can't click on the buttons. Do you have any ideas how to deal with it? thx
screan of a clock example
I am not sure if this will be useful, but what you could try doing is using the CSS property "z-index" to make the buttons be above your clock.
Again, I am not sure if this is what you are looking for, but I hope I helped..
I have an image with class="img-responsive" which has links on it.
The problem is, when size of image changes, the coords won't be in their correct places.
How can I have dynamic coords for links depend on the size of the dynamic image?
<img class="img-responsive" usemap="#image-map" src="/Content/Images/news/(8).png" alt="">
<map name="image-map">
<area coords="419,64,15,179" shape="rect" href="" target="" alt="" title="">
<area coords="13,184,420,277" shape="rect" href="" target="" alt="" title="">
<area coords="14,283,420,374" shape="rect" href="" target="" alt="" title="">
<area coords="13,380,418,473" shape="rect" href="" target="" alt="" title="">
<area coords="14,481,419,572" shape="rect" href="" target="" alt="" title="">
</map>
Based on last comment from #ShareWin here a solution with Jquery.
Years ago, I faced to the same challenge. Accedently I found an Jquery plugin that allows to change the coodinates, depends on the picture size. The plugin calls jQuery RWD Image Maps.
Here some steps to get it work:
Take the orignal picture and create the area cords (I used Gimp for it)
Publish the original picture to your web project.
Import jquery and this plugin into your site.
Thereby the plugin does working, there are some restrictions.
Here an example code:
<div id="yourDivId" ...>
<img src="yourImage" class="map" usemap="#nameofImagemap" id="elementid" ..>
<map name="nameofImagemap">
<area shape="rect" coords="x,x,x,x" alt="Tooltip" href="yourTarget" />
...
</map>
</div>
The javascript call is as follow:
$( document ).ready(function()
{
$('#yourDivId img').rwdImageMaps();
}
Important note: Whenever the size of used picture changes by hand, you have to recreate the area map.
I am trying to create an area map but I want to highlight the area of the newspaper like border in red color, but I am not getting how to do it .
I am creating the area map as follow :
<div>
<img src="http://cantact104.com/wp-content/plugins/eNewsPaper/menu-pages/newspaper/01_17.jpg" id="photo" usemap="#planetmap">
</div>
<map name="planetmap">
<area shape="rect" style="cursor:pointer;" coords="360,6.3,976.5,827.1" target="_blank" onclick="return hello(1);" alt="Sun" onmouseover="borderit(this,'black')" onmouseout="borderit(this,'white')"><area shape="rect" style="cursor:pointer;" coords="0,407.7,667.8,826.2" target="_blank" onclick="return hello(2);" alt="Sun" onmouseover="borderit(this,'black')" onmouseout="borderit(this,'white')"><area shape="rect" style="cursor:pointer;" coords="0,1.8,362.7,404.1" target="_blank" onclick="return hello(3);" alt="Sun" onmouseover="borderit(this,'black')" onmouseout="borderit(this,'white')"><area shape="rect" style="cursor:pointer;" coords="0,826.2,976.5,1543.5" target="_blank" onclick="return hello(4);" alt="Sun" onmouseover="borderit(this,'black')" onmouseout="borderit(this,'white')"></map>
function borderit
function borderit()
{
alert('dd');
jQuery(this).css("background-color","yellow");
}
</script>
I suggest you to remove your borderIt function and onmouseover/onmouseout attributes because it's complicated to manage with this kind of elements.
Simply use this great jQuery plugin, it will be more quick and easy.
(only works with jQuery lte 1.9)
This will add a border to all area with class bordered, change to your liking.
area.bordered{
outline:1px solid red;
}
See http://www.w3schools.com/css/css_outline.asp for more details.
I am trying to make an image map in html, but for some reason it just will not work.
My code:
<img id="Image map" src="Koala.jpg" border="0" usemap="#koala" alt="" />
<map id="koala">
<area shape="rect" coords="438,370,552,583" href="http://www.google.com/" alt="Koala nose">
</map>
</ol>
Yes, it is inside an ordered list, not sure if that would contribute to anything.
The image I am referencing (Koala.jpg) is here: http://i.imgur.com/bZHlxCg.jpg
When I run the html file everything is there, except the koala is just not clickable at all.
Add name="koala" in addition to the id for Chrome and Safari to work too - http://jsfiddle.net/L4kUm/
<img id="Image map" src="http://i.imgur.com/bZHlxCg.jpg" border="0" usemap="#koala" alt="" />
<map id="koala" name="koala">
<area shape="rect" coords="438,370,552,583" href="http://www.google.com/" alt="Koala nose">
</map>
I have encountered a weird "bug" with html image maps. It looks like the browser is re-parsing the DOM in a way that I don't expect, when image maps are part of a <p> tag, whereas they work fine when part of a <div> tag.
Here's an example along with some comments. (I don't know how to quickly host an html page so here's the HTML source.
Can anyone explain what's going on?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM bug?</title>
<style type="text/css">code { font-family: monospace; } </style>
</head>
<body>
<h1>DOM bug?</h1>
<p>There seems to be a bug (or a poorly-documented behavior) in how browsers handle map areas with other HTML elements in the map.
The first image below works properly: there are four overlapping map areas covering all but the center square. The second image
below has a <code>map</code> element that seems to reject all child elements following the first non-<code>area</code> child element, so only the left and right
columns are covered by the image map areas.
The only difference is that the first map is enclosed by a <code>div</code> element and the second map is enclosed by a <code>p</code> element.</p>
<p>I've observed this on Firefox 8.0, Opera 11.61, Chrome 16.0.912.77; whereas Safari 5.0 and IE 7.0 renders both image maps "correctly".</p>
<span>
<div>
<!-- convert -size 45x45 pattern:checkerboard -filter box -resize 300x300 -auto-level +level-colors yellow,black ck1.png -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAABlBMVEX//wD/pQDmL6nOAAAACXBIWXMAAABPAAAATwFjiv3XAAAATUlEQVR42u3YMQEAMAgDwTiof5d10K4sYID7NacgSem8UtowDMMwDMMwDMMwbBWry+0HDMMwDMMwDMMwDFvLnAkYhmEYhmEYhmEYNrIPTJJ1lg/rCykAAAAASUVORK5CYII="
width="300" height="300" class="map" usemap="#simple1" />
<map name="simple1">
<area id="area-left" href="#" shape="rect" coords="0,0,100,300" alt="Link" title="left rectangle" />
<area id="area-right" href="#" shape="rect" coords="200,0,300,300" alt="Link" title="right rectangle" />
<div>
</div>
<area id="area-top" href="#" shape="rect" coords="0,0,300,100" alt="Link" title="top rectangle" />
<area id="area-bottom" href="#" shape="rect" coords="0,200,300,300" alt="Link" title="bottom rectangle" />
</map>
</div>
<p>
<!-- convert -size 45x45 pattern:checkerboard -filter box -resize 300x300 -auto-level +level-colors yellow,black ck1.png -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAABlBMVEX//wD/pQDmL6nOAAAACXBIWXMAAABPAAAATwFjiv3XAAAATUlEQVR42u3YMQEAMAgDwTiof5d10K4sYID7NacgSem8UtowDMMwDMMwDMMwbBWry+0HDMMwDMMwDMMwDFvLnAkYhmEYhmEYhmEYNrIPTJJ1lg/rCykAAAAASUVORK5CYII="
width="300" height="300" class="map" usemap="#simple2" />
<map name="simple2">
<area id="area2-left" href="#" shape="rect" coords="0,0,100,300" alt="Link" title="left rectangle" />
<area id="area2-right" href="#" shape="rect" coords="200,0,300,300" alt="Link" title="right rectangle" />
<div>
</div>
<area id="area2-top" href="#" shape="rect" coords="0,0,300,100" alt="Link" title="top rectangle" />
<area id="area2-bottom" href="#" shape="rect" coords="0,200,300,300" alt="Link" title="bottom rectangle" />
</map>
</p>
</span>
</body>
</html>