Verweis-Sensitive Grafik ("Hotspots")

[ydrive]

Hallo Typo-Gemeinde,

ich habe folgende Grafik: (siehe unten)

Diese ist der obere Teil des Hintergrunds meiner Seite, eingebunden in meiner "main.tmpl"

main.tmpl:

...
<div id="header">    //fügt die Grafik als Hintergrund ein        
###MENU###    //das hier setzt mein GMENU über die Grafik
###LOGO###    //das hier platziert noch ein Logo über die Grafik
</div>
...

In meiner CSS habe ich dann entsprechend definitert, wo die Grafik zu sein hat:

struktur.css:

#header {
    height:400px;
    background:url('/images/header.jpg') #FF0000;
    overflow:hidden;
    margin-bottom:-115px;
}

Nun möchte ich den orange-farbenen Bereich (OHNE die komischen Farbspritzerpunkte) mit einem Link versehen.

Ich habe schon etwas gefunden wie bspw das Folgende, das dann in den HTML Code mit reinsoll, das sollte bei mir dann in die main.tmpl (oder nicht?)

<div id="header">
    <img src="/images/header.jpg" height="400" alt="header" usemap="#headerlink">
    
    <map name="headerlink">
    <area shape="rect" coords="100,100,500,200" href="http://www.link.de/" alt="Irgendwas">
    </map>
</div>

Zum Testen erstmal ein Rechteck. Leider hat das nicht funktioniert (habe dann natürlich in der CSS den Link auf die Grafik rausgenommen).

Wie kann ich das elegant lösen?

[tsk]

Vorab - css hat mit dem, was Du erreichen möchtest nichts zu tun. Dein unterstes Code-Beispiel hingegen ist korrekt hinsichtlich des erforderlichen Markups. Ob so etwas in das Main Template gehört, ist eine andere Frage. Ich habe es gerade als Content Element realisiert - über ein TemplaVoila FCE. Im folgenden Thread (Image Map FCE mit Link-Title Problem) findest Du einen Weg zum Ziel.

[ydrive]

Das hat alles nicht so richtig funktioniert und ich stehe immer noch ohne Link da.

Von einem Bekannten (mit einigen Kenntnissen und wenig Zeit) habe ich den Tip bekommen, dass ich einfach ein weiteres "A Element" in der Template Datei einfügen soll und die Area dann per CSS definieren muss.

Kann mir jemand erklären was er damit gemeint hat?

Oder hat noch jemand eine andere Lösung?

Es muss doch möglich sein meiner Grafik irgendwie einen definierten Bereich für einen Link zu verpassen... ???