Az oldal menüje
 
Az év weboldala - 2013


Photoshop leírások

Ikonbázis
Galéria
 

 
Címkék

A blogban leggyakrabban használt címkék

 

Neko

Képeffektek
Képeffektek : Több képeffekt egy oldalon

Több képeffekt egy oldalon


Páran kérdeztétek már, hogyan lehet azt megoldani, hogy ha használsz pl. egy képeffektet linkelt vagy nem linkelt képnek, akkor legyen olyan kép, amire az a kód nem hat. Megpróbálom egyszerűen elmagyarázni. Aki ért a kódokhoz, azoknak ez egy egyszerű leírás, míg akik nem annyira értenek hozzá, azoknak lehet kicsit bonyolult lesz majd. A példámban a linkelt képekről lesz szó először is. De ez a kód a nem linkelt képeknél is alkalmazható.

Szóval ez a CSS kódja a linkelt képeknek. Ha ezt a kódot használod, akkor a linkelt képeid mint ilyenek lesznek. Vagy amilyen a te kódod, mindegy.

<style type="text/css">
a:link img, a:visited img {
    background-color: #D9D5D5;
    padding: 6px;
    border: 1px solid #B781C0;
    filter: alpha(opacity=100); /* Kép elhalványítása */
    opacity: 10; /* Kép elhalványítása */
}
a:hover img {
    cursor: default;
    background-color: #ffffff;
    padding: 6px;
    border: 1px solid #C69CCD;
    filter: alpha(opacity=80); /* Kép elhalványítása */
    opacity: .8;
}
--></style>


De te azt szeretnéd, hogy némelyik linkelt kép ne vegye fel a CSS kódot, akkor ezt kell tenned:
Illeszd be a képet a modulodba. A forráskódban keresd ki a kép kódját. Lentebb látható.

<a href="//aranymeli.gportal.hu" target="_blank"><img src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1261860953_92.jpg" style="width: 400px; height: 300px;" /></a>

Ehhez kell külön egy CSS-t készíteni. De hogy hasson is a CSS a képre, a kódban kell egy kis változtatás. Kijelöltem, amit be kellene illeszteni a forráskódban a kép kódjába:
<a href="//aranymeli.gportal.hu" target="_blank"><img class="imagedifferent" src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1261860953_92.jpg" style="width: 400px; height: 300px;" /></a>

Ez az a rész, amit be kell illeszteni: class="imagedifferent". Az imagedifferent helyett bármit írhatsz. A lényeg az, hogy a CSS kódnak ugyanaz legyen a neve, mint amit a macskakörömbe írtál. De legyen előtte egy pont is.
És akkor a CSS kód hozzá:

<style type="text/css">
.imagedifferent {
    background-color: #D9D5D5;
    padding: 6px;
    border: 1px solid #B781C0;
    filter: alpha(opacity=100); /* Kép elhalványítása */
    opacity: 10; /* Kép elhalványítása */
    -webkit-transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -o-transition:.5s ease-out;}
.imagedifferent:hover {
    cursor: default;
    background-color: #ffffff;
    padding: 6px;
    border: 1px solid #C69CCD;
    filter: alpha(opacity=80); /* Kép elhalványítása */
    opacity: .8;
    -moz-transform: rotate(2deg); /* mennyit mozduljon a kép */
    -o-transform: rotate(2deg); /* mennyit mozduljon a kép */
    transform: rotate(2deg); /* mennyit mozduljon a kép */
    -webkit-transform: rotate(2deg); /* mennyit mozduljon a kép */
    -webkit-transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -o-transition:.5s ease-out;
}
--></style>


Ugyanígy kell a nem linkelt képeknél is:
<img class="imagedifferentnolink" src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1261860953_92.jpg" style="width: 400px; height: 300px;" />


Akkor a CSS kód ilyesmi

<style type="text/css">
.imagedifferentnolink {
     background-color: #ffffff;
     border: 0px;
     box-shadow: none;
     filter: alpha(opacity=100); /* Kép elhalványítása */
     opacity: 10; /* Kép elhalványítása */
     background: url('//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1341329024_93.gif');
     opacity: 0.80;
     padding: 5px;
.imagedifferentnolink:hover {
    cursor: default;
    background-color: #FF6CA4;
    border: 0px;
    box-shadow: none;
    filter: alpha(opacity=80); /* Kép elhalványítása */
    opacity: .8;
    padding: 5px;
    opacity: 0.99;
}
--></style>

Még nincs hozzászólás.
Csak regisztrált felhasználók írhatnak hozzászólást.
 

Ha te is könyvkiadásban gondolkodsz, ajánlom figyelmedbe az postomat, amiben minden összegyûjtött információt megírtam.    *****    Nyereményjáték! Nyerd meg az éjszakai arckrémet! További információkért és játék szabályért kattints! Nyereményjáték!    *****    A legfrissebb hírek Super Mario világából, plusz információk, tippek-trükkök, végigjátszások!    *****    Ha hagyod, hogy magával ragadjon a Mario Golf miliõje, akkor egy egyedi és életre szóló játékélménnyel leszel gazdagabb!    *****    A horoszkóp a lélek tükre, nagyon fontos idõnként megtudni, mit rejteget. Keress meg és nézzünk bele együtt. Várlak!    *****    Dryvit, hõszigetelés! Vállaljuk családi házak, lakások, nyaralók és egyéb épületek homlokzati szigetelését!    *****    rose-harbor.hungarianforum.com - rose-harbor.hungarianforum.com - rose-harbor.hungarianforum.com    *****    Vérfarkasok, boszorkányok, alakváltók, démonok, bukott angyalok és emberek. A világ oly' színes, de vajon békés is?    *****    Az emberek vakok, kiváltképp akkor, ha olyasmivel találkoznak, amit kényelmesebb nem észrevenni... - HUNGARIANFORUM    *****    Valahol Delaware államban létezik egy város, ahol a természetfeletti lények otthonra lelhetnek... Közéjük tartozol?    *****    Minden mágia megköveteli a maga árát... Ez az ár pedig néha túlságosan is nagy, hogy megfizessük - FRPG    *****    Why do all the monsters come out at night? - FRPG - Why do all the monsters come out at night? - FRPG - Aktív közösség    *****    Az oldal egy évvel ezelõtt költözött új otthonába, azóta pedig az élet csak pörög és pörög! - AKTÍV FÓRUMOS SZEREPJÁTÉK    *****    Vajon milyen lehet egy rejtélyekkel teli kisváros polgármesterének lenni? És mi történik, ha a bizalmasod árul el?    *****    A szörnyek miért csak éjjel bújnak elõ? Az ártatlan külsõ mögött is lapulhat valami rémes? - fórumos szerepjáték    *****    Ünnepeld a magyar költészet napját a Mesetárban! Boldog születésnapot, magyar vers!    *****    Amikor nem tudod mit tegyél és tanácstalan vagy akkor segít az asztrológia. Fordúlj hozzám, segítek. Csak kattints!    *****    Részletes személyiség és sors analízis + 3 éves elõrejelzés, majd idõkorlát nélkül felteheted a kérdéseidet. Nézz be!!!!    *****    A horoszkóp a lélek tükre, egyszer mindenkinek érdemes belenéznie. Ez csak intelligencia kérdése. Tedd meg Te is. Várlak    *****    Új kínálatunkban te is megtalálhatod legjobb eladó ingatlanok között a megfelelõt Debrecenben. Simonyi ingatlan Gportal