area coords bei keinem browser spec.konform?
TripleM
- html
0 Axel Richter0 TripleM
Hi,
ich habe folgende situation. ich möchte ein bild einbinden, welches sich der blockgröße entsprechend scaliert (width=100%, height=100%). das funktioniert auch soweit.
nun soll über diesem bild ne verweissensitive map liegen, die natürlich entsprechend mitscaliert. theoretisch kein problem, da laut den mir bekannten aktuellen spezifikationen (html4.01, xhtml1.1; z.b. http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1) die coords der entsprechenden area-bereiche kommaseparierte längenwerte sind, also ebenfalls mit prozentangaben gebaut werden können.
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.
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>
so long,
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
erstmal vielen dank für deine antwort.
spontan fällt mir übrigens als anwendungsfall ne weltkarte ein, auf der die kontinente verweissensitive bereiche darstellen, und die soll z.b. nen frame voll ausfüllen, unabhängig von der auflösung des browser oder des bildschirms.
das prob der verpixelung hät ich umgangen, indem ich das bild so groß gemacht hätte, das es für die maximale auflösung optimiert ist.
naja, mal schauen, ich glaub nicht, das mir dein tip mit den a-bereichen weiterhilft. muss ich halt doch tricksen und rechnen lassen. :)
so long,