Lav en transparent png-8 på 300x300px. Læg en farvet cirkel uden Anti-alias på 300x300px i billedet. Gem det som test.png - i png-8 med transparens, men uden mask.
Lav så dette dokument:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>
http://www.eksperten.dk/spm/305393</title><style type="text/css">
#mapPic {
position: absolute;
filter: Alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
visibility: hidden;
z-index: 2;
cursor: pointer;
}
</style>
<script type="text/JavaScript">
var actLink, d = document;
function getPos(elm){
for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
return {x:zx,y:zy}
}
function showMap( mArea ) {
actLink = mArea.href;
var pos, mD = d.getElementById("mapPic");
pos = getPos( d.getElementById("myPic") );
mC = mArea.coords.split(",");
mD.style.left = parseInt(mC[0]-mC[2]) + pos.x;
mD.style.top = parseInt(mC[1]-mC[2]) + pos.y;
mD.style.width = parseInt(mC[2]*2);
mD.style.height = parseInt(mC[2]*2);
mD.style.visibility = "visible";
}
function hideMap() {
d.getElementById("mapPic").style.visibility = "hidden";
}
</script>
</head>
<body>
<img id="mapPic" src="test.png" onclick="location.href=actLink;" onmouseout="hideMap();">
<img src="alle_On.gif" name="myPic" width="164" height="201" border="0" usemap="#myPicMap" id="myPic">
<map name="myPicMap">
<area shape="circle" coords="34,33,22" onmouseover="showMap(this)" href="#">
<area shape="circle" coords="57,142,49" onmouseover="showMap(this)" href="#">
<area shape="circle" coords="112,52,43" onmouseover="showMap(this)" href="#">
</map>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
