Lehet, hogy titeket már elgondolkodtatott a kérdés, hogy lehet-e egyszerre több képes linkeffektet használni egy oldalon. Hát, természetesen lehet, én is kettőt használok, egyet a sima linkelt képeknek, és egyet a cseréknek. Ez a kis egyszerű tutorial most meg fogja mutatni, hogy készíthettek kettőt.

 

Először is, ehhez a CSS kódjaidhoz kell lépned, és keresd meg a linkeffekt kódodat. Kis segítség: a: link img{-vel vagy a:img{-vel kezdődik, a második tagja pedig a:hover img{. Ezeket töröld is ki, most megcsináljuk az elsődleges képeffekt kódot. Pontosan így csináld:

a: link img{ / a:img{ helyett --> img.linkes{ lesz az új kód!
a:hover img{ helyett --> img.linkes:hover{

Fontos, hogy jegyezd is meg, milyen nevet adtál neki. Én most azért azt adtam, hogy linkes, mert a sima linkelt képeknek ez lesz az azonosítójuk. Fontos, hogy jegyezd meg, mit írsz a helyére! Meg tudod persze nézni, de sokkal egyszerűbb lesz, ha tudod. Akkor, meg is van az elsődleges effektünk.

 

Nekem így néz ki:

img.linkes{
background: url('http://cherryuniverse.tk/dizi/17/linkes02.png');
background-position: top left;
padding: 8px;
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition:.5s ease-out;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}

img.linkes:hover{
background: url('http://cherryuniverse.tk/dizi/17/linkes03.png');
background-position: bottom right;
padding: 8px;
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition:.5s ease-out;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}

Kimásolhatod az én kódomat is, ha nem akarod megtartani a régi kódodat. De ha meg akarod, nyilván az eddig írtak alapján kellett kicserélned. Ha kimásoltad, illeszd is be alá ugyanezt. Csak most más legyen az azonosítókód. Ha a cserékhez fogod rakni az új kódot, akkor legyen .affi. Tehát az új változat így fog kinézni, miután változtattam is a linkes kép hátterén, és még pár dolgon:

img.affi{
background: url('http://cherryuniverse.tk/dizi/17/linkes.png');
background-position: top right;
padding: 10px;
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition:.5s ease-out;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

img.affi:hover{
background: url('http://cherryuniverse.tk/dizi/17/linkes.png');
background-position: bottom left;
padding: 10px;
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition:.5s ease-out;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

Ebben a kódban az a más, hogy más a kódjának a neve ugye, a háttér más, és lekerekített. Ha kell, ezt is másolhatod magadnak. Tehát az CSS-ek kódja: linkes és affi. Jegyezd meg, mert ezeket kell beilleszteni a HTML kódba!

Kövess:

<img src="http://cherryuniverse.org/images/banner.png" class="linkes">

Vagyis a class=”_” kódba kell beillesztened az azonosítót! Ezt persze mindig külön be kell majd írnod minden egyes képhez, aminek akarsz képeffektet. Az is jó benne, hogy ezzel a sima képeknek is tudsz képeffektet adni, nem csak a linkelteknek. Ezért is szeretem én is :) Ugye nem volt bonyolult? Mindenesetre, ha nem volt világos, kérdezni lehet :)


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *