I have a round image which I managed to find how to map in a previous question. I now wonder how I can make this image change when i hover over it. It has a mapped area. I have a problem on that.
HTML version without CSS where i believe that the " usemap="#imagechange" " is causing the problem:
<img src="1.png"
onmouseover="this.src='2.png'"
onmouseout="this.src='1.png'"
width="100" height="100"
alt="usemap" border="0"
usemap="#imagechange"/>
<map name="imagechange">
<area shape="circle" coords="50,50,50" href="image.com" />
</map>
It works only when I am inside the area (= 100x100 area MINUS the circle area).
I also have a version with css which doesnt work at all.
HTML version with CSS:
div class="imagechange" >
<img src='foundation/images/Twitter.png'
title="Map Image"
alt="usemap" border="0"
usemap="#imagechange"/>
<map name="imagechange">
<area shape="circle" coords="50,50,50" href="index.html" />
</map>
CSS
.imagechange {
width: 100px;
height:100px;
display:block;
overflow:hidden;
border-radius:50px;
-webkit-border-radius:50px;
}
.imagechange:hover {
border-radius:0px;
-webkit-border-radius:0px;
}
Use this:
<a href='http://www.google.com/'>
<img src='1.png' onmouseover="this.src='2.png'" onmouseout="this.src='1.png'" style='border:0px; border-radius:999px; -webkit-border-radius:999px;'/>
</a>
Related
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 have an image map and my link is not clickable on my image. Here is my map/image code:
<map name="map">
<area shape="rect" coords="208, 76, 229, 101" href="link here">
</map>
<img id="himg" usemap="#map" src="img here">
Here is "himg" css:
#himg {
position:relative;
width:781px;
height:245px;
margin:0 auto;
z-index: -10;
}
At first I had the image before the map, but then switched it so the map comes first, but that did not make anything clickable.
I am trying to create an HTML image map like the following( Please find my code below):
h1 {
background-color: red;
}
<h1> This is Frame A </h1>
<img src="http://image.slidesharecdn.com/thesolarsystem-100324192727-phpapp01/95/the-solar-system-2-728.jpg?cb=1269517813" width="500" height="300" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="circle" coords="450,208" href="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" alt="Sun">
<area shape="circle" coords="305,124" href="http://vignette2.wikia.nocookie.net/heman/images/3/36/Earth.jpg/revision/latest?cb=20130912205625" alt="Earth">
<area shape="circle" coords="652,122" href="https://upload.wikimedia.org/wikipedia/commons/8/85/Venus_globe.jpg" alt="Venus">
</map>
The image is getting displayed on the webpage, however, the Sun, Earth and Venus are not getting turned into clickable things so that I can direct it to their respective images. Please let me know what I am doing wrong? Am I specifying the coordinates properly?
I used the following Image Generator to find out the coordinates :
This is because the coords takes three items and not 2: x,y,radius. So you need to add values for the radius (here is an example):
h1 {
background-color: red;
}
<h1> This is Frame A </h1>
<img src="http://image.slidesharecdn.com/thesolarsystem-100324192727-phpapp01/95/the-solar-system-2-728.jpg?cb=1269517813" width="500" height="300" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="circle" coords="330,118,60" href="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" alt="Sun">
<area shape="circle" coords="205,70,30" href="http://vignette2.wikia.nocookie.net/heman/images/3/36/Earth.jpg/revision/latest?cb=20130912205625" alt="Earth">
<area shape="circle" coords="452,82,35" href="https://upload.wikimedia.org/wikipedia/commons/8/85/Venus_globe.jpg" alt="Venus">
</map>
Note: Since you defined the width and height of the image as width="500" height="300", you will need to change the x,y coordinates to adjust for that. This is why I changed them in my answer.
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>