Neko

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>

Súgó Még nincs hozzászólás.

Frissítés

Csak regisztrált felhasználók írhatnak hozzászólást.