Area { display: block; background-color:pink; }

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. :sunglasses:

Failing that, a change of aroma would be very acceptable. :mask:

coothead

1 Like

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#

1 Like

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. :ok:
Beetroot does the trick for me. :sunglasses:

coothead

1 Like

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.