I see this page:
I open this page:
I add
<style type="text/css">
area {
display: block;
background-color:pink;
}
</style>
I click “See Result>>”. Nothing happens.
I want to change the background-color of < area >, Is it possible?
I see this page:
I open this page:
I add
<style type="text/css">
area {
display: block;
background-color:pink;
}
</style>
I click “See Result>>”. Nothing happens.
I want to change the background-color of < area >, Is it possible?
All of the area tags refer to a part of the previously defined image - all they are is coordinates within the image for the purpose of determining where in the image was clicked for determining what to do next. The areas don’t have a background so there is nothing to turn pink.
You might as well ask how to turn the wind pink.
I wish I could turn my wind pink.
Failing that, a change of aroma would be very acceptable.
coothead
You might be interested in this way of doing it. It is a JQuery plugin.
http://www.jqueryscript.net/other/Simple-jQuery-Plugin-For-Highlighting-Image-Map-Maphilight.html
Here is an example of it being used
http://davidlynch.org/projects/maphilight/docs/demo_usa.html#
Someone turned the Snow pink!
I could see it being useful during setup, to visually see where you are setting the areas.
I have no problems turning the snow pink.
Beetroot does the trick for me.
coothead
I opened this page:
I tried this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.uzay{ background-image:url('planets.gif');
width:145px;
height:126px;
border:1px solid turquoise;
}
.rect{ fill:transparent; cursor:pointer;}
.circle {fill:transparent; cursor:pointer}
</style>
<script type="text/javascript">
var A = ["green","red","yellow"];
var i=0;
function renkli(ad){ // alert(ad);
var el= document.getElementById(ad);
//el.setAttribute('fill',A[i]);
el.style.fill=A[i];
i++;
if(i>2){i=0;}
}
/*
http://www.w3schools.com/svg/svg_circle.asp
http://www.w3schools.com/svg/svg_rect.asp
http://www.w3schools.com/jsref/prop_area_coords.asp
http://www.w3schools.com/jsref/prop_area_shape.asp
http://www.howtocreate.co.uk/tutorials/html/imagemaps
*/
</script>
</head>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap" id="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<script type="text/javascript">
function toSvg(ad){
var m, a, t,s,b, c, cc;
m = document.getElementById(ad);
a = m.getElementsByTagName('area');
t='<svg class="uzay">';
// alert(a.length);
//alert(a[0].getAttribute('shape'));
for(var i=0; i<a.length; i++) {
s = a[i].getAttribute('shape');
c = a[i].getAttribute('coords');
b= s+i;
if(s == 'poly') {
t+= '<polyline points="'+c+'" fill="red" id="'+b+'" onclick="renkli(this.id)"/>';
}
if(s =='circle') {
cc = c.split(',');
t+= '<circle cx="'+cc[0]+'" cy="'+cc[1]+'" r="'+cc[2]+'" class="circle" id="'+b+'" onclick="renkli(this.id)"/>';
}
if(s =='rect') {
cc = c.split(',');
t+= '<rect x="'+cc[0]+'" y="'+cc[1]+'" width="'+(cc[2]-cc[0])+'" height="'+(cc[3]-cc[1])+'" class="rect" id="'+b+'" onclick="renkli(this.id)"/>';
}
}
t+='</svg>';
var el= document.getElementById('mekan');
el.innerHTML = t + 'click circle and rect';
alert(el.innerHTML);
}
</script><br>
<input type="button" value="to svg" onclick="toSvg('planetmap')">
<div id="mekan"></div>
</body>
</html>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.