Zamenjava slike s pomočjo CSS HOVER

zamenjava_slike_hoverKo 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:

{iframe height="150" frameborder="0" width="216" scrolling="no" style="background-color:#FFF;" border="0" name="form" allowtransparency="false" margin-left="20px"}/css_primeri/primer_24/css_primer_24.html"{/iframe}
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č.

 

{jgototop}{/jgototop}

 

Vsi vodiči so na voljo BREZPLAČNO!
Pišite mi

Želite mnenje ali pomoč pri vašem projektu?

Pišite mi in bom pomagal, kakor bom v tistem trenutku lahko.