Deus Figendi: Lupe- Funktion

Beitrag lesen

SELF-Forum

Lupe- Funktion

Deus Figendi
– Informationen zu den Bewertungsregeln

Relativ einfache Nummer, du verwendest einfach die :hover-Pseudoklasse und:

(...)

~ oder du vergrößerst ein Block-Element dessen Hintergrundbild du austauscht.

Hier, etwa so:

<html>  
<head>  
	<title>Lupe</title>  
 <style type="text/css">  
  div.bild {  
   background-image:url(http://t3.gstatic.com/images?q=tbn:TWTvCcS8VzEw4M:http://www.tempolimit-lichtgeschwindigkeit.de/galerie/sl218.jpg);  
   background-repeat:no-repeat;  
   width:150px;  
   height:120px;  
   border-style:solid;  
  }  
  div.bild:hover {  
   background-image:url(http://www.tempolimit-lichtgeschwindigkeit.de/galerie/sl218.jpg);  
   width:750px;  
   height:600px;  
  }  
  
 </style>  
</head>  
<body>  
  <div class="bild"></div>  
</body>  
</html>

Ich habe jetzt ein recht großes Bild genommen, damit man den Ladezeit-Nachteil auch sieht, aber so in etwa könnte es funktionieren.
Allerdings kann man es mit CSS2.1 nicht skalieren, also die Box müsste dann (anders als in diesem Beispiel) so groß wie das Bild sein.
Die Ladezeit-Sache dürfte bei Breitbandanschlüssen aber kaum auffallen.

--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
Beitrag melden
–
Informationen zu den Bewertungsregeln