Yendar: Mit CSS area-tag vordefinieren

Hallo,

Ich versuche für ein <area>-tag das Format per CSS vorzudefinieren, was mir nicht gelingen will. Nur ohne Verwendung von CSS funktioniert es bisher.

Es soll ein Polygon angezeigt werden, das in einem bestimmten Bereich auf eine andere html-Datei verweist. (verweis-sensitiv)
Das Problem ist nun, unter Verwendung von CSS wird mir nur das Polygon angezeigt, aber nicht der link.

(Selbiges Problem besteht mit dem <body>-tag. Es ist mit CSS vordefiniert, die Seite ignoriert es aber. Bei dem h1-tag dagegen funktioniert es.)

Zuhilf! :-)

Hier der Code:

<html>
<head>
<style type="text/css">

#polymap { href: blubb.html; shape: poly; coords: 13,3,34,3,44,21,34,40,13,40,3,21; }
#schwarz { bgcolor: black; text: white; }
#a001 { color: blue; }

</style>
</head>

<body id=schwarz>

<h1 id=a001> blauer test </h1> <br>

mit css funktioniert dies nicht:

<map name='test'><area id="polymap"></map>
   <img style='visibility:visible' border='0' usemap='#test' src='hexagonblau.gif'>

<br>---------------------<br>

ohne css funktioniert es:

<map name='test2'><area shape=poly coords=13,3,34,3,44,21,34,40,13,40,3,21 href='blubbb.html'></map>
   <img style='visibility:visible' border='0' usemap='#test2' src='hexagonblau.gif'>

</body>
</html>

  1. Moin!

    Ich versuche für ein <area>-tag das Format per CSS vorzudefinieren, was mir nicht gelingen will. Nur ohne Verwendung von CSS funktioniert es bisher.

    Was logisch ist. Es ist nicht die Aufgabe von CSS, die Funktionalität des <area>-Elements nachzubilden oder zu beeinflussen.

    Mir scheint aber, du hast die Funktion von CSS sowieso noch nicht verstanden. CSS ist nicht dazu da, HTML-Attribute auszulagern. CSS ist eine komplett eigene Formatierungssprache, deren Eigenschaftsschlüsselworte teilweise mit den Attributnamen aus HTML übereinstimmen, meistens jedoch nicht.

    Das ist dein CSS:

      
    
    > #polymap { href: blubb.html; shape: poly; coords: 13,3,34,3,44,21,34,40,13,40,3,21; }  
    > #schwarz { bgcolor: black; text: white; }  
    > #a001 { color: blue; }  
    
    

    Und der ist grob fehlerhaft.

    Es gibt keine CSS-Eigenschaft "href", keine "shape", keine "coords" - somit kommt für die ID #polymap keinerlei CSS-Formatierung heraus.

    Das gleiche gilt für die ID #schwarz: Es gibt keine Eigenschaft bgcolor und keine Eigenschaft text. Das Resultat ist keinerlei Formatierung.

    Lediglich bei der ID #a001 hast du einen Zufallstreffer gelandet: Es gibt die CSS-Eigenschaft color, der man zufällig auch Farbworte zuweisen kann.

    Dementsprechend ist es also absolut nicht verwunderlich, dass dein CSS nicht auf dein HTML wirkt.

    ohne css funktioniert es:

    <map name='test2'><area shape=poly coords=13,3,34,3,44,21,34,40,13,40,3,21 href='blubbb.html'></map>
       <img style='visibility:visible' border='0' usemap='#test2' src='hexagonblau.gif'>

    Das wird mit CSS niemals funktionieren, da CSS in allen derzeit implementierten Versionen keinerlei Möglichkeit kennt, die Eigenschaften des <area>-Elements zu beeinflussen. Dieses Element definiert lediglich als "virtuell" zu bezeichnende mausaktive Flächen einer ihm zugeordneten Grafik. CSS kann keine der dabei relevanten Eigenschaften verändern, alles muß immer über HTML-Attribute gelöst werden. Bedenke: CSS ist für das AUSSEHEN da - eine mausaktive Fläche hat aber keinerlei Aussehen, allenfalls kann man vielleicht mit CSS den Mauszeiger verändern - mehr aber auch nicht.

    Ich empfehle dir dringend, die mal das CSS-Kapitel in SELFHTML anzusehen: http://de.selfhtml.org/css/.

    - Sven Rautenberg

    --
    "Love your nation - respect the others."
    1. Danke für die ausführliche Antwort. Ja, mein Verständnis von CSS war offenbar falsch.
      Es ist leider verdammt schwer nach Dingen zu suchen die es gar nicht gibt, wie in diesem Fall ein per CSS zu veränderndes area-tag. ;-)