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.
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 tried to add two <map> to "HomeNewProducts1.png" but without any success. The two <map> URL links should go to two different landing pages. I am new to Javascript. Please kindly help!!! Thank you!
<div>
<img src="images/NewProductsBox1.png" class="img-responsive"
id="newProduct" onclick="changeImage()"
onmouseover="this.src='images/NewProductsBoxOpen1.png';"
onmouseout="this.src='images/NewProductsBox1.png'; map name="map1"/>
</div>
<map name="map1">
<area href="function changeImage() {
newProduct.src = "images/HomeNewProducts1.png";
}" shape="circle" coords="240,180,140">
<area href="function changeImage() {
newProduct.src = "images/HomeNewProducts1.png";
}" shape="rect" coords="4,6,88,69" href="#">
</map>
<script>
function changeImage() {
newProduct.src = "images/HomeNewProducts1.png";
}
</script>
Okay- still trying to wrap my head around what you're trying to accomplish and if this is the best approach. I think you're overcomplicating the area tags. So far, this works, but I'm not sure if it's entirely what you're looking for:
<div>
<img src="images/NewProductsBox1.png" class="img-responsive"
id="newProduct" onclick="changeImage()" onmouseover="this.src='images/NewProductsBoxOpen1.png';"
onmouseout="this.src='images/NewProductsBox1.png';" usemap="map1" />
</div>
<map name="map1">
<area shape="circle" coords="240,180,140" href="http://www.yahoo.com" target="_blank" />
<area shape="rect" coords="4,6,88,69" href="http://www.google.com" target="_blank" />
</map>
<script>
function changeImage() {
newProduct.src = "images/HomeNewProducts1.png";
}
</script>
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>
When using the following code, my pointer doesn't turn into the pointer cursor when mousing over the <area> in IE and Chrome, but it works fine in Firefox. How should I change this so that it'll work in IE and Chrome as well?
<img id="fr_main_img" src="image_main.png" usemap="#fr_main_img" alt="" width="700" height="230"/>
<map id="joinReward" name="fr_main_img">
<area shape="rect" coords="551,178,675,211" style="cursor: pointer;"/>
</map>
Instead of specifying cursor:pointer, you could just specify that is must be handled like an anchor by adding the href attribute. I'm guessing that if the cursor needs to change, it is clickable in some way. Try this:
<map id="joinReward" name="fr_main_img">
<area shape="rect" coords="551,178,675,211" href="#" />
</map>
You must specify a value in the attribute href:
<img id="fr_main_img" src="image_main.png" usemap="#fr_main_img" alt="" width="700" height="230"/>
<map id="joinReward" name="fr_main_img">
<area shape="rect" coords="551,178,675,211" href="#" style="cursor: pointer;" />
</map>