|
 Ko greste z miško čez se slika spremeni!
V tem vodiču bom z vami delil CSS kodo, ki nam omogoča, da se slika zamenja, ko greste z miško čez. To naredi spletno stran bolj dinamično, aktivno in zanimivo.
Isti efekt bom prikazal s tabelo in z okvirjem.
*(Potrebni sta dve različni sliki)
Prikaz:
1. CSS hover zamenjava slike v TABELI
CSS in HTML koda:
<html>
<head>
<style type="text/css">
.zamenjava a {
display:block;
background:url(ozadje.gif);
height: 100px;
width: 100px;
}
.zamenjava a:hover {
background:url(ozadje2.gif);
}
</style>
</head>
<body>
<table>
<tr>
<td class="zamenjava"><a href="#"></a></td>
</tr>
</table>
</body>
</html>
PRIKAZ!
Obrazložitev:
Tukaj se zamenja ozadje celice, ko greste z miško čez celico.
.zamenjava a (zamenjava je ime stila, a določa stil povezave)
Vrstica display:block; mora biti nujno prisotna, drugače koda ne deluje oz. se slika v ozadju ne prikaže.
Vrstica background: url('/ozadje.gif') je del kode, ki določa pot do slike, ki jo bomo uporabili za ozadje. Lastnosti ozadja v CSSju si lahko podrobneje ogledate tukaj.
Height in Width določita višino in širino celice. V tem primeru sta širina in višina enaka širini in višini slike.
.zamenjava a:hover
a:hover predstavlja stanje povezave in njene lastnosti, ko je miška nad njo. Več o povezavah si oglejte tukaj.
ozadje2.gif je ime slike, ki se pokaže namesto slike ozadje.gif.
2. CSS hover zamenjava slike v OKVIRJU
CSS in HTML koda:
<html>
<head>
<style type="text/css">
.zamenjava a {
display:block;
background-image:url(ozadje.gif);
height: 100px;
width: 100px;
}
.zamenjava a:hover {
background-image:url(ozadje2.gif);
}
</style>
</head>
<body>
<div class="zamenjava">
<a href="#"></a>
</div>
</body>
</html>
PRIKAZ!
Tukaj se menja ozadje izbranega okvirja, medtem, ko ste z miško nad okvirjem (div).
Upam, da vam bo koda menija in vodič v čim večjo pomoč.
|
