Textlink hinter Bild verstecken

[hela]

... Was habe ich übersehen?

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

 

[ComFreek]

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

Das hat er doch schon, oder?:

#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
}

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

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

 

[hela]

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]

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]

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]

Danke, jetzt klappt alles.