# Nicht-Rechteckige-Imagemaps



## RopeMaker (17. Dezember 2004)

Hallo Leute,

Ich will eine Homepage mache. Auf der ein zentrales Bild ist dort befinden sich Imagemaps. Diese sollen aber nicht rechteckig sein. Sondern eben variabel. Gibts da einen Trick oder ist das möglich?

MFG RopeMaker


----------



## Sven Mintel (17. Dezember 2004)

Da gibts keinen Trick... das ist ganz normal....mit *shape="poly"* und den entsprechenden Koordinaten kannst du jede beliebige Form verwenden.

http://selfhtml.teamone.de/html/grafiken/verweis_sensitive.htm#definieren


----------



## RopeMaker (17. Dezember 2004)

Danke wegen der schnellen Antwort!
Mein zweites Problem: Wenn ich über die Map mit der Maus fahre, soll das Polygon ein anderes Bild erhalten. Das heißt ich fhre über das Polygon, und NUR die Polygon-Map ändert sich. 
Ich hoffe es ist verständlich!

MFG RopeMaker


----------



## Sven Mintel (18. Dezember 2004)

Das geht mit Javascript--> Häusle 

Den Skriptcode siehst du dort ja.


----------



## RopeMaker (18. Dezember 2004)

Also bis jetzt funktioniert alles!
So sieht bis jetzt der Test-Code von mir aus.

```
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
pics=new Array();
function setHover()
{
p=new Image();p.src=document.images.imageMap.src;pics[0]=p;
for(a=0;a<document.getElementsByTagName('area').length;++a)
{
o=document.getElementsByTagName('area')[a];nr=eval(a+1);
p=new Image();p.src=o.id+'.gif';pics[pics.length]=p;
aOVER=new Function('F','colored('+nr+');');aOUT=new Function('F','colored(0);');
o.onmouseover=aOVER;o.onmouseout=aOUT;
}
}
function colored(i)
{
document.images.imageMap.src=pics[i].src;
}
if(document.getElementsByTagName){window.onload=setHover;}
//-->
</script>
</head>
<body style="background-color:#323232;">
<map name="haeusle">
<area id="haus1"shape="poly" coords="183,188,395,170,434,377,297,413,183,188" href="#" alt="Haus1">
</map>
<table border="0"cellpadding="0"cellspacing="0"align="center"summary="haeusle">
<tr>
	<td style="background-image:url(H3.JPG);"><img name="imageMap"src="H3.JPG" border="0" alt="Haeusle" 
usemap="#haeusle">
</td>
</tr>
</table>
</body>
</html>
```
Wie kann ich vollbringen, dass dieses Bild was gezeigt wird, nun mit einer transparenz von 50% dargestellt wird. 

MFG RopeMaker


----------



## Sven Mintel (18. Dezember 2004)

Indem du es 50% transparent machst... PNG oder MS-CSS-Filter:Alpha()


----------

