# Textlink hinter Bild verstecken



## RuthG (4. August 2010)

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


----------



## ComFreek (4. August 2010)

Kannst du vielleicht ein wenig Code zeigen, was du schon hast?


----------



## RuthG (4. August 2010)

So sieht das Menü zur Zeit aus:


```
<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.


----------



## ComFreek (4. August 2010)

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?


----------



## RuthG (4. August 2010)

der z-index wird leider ignoriert. Wahrscheinlich weil er innerhalb von <a></a> sitzt.

mein CSS sieht so aus:


```
#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.


----------



## SpiceLab (4. August 2010)

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.


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.


----------



## ComFreek (4. August 2010)

spicelab hat gesagt.:


> Das Nachfolgeelement <span> kann keine niedere Schichtposition besitzen, wie sein Elternelement <a>, um den Inhalt von dessen Hintergrundbild zu überdecken.


Ich meinte eher, dass das <span> Element außerhalb des <a> Elements liegt.


----------



## RuthG (4. August 2010)

spicelab hat gesagt.:


> Als sog. "Image-Replacement-Technik" ist hier die Gilder-/Levin-Methode hilfreich, die den Text zeigt, wenn die Bildanzeige im Browser deaktiviert sein sollte.



Klingt interessant, aber sieht man dann den Text, wenn die bilder ausgschalten sind? Immerhin wird doch das span verschoben bzw. unsichtbar gemacht?


----------



## SpiceLab (4. August 2010)

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?


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.
> 
> ...


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.


----------



## RuthG (9. August 2010)

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


----------



## hela (9. August 2010)

RuthG hat gesagt.:


> ... Was habe ich übersehen?


... ich weiß es und verrate es aber nur, wenn du deinen Quelltext (HTML + CSS) hier zeigst.


----------



## ComFreek (9. August 2010)

hela hat gesagt.:


> ... ich weiß es und verrate es aber nur, wenn du deinen Quelltext (HTML + CSS) hier zeigst.


Das hat er doch schon, oder?:


RuthG hat gesagt.:


> ```
> #content {
> margin: 0 auto;
> width:1024px;
> ...


 


RuthG hat gesagt.:


> ```
> <div class="main">
> <div id="content">
> <ul>
> ...



PS: Wow, drei Zitate auf einmal, mein Rekord!


----------



## hela (9. August 2010)

ComFreek hat gesagt.:


> Das hat er doch schon, oder?:


Das scheint aber nicht mehr aktuell zu sein:


> ... hab das jetzt mal ausprobiert. Funktioniert so weit ganz gut.


----------



## RuthG (9. August 2010)

Alsooo  viel geändert hat sich da mal nicht:


```
<div id="content">
            <ul>
            <li id="ld"><a href="ld.html" title="Laser Diodes">Laser Diodes<span></span></a></li>
              <li id="laser"><a href="laser.html" title="Lasers">Lasers<span></span></a></li>
              <li id="led"><a href="led.html" title="LEDs">LEDs<span></span></a></li>
              <li id="det"><a href="det.html" title="Detectors">Detectors<span></span></a></li>
              <li id="opt"><a href="opt.html" title="Optical Devices">Optical Devices<span></span></a></li>
              <li id="acc"><a href="acc.html" title="Accessories">Accessories<span></span></a></li>
            </ul>
          </div>
```

und das ist das CSS, kann nur sein das da grad ein blödsinn drinnen steht, weil ich die ganze Zeit alles mögliche probiere um am Problem etwas zu ändern:


```
#content a,
#content strong {
	position: relative;
	overflow: hidden;
	}
	
#content a:hover,
#content a:visited,
#content a:active,
{ display:block; 
position: relative;
	overflow: hidden;}

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


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

#content span {
position:absolute;
background-image:url(pic/index/index.jpg); background-repeat:no-repeat;
width:300px;
height:245px
}

#content #ld a:link span{
background-position:-15px 0px;
}

#content #ld a:visited span,
#content #ld a:hover span,
#content #ld a:active span,
#content #ld a:focus span {
background-position:-15px -500px;
}


#content #laser a span{
background-position:-325px 0px;

}

#content #laser a:hover  span{
background-position:-325px -500px;
}

#content #led a  span{
background-position:-635px 0px;
}

#content #led a:hover  span{
background-position:-635px -500px;
}

#content #det a  span{
background-position:-15px -250px;
}

#content #det a:hover  span{
background-position:-15px -750px;
}

#content #opt a  span{
background-position: -325px -250px;

}

#content #opt a:hover  span{
background-position: -325px -750px;
}

#content #acc a span {
background-position:-635px -250px;
}

#content #acc a:hover  span{
background-position:-635px -750px;
}

#content a span {
	cursor: pointer;
	}
```

Habe probiert auch die anderen zustände zu definieren, aber dann funktioniert der hovereffekt nicht mehr ... irgendwo ist da der Hund drin 

Danke


----------



## hela (9. August 2010)

Alles klar,

in deinem HTML muss innerhalb des A-Elements das SPAN-Element *vor* den Text gestellt werden:
	
	
	



```
<div class="main">
  <div id="content">
    <ul>
      <li id="ld"><a href="#ld" title="Laser Diodes"><span></span>Laser Diodes</a></li>
      <li id="laser"><a href="#laser" title="Lasers">Lasers<span></span></a></li>
      <li id="led"><a href="#led" title="LEDs"><span></span>LEDs</a></li>
      <li id="det"><a href="#det" title="Detectors"><span></span>Detectors</a></li>
      <li id="opt"><a href="#opt" title="Optical Devices"><span></span>Optical Devices</a></li>
      <li id="acc"><a href="#acc" title="Accessories"><span></span>Accessories</a></li>
      </ul>
  </div>
</div> <!--Ende Main-->
```
Im zweiten LI-Element habe ich das SPAN-Element mal absichtlich hinter den Text gestellt.

Die CSS-Stylesheets dazu wurde ich so machen:

```
#content {
  margin: 0 auto;
  width: 1024px;
}
#content ul {
  margin: 0 auto;
  width: 900px;
  height: 480px;
  margin-bottom: 10px;
}
#content ul li {
  float: left;
  display: block;
  width: 300px;
  height: 245px;
}
#content ul li a {
  display: block;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 245px;
}
#content ul li a span {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: -15px 0;  /* ? */
  background-repeat: no-repeat;
  background-color: transparent;
}

/* Hier das entsprechende Bild einsetzen: */
li#ld a span { background-image: url(backgr.jpg); }
li#laser a span { background-image: url(backgr.jpg); }
li#led a span { background-image: url(backgr.jpg); }
li#det a span { background-image: url(backgr.jpg); }
li#opt a span { background-image: url(backgr.jpg); }
li#acc a span { background-image: url(backgr.jpg); }
```


----------



## RuthG (9. August 2010)

Danke, jetzt klappt alles.


----------

