Textlink hinter Bild verstecken

R

RuthG

Mitglied
Hallo,

ich habe mein Hauptmenü mit Hintergrundbildern formatiert. Nun möchte ich für den Notfall den Linktext anzeigen lassen, aber so lange die Bilder sichtbar sind von diesen verdecken lassen.

Wie stell ich das am besten an?
Danke, LG Ruth
 
So sieht das Menü zur Zeit aus:

HTML: 
<div class="main">
          <div id="content">
            <ul>
              <li id="ld"><a href="ld.html" title="Laser Diodes">Laser Diodes</a></li>
              <li id="laser"><a href="laser.html" title="Lasers">Lasers</a></li>
              <li id="led"><a href="led.html" title="LEDs">LEDs</a></li>
              <li id="det"><a href="det.html" title="Detectors">Detectors</a></li>
              <li id="opt"><a href="opt.html" title="Optical Devices">Optical Devices</a></li>
              <li id="acc"><a href="acc.html" title="Accessories">Accessories</a></li>
              </ul>
          </div>
		</div> <!--Ende Main-->

im CSS sind Hintergrundbilder definiert, die verschoben werden. Der Text im html soll jedoch nur dann angezeigt werden, wenn die bilder nicht angezeigt werden können.
 
Vielleicht machst du noch ein "<span>" jeweils rein und setzt den z-index dieses Elementes kleiner als den z-index vom Element mit dem Hintergrund.


Und wie sieht dein CSS-Code aus?
 
der z-index wird leider ignoriert. Wahrscheinlich weil er innerhalb von <a></a> sitzt.

mein CSS sieht so aus:

Code: 
#content {
margin: 0 auto;
width:1024px;
}

#content ul {
margin: 0 auto;
width:900px; height:480px;
margin-bottom:10px;
}

#content span { z-index:1}

#content li {
float:left;
display:block;
width:300px;
height:245px
}

#ld a {
display:block;
background-image:url(pic/index/index.jpg);
background-position:-15px 0px;
background-repeat:no-repeat;
width:300px;
height:245px;
z-index:2
}

#ld a:hover {
display:block;
background-image: url(pic/index/index.jpg);
background-position:-15px -500px;
background-repeat:no-repeat;
width:300px;
height:245px;
z-index:2
}

und das natürlich für jeden Menüpunkt angepasst.
 
ComFreek hat gesagt.:
Vielleicht machst du noch ein "<span>" jeweils rein und setzt den z-index dieses Elementes kleiner als den z-index vom Element mit dem Hintergrund.
Zum Vergrößern anklicken....
Das Nachfolgeelement <span> kann keine niedere Schichtposition besitzen, wie sein Elternelement <a>, um den Inhalt von dessen Hintergrundbild zu überdecken.

Als sog. "Image-Replacement-Technik" ist hier die Gilder-/Levin-Methode hilfreich, die den Text zeigt, wenn die Bildanzeige im Browser deaktiviert sein sollte.
 
RuthG hat gesagt.:
Klingt interessant, aber sieht man dann den Text, wenn die bilder ausgschalten sind? Immerhin wird doch das span verschoben bzw. unsichtbar gemacht?
Zum Vergrößern anklicken....
Da hast du wohl nicht die Erläuterung dieser Technik gelesen, und ihren Code studiert?

Jens O. Meiert zur Gilder-/Levin-Methode hat gesagt.:
[...]

Gravierende Zugänglichkeitsprobleme sind nicht bekannt, und das Verfahren erlaubt sogar die Darstellung des Textes, wenn die Anzeige von Bildern deaktiviert ist.

[...]
HTML: 
<h1><span></span>Muster</h1>
CSS: 
h1 {
height: 25px;
position: relative;
width: 250px;
}

h1 span {
background: url(example.gif) no-repeat;
height: 100%;
position: absolute;
width: 100%;
}
Zum Vergrößern anklicken....
Hier wird das <span>-Element überhaupt nicht verschoben oder versteckt, sondern erhält das Hintergrundbild, anstatt des <h1>-Elements, das deinem <a>-Element entspricht, und überdeckt aufgrund seiner absoluten Positionierung den nachfolgenden Inhalt (Text) des Elternelements.

Sollte die Bildanzeige im Browser deaktiviert sein, kommt der darunter befindliche Text zum Vorschein.
 
Zuletzt bearbeitet:
Hallo,

hab das jetzt mal ausprobiert. Funktioniert so weit ganz gut. Nur beim klick auf das Bild verschiebt sich das span um die breite des Textes.
Was habe ich übersehen?

Danke, LG Ruth
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück