Text über Bild schreiben:

#1
Hi Jungs wie oben schon beschrieben gibt es bei mir ein Problem, bei dem ich vorhabe ein Bild, dass ich wegen eines Links als Karte geschrieben habe, mit Text überschreiben will. Bitte achtet jetzt nicht auf die fehlenden backgrounds usw mir geht es nur um das prinzip :)

HTML:
<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">
<title>Gaming Portal</title>
<link type="text/css" rel="stylesheet" href="text.css"
</head>

<body>

<img src="Hintergrund.jpg" width="650" height="800" alt="Hintergrund" usemap="#Hintergrund">
<map name="Hintergrund">
<area shape="rect" coords="11,10,59,29"
href="Anmelden.html" alt="Anmelden" title="Anmelden">
<area shape="rect" coords="42,36,96,57"
href="Regristrieren.html" alt="Noch nicht angemeldet?" title="Noch nicht angemeldet?">
</map>

<div id="text1">
<p>
blabla
blabla
blabla
blabla
blabla
blabla
blabla
blabla
blabla
</p>
</div>

</body>
</html>



Nun zu CSS:
#Hintergrund{
Z-index: 0;

}

#Text1{
font-size: large;
font-weight: bold;
Z-index: 1;




}


Mein Problem ist, dass Es den Text einfach unter meine "Map" geschrieben hat.
Ich möchte das Bild aber nicht absolut positionieren, da ich sonst sicher mit der Fenster minimierung Probleme bekomme.
Wäre sehr Dankbar über eure Hilfe.
 

SpiceLab

ZENmechanic
Premium-User
#2
Mein Problem ist, dass Es den Text einfach unter meine "Map" geschrieben hat.
Das geschieht einfach, weil sich derzeit #Text1 im normalen Textfluß befindet, und ein <div>- u. <p>-Element als sog. Blockelemente einen Absatz darin erzeugen.

Als Arbeitsgrundlage empfehle ich http://www.cssplay.co.uk/menu/cssplay-imagemap-hover-v2.html, und wandel einfach einen der Mouseover-Texte in einen ständig sichtbaren um.

Aus:
CSS:
area:nth-of-type(1):hover ~ span:after {content:"Dummy Text";}
wird:
CSS:
area:nth-of-type(1) ~ span:after {content:"Dummy Text";}
 
Gefällt mir: iCup
#3
Danke für die Antwort ja dass ist verständlich.
Wie man ein Bild so beschriftet weiß ich natürlich auch.
Meine Frage war jedoch ob mir jemand sagen kann wie ich es in html bzw. CSS einstellen kann, dass es die Karte als Hintergrund sieht und meinen Text nicht unbedingt als beschriftung, sondern einfach nur als Beginn der Seite.
Wäre da
position: relative
position: absolute

notwendig?

Vielen Dank im Vorraus
 

SpiceLab

ZENmechanic
Premium-User
#4
Wie man ein Bild so beschriftet weiß ich natürlich auch.
Wenn Du es wüsstest, hättest Du hier nicht die Frage danach gestellt :D
Meine Frage war jedoch ob mir jemand sagen kann wie ich es in html bzw. CSS einstellen kann, dass es die Karte als Hintergrund sieht und meinen Text nicht unbedingt als beschriftung, sondern einfach nur als Beginn der Seite.
So deutlich kam das nicht rüber.

Klar, auf diese Weise würde es auch gehen, aber wenn das eh nur eine Startseite repräsentieren soll, kann doch getrost das ImageMap verwendet werden.

Ein paar Zeilen CSS aus dem Demo dazu, und fertitsch :cool:
 
Gefällt mir: iCup
#5
Wenn du es selbst nicht weißt dann schreib doch bitte einfach gar nichts dazu denkst du wenn ich das nur für eine einfache Startseite benötige wäre ich nicht selbst drauf gekommen. ;)
Dass es mit der Positionierung auch geht ist mir natürlich kar aber da ich ja meinem Bild eine Grafik gegeben habe und in dieser Grafik wie von mir beschrieben mehrere Links enthalten sind, werden die Links durch die Positionierung entfernt.

Deswegen habe ich ja gefragt ob mir dass jemand erklären kann, da ich zuvor mit dem <map> nicht viel am Hut hatte und mich deswegen nicht mit den Regeln dazu auskenne.

Wenn sich jemand genauer damit auskennt würde ich mich freuen wenn es mir dass erklären kann sitze jetzt schon lange genug da und versuche das Problem zu lösen...
 

SpiceLab

ZENmechanic
Premium-User
#6
Was ich bislang nicht weiß, sind die weiteren Details Deiner Seite :p
Wenn sich jemand genauer damit auskennt würde ich mich freuen wenn es mir dass erklären kann sitze jetzt schon lange genug da und versuche das Problem zu lösen...
Du hast die Stichworte schon genannt: relative und absolute Positionierung.

Also wenden wir uns von Deinem eingangs gezeigten ImageMap wieder ab, und betrachten die beiden Positionierungsarten genauer:
HTML:
<div id="imageMap">
  <a href="Anmelden.html" id="link1">Anmelden</a>
  <a href="Registrieren.html" id="link2">Registrieren</a>
</div>
CSS:
#imageMap {
  position:relative;
  width:650px;
  height:800px;
  background:url(Hintergrund.jpg) no-repeat
}
#imageMap a {
  position:absolute
}
#imageMap a#link1 {
  top:...px;
  left:...px
}
#imageMap a#link2 {
  top:...px;
  left:...px
}
Mit dieser Technik beziehen sich die absoluten Startpositionen der Links auf die Grenzen des Elternelements #imageMap, und nicht mehr auf <body>, was zu Problemen führen kann, wenn das Browserfenster skaliert wird.
 
Zuletzt bearbeitet:
Gefällt mir: iCup
#7
Verstanden Danke :)

Noch eine Frage:
Wie kann ich bei den Links die Breite einfügen, da bei:
#imageMap a#link2 {
nur die Position angegeben wird aber nicht die Breite, was dazu führen würde, dass der Link genau 1 Pixel hoch und breit ist wenn ich dass richtig sehe oder?

kann man statt den Koordinaten einfach unter top und left
height:
weight:
hinzufügen?

Wenn ich da falsch liege wäre es nett wenn du das erklären könntest.
Sorry wegen dem oben ;)
 

SpiceLab

ZENmechanic
Premium-User
#9
kann man statt den Koordinaten einfach unter top und left
height:
weight:
hinzufügen?
Jip, weight = width, und dazu sicherheitshalber noch display:block, damit die Dimensionierungen beim Inline-Element auch greifen :)
CSS:
#imageMap a {
  position:absolute;
  display:block
}
Je nachdem, ob die Linkflächen gleich groß werden sollen, können diese Angaben für diesen Selektor definiert werden, ansonsten analog zu den Startpositionen individuell für #link1 u. #link2.
 
Zuletzt bearbeitet:
Gefällt mir: iCup