2018. 05. 12.Videó | Kép élénkítése Photoshop-ban
2018. 05. 05.ColorCop színlopó program
2018. 04. 30.Coppermine | Kép és fájlméret megadása az indexképek alatt
2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
Coppermine Gallery themes

Coppermine Gallery themes
316 napja
721 néző

WordPress themes

WordPress themes
317 napja
206 néző

G-Portál themes

G-Portál themes
317 napja
117 néző

Tumblr themes

Tumblr themes
317 napja
169 néző

Elit csere effekt szöveggel és képekkel
1 000 megtekintés

Kaptam már kérdést arról, hogy hogyan lehet azt megcsinálni, hogy az elit cserék szöveggel vannak kiírva és amikor rávisszük az egeret, akkor a szöveg helyett képeket mutat. Nos mivel nem láttam sehol sem ilyen elit csere kódot, így írtam egy egyszerűt. Valószínű, hogy más megoldás is van rá, de nekem ez volt a legkézenfekvőbb megoldás és egyszerű is a használata, ha valaki némileg már ért a kódoláshoz is. De ha elakadtok, akkor nagyon szívesen segítek benne :) Akkor lássuk a demót és a kódot:

 

Div kód

 

<div id="elitbox">
<a class="pictext" href="/" target="_blank">elit csere</a> <a class="pictext1" href="/" target="_blank">link csere</a> <a class="pictext2" href="/" target="_blank">affi csere</a> <a class="pictext3" href="/" target="_blank">társ csere</a>
<br>
<a class="pictext" href="/" target="_blank">elit csere</a> <a class="pictext1" href="/" target="_blank">link csere</a> <a class="pictext2" href="/" target="_blank">affi csere</a> <a class="pictext3" href="/" target="_blank">társ csere</a>
</div>

 

Minden új cserénél új ilyen sort kell a végéhez hozzáadni, és mindig megszámozni a következő sorszámmal.
<a class=”pictext2” href=”itt a perjel helyére jön az oldal linkcíme” target=”_blank”>elit csere</a>
Egymás után annyi ilyet kell egymás mellé tenni, amennyi kép lesz egy sorban. Ezután egy <br> taggal sortörést kell csinálni és új sorban jöhetnek a következő képek, ahogy a DIV minta kódban is látjátok fentebb.

 

CSS kód

 

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,600&subset=latin-ext');
#elitbox {
margin: 0px auto;
width: 470px;
height: 210px;
}
a.pictext, a.pictext1, a.pictext2, a.pictext3 { /* a szöveg kinézete, elhelyezkedése */
font-family: 'Fira Sans Condensed', sans-serif;
font-size: 13px;
font-weight: 400;
color: #ffffff;
text-align: center;
background: #CFC8E6;
outline: 1px solid #ffffff;
outline-offset: -5px;
padding: 37px 10px 0 10px;
width:80px;
height:63px;
float: left;
margin-left: 5px; /* a két ikon közötti távolság */
margin-bottom: 5px;
}
/* a képek URL címei külön-külön */
a.pictext:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/003.png);
}
a.pictext1:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/005.png);
}
a.pictext2:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/002.png);
}
a.pictext3:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/004.png);
}
</style>

 

A CSS kódban ebben a sorban vannak a szöveg kinézetei és elhelyezkedése. Háttérszíne, stb.
a.pictext, a.pictext1, a.pictext2, a.pictext3 { /* a szöveg kinézete, elhelyezkedése */
Minden új a.DIV alkalmával ide is be kell írni az új pictext-et az új sorszámával vesszővel elválasztva!!!!!!!!!!!!

 

Az a.pictext:hover részhez pedig egy új ugyanilyen sort kell másolni, csak minden új sorban az aktuális kép URL címét kell bemásolni!!!!!!!!!!!!!!!!!!!!!!! A számsort sem szabad minden újnál elfelejteni, hogy tudjon mihez hivatkozni a hover effekt.
a.pictext3:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/004.png);
}




Előző, következő cikk



Mára elkészítettem még kettő darab G-Portálos kinézetet. Valahogy mostanában ehhez van kedvem. Mondjuk nem tudom, hogy Kylie Jenner mennyire lehet nagy szám nálunk, de tetszenek a fotósorozatai, így az egyik kinézetnél rá esett a választásom a fejlécet illetően. Amiben

Hasznosabb kódokat már jó régen nem hoztam, így ma összedobtam három féle új script-et. A kódok előnézeti képei láthatóak a kiemelt képen. Kettő darab project dobozt készítettem. Ebből az egyik már megvolt, csak a CSS részét írtam át és

 



Hozzászólások