Axel Richter: area coords bei keinem browser spec.konform?

Beitrag lesen

SELF-Forum

area coords bei keinem browser spec.konform?

Axel Richter
– Informationen zu den Bewertungsregeln

Hallo,

dies funktioniert so aber nicht, da keiner der von mir getesteten browser (moz, ie und opera) die prozentwerte in den coords erkennt, sondern immer von pixeln ausgeht. hab ich was übersehen, oder haben tatsächlich ALLE browser diese lücke in ihrer implementierung? ich hatte eigentlich nicht vor, bei jedem imageresize die coords der ganzen areas erst umständlich berechnen lassen zu müssen.

Naja, offensichtlich kam es da noch zu keinen Beschwerden, weil es ja auch ziemlich selten ist, dass man ein Bild beliebig skalieren kann und dann trotzdem noch als ImageMap verwenden kann. Normalerweise verpixelt das Bild doch irgendwann so sehr, dass nichts mehr zu erkennen ist.

bsp.:
<div style='position:relative; float:left'>
<img src='image1.png' usemap='#map1' width=100% height=100%>
<map name='map1'>
  <area name='area1' shape='rect' coords='0%,0%,50%,100%' href='klickmich1.html'>
  <area name='area2' shape='rect' coords='51%,0%,100%,100%' href='klickmich2.html'>
</map>
</div>

Du kannst Dir etwas ähnliches wie eine Imagemap bauen, indem Du A-Elemente auf dem Bild absolut positionierst. Etwa so:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Titel</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
* { margin:0; padding:0; }  
#imagemap { position:relative; float:left; width:300px; height:200px; }  
#imagemap img { position:absolute; width:100%; height:100%; top:0; left:0; }  
#imagemap a { display:block; background-image:url(trans.gif); }  
#imagemap a span { display:none; }  
#imagemap a#shape1 { position:absolute; width:50%; height:100%; top:0; left:0; }  
#imagemap a#shape2 { position:absolute; width:50%; height:100%; top:0; right:0; }  
</style>  
</head>  
<body>  
<h1>Test</h1>  
<div id='imagemap'>  
 <img src='Beispiel.jpg' alt='einBild' title=''>  
 <a href='klickmich1.html' id='shape1'><span>klickmich1.html</span></a>  
 <a href='klickmich2.html' id='shape2'><span>klickmich2.html</span></a>  
</div>  
<p>Test</p>  
</body>  
</html>

Das Rumgetrickse mit dem background-image:url(trans.gif); ist nötig, weil IE6 und Opera ein absolut leeres Block-A-Element nicht anklickbar machen. Das Bild muss aber nicht existieren, wenn Dir die 404-er im Log egal sind.

viele Grüße

Axel

Beitrag melden
–
Informationen zu den Bewertungsregeln