Related
I'm trying to apply a filter to an images map area, when it is hovered on. It displays the tooltip on the correct area, but nothing changes when I hover on it.I've tried to use z-index but that didn't help either.
html code:
<div>
<img src={imagesource} usemap="#image-map">
</img>
<map name="image-map">
<area id="area1" style={{backgroundColor:"black", zIndex:"3"}} target="_self" alt="siauliai" title="siauliai" href="" coords="2087,1394,1974,1821,1379,1890,1312,1760,1396,1540,1311,1445,1334,1383,1328,1355,1592,1349" shape="poly"/>
<area id="area2" target="_self" alt="panevezys" title="panevezys" href="" coords="2036,1844,2266,1911,2396,1715,2851,1703,2940,1585,2412,1327,2115,1411,2053,1535,2042,1636" shape="poly"/>
<area id="area3" target="_self" alt="utena" title="utena" href="" coords="2379,1748,2389,1850,2676,2158,2907,2181,2884,2007,3339,2046,3283,1788,2974,1619,2766,1726,2516,1729" shape="poly"/>
<area id="area4" target="_self" alt="vilnius" title="vilnius" href="" coords="3173,2975,2933,2601,3124,2269,3364,2064,2940,2021,2912,2212,2678,2212,2403,1887,2240,1972,2481,2339,2276,2686,2671,2657,2523,2827,2558,2961" shape="poly"/>
<area id="area5" target="_self" alt="alytus" title="alytus" href="" coords="1781,2660,2523,3197" shape="rect"/>
<area id="area6" target="_self" alt="marijamp" title="marijamp" href="" coords="1314,2184,1753,2198,1859,2601,1583,2827,1293,2693" shape="poly"/>
<area id="area7" target="_self" alt="Klaipeda" title="Klaipeda" href="" coords="671,1510,1074,1347,855,1651,1138,2174,473,2033" shape="poly"/>
<area id="area8" target="_self" alt="telsiai" title="telsiai" href="" coords="883,1663,989,1804,1322,1755,1371,1564,1307,1352,1201,1324,1124,1338,975,1515" shape="poly"/>
<area id="area9" target="_self" alt="taurage" title="taurage" href="" coords="1703,2073,1689,2137,1159,2172,1032,2002,1004,1826,1279,1762,1435,2024" shape="poly"/>
<area id="area10" target="_self" alt="kaunas" title="kaunas" href="" coords="1774,2146,1951,2641,2226,2549,2424,2330,2191,1913,1611,1870,1428,1899,1477,2012,1682,2033" shape="poly"/>
</map>
css code:
area{
display:block;
}
#area1:hover {
background:black;
opacity: 0.5;
}
#area2:hover {
background:black;
opacity: 0.5;
}
#area3:hover {
background:black;
opacity: 0.5;
}
#area4:hover {
background:black;
opacity: 0.5;
}
#area5:hover {
background:black;
opacity: 0.5;
}
#area6:hover {
opacity: 0.5;
background:black;
}
#area7:hover {
opacity: 0.5;
background:black;
}
#area8:hover {
opacity: 0.5;
opacity:0.2;
}
I don't know the solution. But I see you can just define area:hover single time instead of repeating it. Or give them a single class and then use .classname:hover. This way also, it only effects the area you hovered instead of effecting all.
Sorry I don't have the answer but this was a little productivity tip.
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 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>
I am trying to make a text box appear when hover over hotspot on image map.
This is what I did to make text to appear when I hover over.
<p class="ms-rteFontSize-3"><map name="FPMap0" id="FPMap0">
<area title="Click to view" href="http://google.com" shape="rect" coords="26, 106, 133, 237"/>
<area title="Click to view" href="http://yahoo.com" shape="rect" coords="322, 113, 414, 250"/>
<area title="Click to view" href="http://ask.com" shape="rect" coords="402, 35, 488, 96"/>
<area title="Click to view" href="http://naver.com" shape="rect" coords="598, 115, 682, 254"/></p>
But instead of this, I want to make colored, visible text box to appear when I hover over. Is it something CSS is required? I am not familiar with CSS, so not sure what to apply here.
So I edited my code to this
<html>
<head>
<script src="/sites/JQueryDemo/JS/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/sites/JQueryDemo/JS/jquery.SPServices-2013.01.js" type="text/javascript"></script>
<script src="//www.outsharked.com/scripts/jquery.imagemapster.js"></script>
</head>
<body>
<img id="predflow" src="http://http://www.vectortemplates.com/raster/batman-logo-big.gif"
style="width:400px;height:240px;" usemap="#predflow-map">
<map name="predflow-map">
<area shape="rect" data-name="a,all" coords="36,46,121,131" href="google.com" />
<area shape="rect" data-name="b,all" coords="113,76,198,161" href="yahoo.com" />
<area shape="rect" data-name="c,all" coords="192,50,277,135" href="ask.com" />
<area shape="rect" data-name="d,all" coords="262,60,347,145" href="naver.com" />
</map>
<div style="width:390px; height: 120px; font-size: 12px; ">
<div id="predflow-caption" style="clear:both;border: 1px solid black; width: 400px; padding: 6px; display:none;">
<div id="predflow-caption-header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;"></div>
<div id="predflow-caption-text"></div>
</div>
</div>
<script type="text/javascript">
var inArea,
map = $('#predflow'),
captions = {
a: ["google"],
b: ["yahoo"],
c: ["ask"],
d: ["naver"]
},
single_opts = {
fillColor: '000000',
fillOpacity: 0,
stroke: true,
strokeColor: 'ff0000',
strokeWidth: 2
},
all_opts = {
fillColor: 'ffffff',
fillOpacity: 0.6,
stroke: true,
strokeWidth: 2,
strokeColor: 'ffffff'
},
initial_opts = {
mapKey: 'data-name',
isSelectable: false,
onMouseover: function (data) {
inArea = true;
$('#predflow-caption-header').text(captions[data.key][0]);
$('#predflow-caption-text').text(captions[data.key][1]);
$('#predflow-caption').show();
},
onMouseout: function (data) {
inArea = false;
$('#predflow-caption').hide();
}
};
opts = $.extend({}, all_opts, initial_opts, single_opts);
map.mapster('unbind')
.mapster(opts)
.bind('mouseover', function () {
if (!inArea) {
map.mapster('set_options', all_opts)
.mapster('set', true, 'all')
.mapster('set_options', single_opts);
}
}).bind('mouseout', function () {
if (!inArea) {
map.mapster('set', false, 'all');
}
});
</script>
</body>
</html>
Still image map is working fine, but nothing appears when I hover over. I added jQuery plugin to SharePoint, example from here works fine on SharePoint page.
Here is how to do what you want in straight jQuery/javascript:
Working jsFiddle here
HTML:
Instructions: Mouse over computer's monitor to see hidden DIV
<div id="imagemap">
<img src="http://img716.imageshack.us/img716/8287/3ylp.jpg" width="275" height="207" usemap="#Map" border="0" />
<map name="Map">
<area shape="poly" coords="105,26,107,126,257,140,256,27" href="#" id="CUST_1" name="CUST:1" />
<area shape="poly" coords="10,21,14,178,71,184,69,19" href="#" id="CUST_2" name="CUST:2" />
<area shape="poly" coords="113,145,94,172,241,192,251,164,250,164" href="#" id="CUST_3" name="CUST:3" />
</map>
<p>
<div id="myDiv">This DIV hidden unless hover over the computer's monitor</div>
</p>
</div>
<!-- Yellow DIV ID numbers overlaid on top of computer components -->
<div id="num_cust1">1</div>
<div id="num_cust2">2</div>
<div id="num_cust3">3</div>
javascript/jQuery:
function hovIn() {
var areaID = $(this).attr('id');
//alert('['+areaID+']');
if (areaID == 'CUST_1') {
$('#myDiv').show();
}
}
function hovOut() {
$('#myDiv').hide();
}
$('map area').hover(hovIn, hovOut);
CSS:
#num_cust1 {
padding: 10px;
background-color:yellow;
position:absolute;
top:60px;
left:180px;
}
#num_cust2 {
padding: 10px;
background-color:yellow;
position:absolute;
top:60px;
left:40px;
}
#num_cust3 {
padding: 10px;
background-color:yellow;
position:absolute;
top:160px;
left:180px;
}
#myDiv {
display:none;
width:50%;
height:50px;
padding: 10px;
background-color:skyblue;
}
Are you open to using jQuery?
If so, have you heard of the ImageMapster plugin?
See this link for demos: http://www.outsharked.com/imagemapster/default.aspx?demos.html
Since ImageMapster is a jQuery plugin, you will need the following lines in the head tag of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//www.outsharked.com/scripts/jquery.imagemapster.js"></script>
The first line loads the jQuery library, and the next line loads the ImageMapster plugin.
After that, it's just the code to make the imagemap work.
See the demos above for what you can do.