photografx: Navigation/Rollover

Beitrag lesen

SELF-Forum

Navigation/Rollover

photografx Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo "Verzweifelter" ...

frag google einfach mal nach "CSS Rollover" .. da wirst du geholfen ...

oder schau dir das mal an :

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>CSS_Rollover</title>  
  
<style type="text/css">  
<!--  
  
a {  
display:block;  
width:200px;  
height:40px;  
background-image:url(button_bg.png);  
background-position:0px 0px;  
text-Align:center;  
padding: 10px 0px 0px 0px;  
font-family:"Arial Black", Helvetica, sans-serif;  
color: #000000;  
text-decoration:none;  
}  
  
a:visited {  
background-position:0px 0px;  
}  
  
a:hover {  
background-position:0px -50px;  
color:#0000CC;  
}  
  
a:active {  
height:35px;  
padding: 15px 0px 0px 0px;  
background-position:0px -100px;  
color: #ffffff;  
}  
  
-->  
</style>  
  
</head>  
  
<body>  
<h1>CSS_Rollover</h1><br />  
<br />  
<br />  
<a href="#">Klick Mich!</a>  
</body>  
</html>

hier in "Action" --> CSS_Rollover

Das Geheimnis ist simples CSS ... verwendet wird nur EIN Hintergrundbild .. und dieses wird je nach Status (:hover, :active ... ) verschoben ...
natürlich könntest du auch jedesmal auf eine neue date verweisen .. das hätte aber den Nachteil das der Browser das Bild erst laden muss und dein Besucher eine Verzögerung spürt.

In Mit dieser Variante wird gleich das Komplette hintergrundbild geladen ... sprich der Rollover funktioniert Ohne Verzögerung ...

Schönes Weekend

AlexxJ

Beitrag melden
–
Informationen zu den Bewertungsregeln