Alternative zu transp. 1px gif für Links mit "variabler Größe?

[uliII]

Hi,

gibt es eine Alternative zu transparenten 1 Pixel Grafiken - also ein Element -  welche als "unsichtbarer" Link über einem Hintergrundbild fungieren kann?

[suit]

gibt es eine Alternative zu transparenten 1 Pixel Grafiken - also ein Element -  welche als "unsichtbarer" Link über einem Hintergrundbild fungieren kann?

Wie wär's mit einem Link um das betreffende Element herum?

[Gunnar Bittersmann]

@@uliII:

nuqneH

gibt es eine Alternative zu transparenten 1 Pixel Grafiken - also ein Element -  welche als "unsichtbarer" Link über einem Hintergrundbild fungieren kann?

Ja, absolut positionierte 'a'-Elemente mit festgelegter Größe und Position. Wobei das Element, das das Hintergrundbild hat, relativ positioniert wird.

Mir erscheint aber das Konzept zweifelhaft. Warum ist das ein Hintergrundbild, wenn es doch offensichtlich Inhalt transportiert? Ein Vordergrundbild mit sensitiven Flächen wäre wohl das Mittel der Wahl.

Qapla'

[dave]

Hi,

ich glaube du suchst Image-Replacement-Techniken.
Zumindest wenn du das Ganze barrierearm und suchmaschinenfreundlich gestalten willst.

Hier eine lächerlich lange Liste verschiedener Möglichkeiten.

Ich persönlich verwende die Phark-Methode:

<a class="someClass" href="link/to/site" title="nicht vergessen">Link zur Seite</a>

.someClass {  
  width:Xpx;  
  height:Ypx;  
  background:url(src.format) no-repeat;  
  text-indent:-999em;  
  display:inline-block; /* Nur nötig bei Elementen die Standardmäßig inline sind */  
}

Hat den Vorteil das auch alle die keine Bilder sehen (hauptsächlich Blinde und Suchmaschinen) trotzdem einen Linktext haben.

Oder suchst du eine http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=Image-Map?

~dave

[uliII]

Hi,

»»...

<a class="someClass" href="link/to/site" title="nicht vergessen">Link zur Seite</a>

.someClass {

width:Xpx;
  height:Ypx;
  background:url(src.format) no-repeat;
  text-indent:-999em;
  display:inline-block; /* Nur nötig bei Elementen die Standardmäßig inline sind */
}

»»...  

>   
> ~dave  
  
Hi,  
  
perfekt. Danke!