Link im Bild erstellen ("css-Problem")

[dennisspohr]

Hallo @ all!

Es gibt die Möglichkeit in ein Bild mehrere "Bereiche" (area) mit Links zu erstellen. Hierbei muss man folgenden Code "in das Bild" (im Quelltext) einfügen:

<area href="index.php?go=Programmierung" shape="rect" coords="0, 19, 203, 280">

Nun füge ich das Bild aber nicht im HTML-Code, sondern in einer CSS-datei hinzu.

#head
{
  background: #e4e4e4 url(../images/header.jpg) no-repeat top left;
    width: 747px;
    height: 117px;
    padding: 0px;
    margin: 0 auto;
}

Wie kann ich nu trotzdem diese verlinkbaren Bereiche erstellen?
Vielen Dank für eure Hilfe!

lg Dennis

 

[Commodore]

Imagemaps sind nur auf Bilder anwendbar, da musst du das Bild nicht als Hintergrundbild, sondern als gewöhnlcihes Bild einbinden.

Falls du noch was drüberschrieben willst, dann gehts so:

<div style="position:relative;">
<img src="bild.jpg" style="position:absolute; top:0px; left:0px;" />
<div style="position:relative; left:0px; top:0px;">
text text text text<br />
text text text text<br />
text text text text<br />
text text text text<br />
text text text text
</div>
</div>

 

[dennisspohr]

Hallo Commodore, erstmal vielen Dank für diene Antwort!

Hmm...nicht als Hintergrundgrafk einbinden. Das Problem ist, dass ich das Design nicht selber erstellt habe, sondern als Open-Source heruntergeladen habe. Ich verstehe zwar css und passe diese Design mir auch immer beliebig an, allerdings sind irgendwann meine Kenntnisse am Ende. Z.B. weiß ich jetzt nicht, wie und wie weit ich diese Grafik als "normale Grafik" und nicht als Hintergrundbild anzeigen lassen kann.

Was meinst du mit drüber schreiben? Und wo bzw. wie genau müsste ich deinen Code reinschreiben?

Hier mal die URL zum Testen, falls dies weiterhilft:
dennisspohr.de

lg Dennis

 

[gruenspan]

<div id="header"><img src=".../images/header.jpg" alt="..." /></div>

 

[dennisspohr]

sorry...aber jeztt stehe ich auf'm Schlauch....war das die Antowrt auf meine Frage? Wenn ja in wie fern? Ein wenig Eklärung wäre nett. *g*

lg Dennis

 

[gruenspan]

Anstatt dem DIV per CSS ein Hintergrundbild zugeben machst du das bild einfach in den DIV. Darauf wendest du dann Deine MAP an.

 

[dennisspohr]

erstmal vielen Dank an alle...nach etwas herumprobieren habe ich es schließlich geschafft....ich konnte MAP anwenden uund alles is gut...naja...fast alles, durch die Änderungen ist ein kleiner Design-Fehler entstanden. Im Firefox sieht es anders aus als im ie:
dennisspohr.de
die CSS-Datei:
http://marvin.priggers.de/hosting/dennis/home/test/css/style.css
Habt ihr vielleicht Vermutungen woran der Fehler liegt?

lg Dennis

keiner? Gibt es vielleicht verschiedene mögliche Ursachen?

lg Dennis

 

[gruenspan]

81 Fehler im Validator, alle Achtung. Fehler beheben und sehen ob das Problem weiterhin besteht.

Und tu Dir und uns einen Gefallen, entweder Du trennst den Markup von Styleangaben oder lässt es bleiben. Aber bei diesem Mischimaschi sieht keiner durch.