Bild + Usemap mit Text darüber

[Sariel]

Hallo,

ich hoffe, hier kann mir jemand weiterhelfen.
mein anliegen ist es, über einem bild mit usemap einen text darzustellen. wäre es nur das bild ohne map, wäre das auch kein problem. dann müsste ich das bild als hintergrund in einen div packen, dem div den z-wert 1 geben, einen zweiten div mit z-wert 2 reinlegen und den text hinein schreiben. fertig!
jetzt ist aber da diese map für das bild. diese kann ich nur verwenden, wenn das bild nicht im hintergrund des divs ist (da map + css meines wissens nicht miteinander funktionieren). also muss es ganz normal als herkömmliches bild in den div hinein und die map dazu. dann wird jedoch der text des zweiten divs nicht über dem bild angezeigt, sondern darunter. er überlagert es also nicht.

kann mir also bitte jemand sagen, wie ich einen text über einem bild mit map anzeigen lassen kann?

vielen dank!
sariel

[1UnitedPower]

Meine Herren!

kann mir also bitte jemand sagen, wie ich einen text über einem bild mit map anzeigen lassen kann?

Ich habe deine Problem-Beschreibung absolut nicht verstanden, aber einen Tipp ins Blaue möchte ich trotzdem abgeben: Du suchst z-index.

[Sariel]

Meine Herren!

kann mir also bitte jemand sagen, wie ich einen text über einem bild mit map anzeigen lassen kann?

Ich habe deine Problem-Beschreibung absolut nicht verstanden, aber einen Tipp ins Blaue möchte ich trotzdem abgeben: Du suchst z-index.

danke für deine antwort. tut mir leid, wenn ich mich nicht verständlich genug ausdrücken konnte. ich schließe aber aus deinen worten aber auch, dass du meine frage wohl nicht gründlich durchgelesen hast. der z-index wird erwähnt, ist mir also nicht unbekannt.
trotzdem danke.

[1UnitedPower]

Meine Herren!

danke für deine antwort. tut mir leid, wenn ich mich nicht verständlich genug ausdrücken konnte.

Das ist nicht weiter schlimm. Manche Sachverhalte lassen sich eben schwer in Worte fassen, ein Online-Beispiel, eine Illustration oder eine Skizze können dann oft Wunder bewirken.

ich schließe aber aus deinen worten aber auch, dass du meine frage wohl nicht gründlich durchgelesen hast. der z-index wird erwähnt, ist mir also nicht unbekannt.

Du erwähnst den z-wert, nicht den z-index ;) Da hat mein Riecher versagt und ich hab nicht erkannt, was du meintest. Tipp: Eine präzise Fachsprache hilft meinem Riechorgan immer auf die Sprünge.

Felix hat offenbar einen besseren Riechkolben und deshalb freut es mich, dass du dein Problem inzwischen lösen konntest.

[Felix Riesterer]

Lieber Sariel,

Du hast im Wesentlichen ein <img>-Element, über das Du Text legen willst. Die herkömmliche Methode ist die, dass Du das <img>-Element in ein Elternelement verpflanzt und diesem die Eigenschaft position:relative gibst, damit die darin absolut positionierten Elemente eine gemeinsame linke obere Ecke haben. Anschließend packst Du die weiteren Elemente, die Du auf dem Bild darstellen willst, in das selbe Elternelement und positionierst sie absolut.

Beispiel:

<p id="map-area">  
    <img alt="Klickbild" usemap="#map" src="./images/map.jpg" />  
    <span id="text1">Text 1</span>  
    <span id="text2">Text 2</span>  
    <span id="text3">Text 3</span>  
    <map id="map">  
        <area ... />  
    </map>  
</p>

#map-area {  
    position: relative;  
}  
  
#map-area * {  
    position: absolute;  
}  
  
#map-area img {  
    left: 0;  
    top: 0;  
}  
  
#text1 {  
    left: 37px;  
    top: 21px;  
}  
  
#text2 {  
    left: 10px;  
    top: 121px;  
}  
  
#text3 {  
    left: 67px;  
    top: 5px;  
}

Du solltest nur aufpassen, dass die überlagernden Texte die Klickflächen (<area>-Koordinaten) Deiner Map nicht überlappen, da diese sonst nicht mehr uneingeschränkt nutzbar (lies: anklickbar) sind!

Liebe Grüße,

Felix Riesterer.

[Sariel]

Lieber Sariel,

Du hast im Wesentlichen ein <img>-Element, über das Du Text legen willst. Die herkömmliche Methode ist die, dass Du das <img>-Element in ein Elternelement verpflanzt und diesem die Eigenschaft position:relative gibst, damit die darin absolut positionierten Elemente eine gemeinsame linke obere Ecke haben. Anschließend packst Du die weiteren Elemente, die Du auf dem Bild darstellen willst, in das selbe Elternelement und positionierst sie absolut.

Beispiel:

<p id="map-area">

