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..
Related
I'm not a programmer/developer. I tried to put this code on the sidebar of my WordPress website, with the HTML widget. It is working on a page (with the HTML block), but not on the sidebar. I tried with two different themes. Anyone has any idea on how to make it work/a possible alternative?
<img src="wp-content/uploads/2022/05/Site2.png" usemap="#image-map" alt="test">
<map name="image-map" id="test-imgmap">
<area target="_blank" alt="test" title="" href="example1" coords="500,398,73,481" shape="rect">
<area target="_blank" alt="test" title="" href="example2" coords="71,493,493,563" shape="rect">
<area target="_blank" alt="test" title="" href="example3" coords="71,570,495,641" shape="rect">
</map>
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.
For a website I am making, the mapping code won't work, the links remain unclickable. I'm not sure if this is an issue with the CSS/HTML combination or not, but my code is as follows for the HTML part:
<div class="subscribe">
<h2>Follow Us : </h2>
<div class="contact-form">
<img src="images/social.png" usemap="#follow">
<map name="follow">
<area shape="rect" coords="648,336,1000,600" href="www.instagram.com/quadrotian" target="_blank" alt="Instagram">
<area shape="circle" coords="1337,336,275" href="www.facebook.com/Quadrotian" alt="Facebook">
<area shape="circle" coords="2045,336,275" href="#" target="_blank" alt="Pinterest">
<area shape="circle" coords="2783,336,275" href="#" alt="Twitter">
<area shape="circle" coords="3491,336,275" href="#" alt="Google Plus">
<area shape="circle" coords="4206,336,275" href="#" alt="LinkedIn">
</map>
</div>
</div>
I have used map before in the similar manner but it isn't working this time.
Your map coordinates, shapes and their sizes are way too big. I decreased their sizes by a factor of 10 and look at how big they still are. This is one of your circles:
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;
}
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>