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
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
81 napja
112 néző

WordPress themes

WordPress themes
82 napja
114 néző

G-Portál themes

G-Portál themes
82 napja
67 néző

Tumblr themes

Tumblr themes
82 napja
101 néző

Elit csere effekt szöveggel és képekkel
771 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