Themen |
 |
| |
Textmenu |
|
28.12.2000 |
Eine Grafik als Link sieht natürlich besser aus, als normaler Browsertext.
Aber eine Textbasierte Seite wird im Gegensatz zu einer Ansammlung aufwendiger
Grafiken schneller geladen.
Da Internetnutzer grundsätzlich ungeduldige
Zeitgenossen sind, sollte man versuchen Optik mit Geschwindigkeit zu kombinieren.
| | |
|
|
Links sehen Sie drei unterschiedliche Buttongrafiken. Oder?
Nun in
Wirklichkeit bestehen diese drei Buttons aus einer Grafik, die als Hintergrund
für drei Tabellenzellen definiert wurde.
Zusätzlich wurde für
jede Zelle eine andere Hintergrundfarbe gewählt. Die Beschriftung
der Buttons ist ganz normaler Text, der sich problemlos jederzeit abändern
lässt. Besuchern mit IE können Sie sogar noch einen Highlite
Effekt bescheren, indem der Zellen- hintergrund bei Mouseover gegen eine
andere Farbe ausgetauscht wird.
Die Grafik in diesem kleinen Beispiel ist
übrigens gerade einmal 182 byte gross...
|
<html><head>
<style>a{text-decoration:none}</style>
<script LANGUAGE="JavaScript">
function hilite(hilitecl){source=event.srcElement;
if(source.tagName=="TR"||source.tagName=="TABLE"){return;}
while(source.tagName!="TD"){source=source.parentElement;}
if(source.style.backgroundColor!=hilitecl&&source.id!="ignore"){
source.style.backgroundColor=hilitecl;}}
function normal(normalcl){
if(event.fromElement.contains(event.toElement) || source.contains(event.toElement)||source.id=="ignore"){return;}
if(event.toElement!=source){source.style.backgroundColor=normalcl;}}
</script></head>
<body bgcolor="#051F37" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=1 WIDTH="150">
<tr><td BGCOLOR="#2A5076" ALIGN=CENTER WIDTH="150" HEIGHT="25"
onMouseover="hilite('#ACC9E3')" onMouseout="normal('#2A5076')" BACKGROUND="ihre_teiltransparente_grafik.gif">
<font face="Arial,Helvetica"><font size=-1><a href="#">Menupunkt
1</a></font></font>
</td></tr><tr><td BGCOLOR="#051F37" HEIGHT="5"></td></tr>
<tr><td BGCOLOR="#5A5076" ALIGN=CENTER WIDTH="150" HEIGHT="25"
onMouseover="hilite('#CCC9E3')" onMouseout="normal('#5A5076')" BACKGROUND="ihre_teiltransparente_grafik.gif">
<font face="Arial,Helvetica"><font size=-1><a href="#">Menupunkt
2</a></font></font>
</td></tr><tr><td BGCOLOR="#051F37" HEIGHT="5"></td></tr>
<tr><td BGCOLOR="#8A5076" ALIGN=CENTER WIDTH="150" HEIGHT="25"
onMouseover="hilite('#ECC9E3')" onMouseout="normal('#8A5076')" BACKGROUND="ihre_teiltransparente_grafik.gif">
<font face="Arial,Helvetica"><font size=-1><a href="#">Menupunkt
3</a></font></font>
</td></tr></table>
</body></html>
|
|