<img alt="Klickbild" usemap="#map" src="./images/map.jpg" />
    <span id="text1">Text 1</span>
    <span id="text2">Text 2</span>
    <span id="text3">Text 3</span>
    <map id="map">
        <area ... />
    </map>
</p>

>   
> ~~~css

#map-area {  

>     position: relative;  
> }  
>   
> #map-area * {  
>     position: absolute;  
> }  
>   
> #map-area img {  
>     left: 0;  
>     top: 0;  
> }  
>   
> #text1 {  
>     left: 37px;  
>     top: 21px;  
> }  
>   
> #text2 {  
>     left: 10px;  
>     top: 121px;  
> }  
>   
> #text3 {  
>     left: 67px;  
>     top: 5px;  
> }

Du solltest nur aufpassen, dass die überlagernden Texte die Klickflächen (<area>-Koordinaten) Deiner Map nicht überlappen, da diese sonst nicht mehr uneingeschränkt nutzbar (lies: anklickbar) sind!

Liebe Grüße,

Felix Riesterer.

besten dank! ich werde mir deinen vorschlag genauer ansehen und mir gedanken darüber machen.

[Sariel]

Besten Dank! obwohl ich diese methode noch nicht kannte, hat es nur mit deiner erklärung geklappt! sehr gut!
das wochenende wäre gerettet ;)

nochmal allerbesten dank!
sariel

[Sariel]

wenn du mir jetzt noch verrätst, wie ich "das ganze" zentriert bekomme bist du mein held... ;)

[Felix Riesterer]

Lieber Sariel,

wenn du mir jetzt noch verrätst, wie ich "das ganze" zentriert bekomme bist du mein held... ;)

#map-area {  
    margin: 0 auto;  
    position: relative;  
}

Liebe Grüße,

Felix Riesterer.

[Sariel]

#map-area {

margin: 0 auto;
    position: relative;
}

  
leider hat das keinen einfluss auf die horizontale ausrichtung meines bildes und textes...  
trotzdem danke!

[Felix Riesterer]

Lieber Sariel,

#map-area {

margin: 0 auto;
    position: relative;
}

>   
> leider hat das keinen einfluss auf die horizontale ausrichtung meines bildes und textes...  
  
dann musst Du eben die Breite des Bildes als width-Eigenschaft des #map-area-Elements definieren:  
  
~~~css
#map-area {  
    margin: 0 auto;  
    position: relative;  
    width: 425px; /* Bildbreite in Pixeln */  
}

Liebe Grüße,

Felix Riesterer.

[Sariel]

irgendwie zweifel ich langsam an mir selbst... egal was ich an der genannten stelle veranstalte - es wirkt sich nicht aus. ich bin am verzweifeln

[Felix Riesterer]

Lieber Sariel,

dann mach halt ein Fiddle, in dem Du das Wesentliche Deiner Seite zusammenstellst. Dann sehen wir weiter.

Liebe Grüße,

Felix Riesterer.

[Sariel]

so ich kopiere jetzt mal alles aus der seite hier hinein, bis auf die ausführliche map - die interessiert ja keinen (und entschuldige mich dafür, dass ich dir hier so dauerhaft zur last falle):

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Unbenanntes Dokument</title>  
<link rel="stylesheet" type="text/css" href="style.css" />  
</head>  
  
<body>  
<div id="main">  
<p id="header-area">  
    <img id="im" alt="SWAN_header" usemap="#headermap" src="header_normal.png" />  
    <span id="ovusername">MEIN_TEXT</span>  
</p></div>  
</body>  
</html>  

und die css datei bis jetzt:

  
#main{  
	float:center;  
	width:1024px;  
	z-index:0;  
	border:0px;  
	margin:0px;  
	padding:0px;  
}  
  
#header-area {  
        margin: 0 auto;  
	border:0px;  
	padding:0px;  
        position:relative;  
	width:1024px;  
}  
  
#header-area * {  
	position:absolute;  
	margin:0px auto;  
}  
  
#header-area img {  
	position:absolute;  
	margin:0px auto;  
}  
  
#ovusername {  
	left:855px;  
	top:41px;  
	font:"Cambria Math";  
	font-size:16;  
	color:#868686;  
}  

so das ist das wichtige, was ich habe...

danke, dass du dich mit meinem problem mit solcher hingabe beschäftigst! :)
sariel

[Felix Riesterer]

Lieber Sariel,

so ich kopiere jetzt mal alles aus der seite hier hinein, bis auf die ausführliche map

nein, Du machst ein Fiddle. Und dafür validierst Du erst Deinen Code. Weiter habe ich nämlich keine Lust, Dir zu helfen, wenn Du es mir nicht maximal einfach machst.

Liebe Grüße,

Felix Riesterer.

[Sariel]

oh sorry! falsch verstanden. tut mir leid.
ist aber inzwischen doch geklärt - ein freund konnte mir schließlich doch helfen

trotzdem nochmal besten dank!