2014. május 1., csütörtök

HTML §7. | A kép alatt vagy felett szövegdoboz

Kedves Olvasóink!

E-mailben érkezett hozzánk a kérés Fannitól, hogy mutassuk meg mi a kódja annak, ha ráviszed a képre az egeret, akkor alatt megjelenik egy kis szövegdoboz! Úgy gondolom, hogy ez a kód mostanában eléggé népszerű, úgyhogy szerintem másoknak is hasznos lesz! A kód mellé adok néhány ötletet is, hogy miként alkalmazzátok! Ha valami mégsem sikerülne, akkor írjatok nyugodtan akár itt kommentben, akár e-mailben! A kódokat amúgy én magam is kipróbáltam és működik! :)

Csók,
Diana H.

------------------------------------------------------------------------------------------

Először is, kezdeném azzal, hogy ennek a kódnak két fajtája is van. Az egyik, amikor a szövegdoboz a kép alatt jelenik meg, a másik pedig, amikor a kép fölött. Én személy szerint jobban szeretem, amikor alatta van, mert az olvasók könnyebben görgetik lefelé az oldalt, s amikor fent jelenik meg, akkor néha a feljebb levő menükbe/képekbe/stb beleolvad és olvashatatlanná válik. Ez amúgy nem tudom miért van! De ettől függetlenül, használjátok bátran bármelyiket, mert minden az elrendezéstől függ!

A szövegdoboz a kép FELETT jelenik meg
(kódért köszönet az AranyMeliGp-nak)

<style type="text/css">
.imagecenter{
   position: relative;
   width: 260px; /* doboz szélessége */
   height: 100%; /* doboz magassága */
   text-align: center; /* dobozban a szöveg elrendezése */}
.imagecenter img{
   position: relative;
   -moz-transition: all 0.5s ease;}
.imagecenter:hover img{ /* linkre a kép */
    padding: 0px;
    filter: alpha(opacity=80); /* kép halványítása */
    opacity: 0.8; /* kép halványítása */ }
.imagecenter div.desc{ /* felugró doboz */
   position: absolute;
   width: 90%;
   bottom: 0;
   padding: 10px; /* a doboz és a széle közötti táv */
   background: #49CDAC; /* doboz háttérszíne */
   opacity: 0; /* Set initial opacity to 0 */
   -moz-border-radius: 0 9px 0 9px; /* keret */
   -webkit-border-radius: 0 9px 0 9px; /* keret */
   border-radius: 0 9px 0 9px; /* keret */
   -moz-box-shadow: 0 0 6px #858585; /* doboz árnyéka */
   -webkit-box-shadow: 0 0 6px #858585; /* doboz árnyéka */
   box-shadow: 0 0 6px #858585; /* keret árnyéka */
   -moz-transition: all 0.5s ease 0.5s;
   -webkit-transition: all 0.5s ease 0.5s;}
.imagecenter div.desc a{ /* link színe */
color: #F9D536;}
.imagecenter:hover div.desc{ /*a szöveg színe */
   color: #ffffff;
   opacity: 1;}
.imagecenter div.upslide{ /* a doboz felül */
   top:0;
   bottom:auto;
   padding-bottom:5px;
   -moz-border-radius: 0 9px 0 9px; /* keret */
   -webkit-border-radius: 0 9px 0 9px; /* keret */
   border-radius: 0 9px 0 9px; /* keret */}
.imagecenter:hover div.upslide{
   -moz-transform: translate(0, -100%);
   -webkit-transform: translate(0, -100%);}</style>
<div align="center">
<div class="imagecenter">
<img src="http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1280675881_72.png" />
<div class="desc upslide">
<u>Felugró szöveg a linkelt képre</u><br />
Vidd az egeret a kép fölé és olvasd el a felugró szövegben az adott információt a képről :) Több képeffekt itt található: <a href="http://aranymeli.gportal.hu/gindex.php?pg=35799854">Képeffektek</a></div>


A szövegdoboz a kép ALATT jelenik meg
(kódért köszönet az FuckinWayGp-nak)

<div class="imagepluscontainer" style="width:280px;  height:230px; z-index:2">
<img src="http://fuckinway.gportal.hu/portal/fuckinway/image/gallery/1345374365_55.png" />
<div class="desc">
Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged.
</div>
</div>
<br />
</div>
<style>
 
.imagepluscontainer{ 
position: relative;
z-index: 1;
}
 
.imagepluscontainer img{ 
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; 
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
 
.imagepluscontainer:hover img{ 
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
 
.imagepluscontainer div.desc{ 
position: absolute;
width: 90%;
z-index: 1; 
bottom: 0;
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); 
color: white;
-moz-border-radius: 0 0 8px 8px; 
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); 
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
 
.imagepluscontainer div.desc a{
color: white;
}
 
.imagepluscontainer:hover div.desc{ 
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}
 
 
.imagepluscontainer div.rightslide{
width: 150px; 
top:15px;
right:0;
left:auto; 
bottom:auto;  
padding-left:15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}
 
.imagepluscontainer:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
 
 
 
.imagepluscontainer div.leftslide{
width: 150px;  
top:15px;
left:0;
bottom:auto; 
padding-left:15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}
 
.imagepluscontainer:hover div.leftslide{
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform:translate(-100%, 0);
}
 
 
 
.imagepluscontainer div.upslide{
top:0;
bottom:auto;  
padding-bottom:10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
 
.imagepluscontainer:hover div.upslide{
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform:translate(0, -100%);
}
 
</style>

A kódokat egyszerűen csak másoljátok ki a kis szövegdobozból és illesszétek be a szokásos módon egy HTML modulba! Most nem emeltem kit, hogy min változtathattok, de ha valaki erre igényt tartana, akkor ismét csak azt mondom, hogy írjon nyugodtan! :)

A kódba található ez a rész: "<img src="http://fuckinway.gportal.hu/portal/fuckinway/image/gallery/1345374365_55.png" />", ez jelenti a képedet! Én azt javaslom, hogy a képet töltsétek fel képfeltöltés.hu-ra és onnan illesszétek be azt a kódba!

Mi is az a képfeltöltés.hu?
A képfeltöltés.hu egy olyan oldal, ahova mindenféle regisztráció nélkül tölthetsz fel kizárólag képeket, ezzel lényegében korlátlan tárhelyet biztosítva neked. A képeket egyesével tudod ugyan betallózni, de ez igazából nem vesz olyan sok időt igénybe. A feltöltött képeket, akár e-mailben is megkaphatod, de közvetlenül az oldalon is négyféle módon.

Hogy használjam az oldalt?
Mint azt már említettem, ha több képet szeretnél feltölteni, akkor azt csak egyesével tudod, de hidd el, megéri! Ami fontos, hogy a képedet mindenképpen akkora méretben töltsd fel, amekorra elfér az oldalsávodba (előtte tehát méretezd át valamelyik képszerkesztő segítségével)! Tallózd be azokat a képeket, amiket fel szeretnél tölteni. A 20.kép után látsz egy kis üres rublikát, oda beírhatod az e-mail címedet, ha a későbbiekben is el szeretnéd érni a képeket, de ez nem kötelező - tehát ez a művelet kihagyható! Utána nincs más dolgod, mint rányomni a 'Feltölt' gombra és egy kicsit várni. Miután a képek feltöltődtek, lejjebb kell görgetned az oldalt és megtalálod őket egyesével, mellettük pedig négyféle linkként. A mi esetünkben a 'Direkt link a képhez' kell. Kattints rá az előbb említett link alatt levő '
'Vágólapra másol' gombra. Ezzel kijelölted a linket, majd azt másold át a kódba. Figyelem! Csak a vastaggal kiemelt részt írd át a te képedre: "<img src="http://fuckinway.gportal.hu/portal/fuckinway/image/gallery/1345374365_55.png"/>"! Ezzel gyorsan és egyszerűen formálhatod át a saját elképzelésedre a képet, valamint sokkal szebben és élesebben jelenik meg az oldaladon az!
Ezt a folyamatot bármelyik olyan html kódnál alkalmazhatod, ahova képet kell beilleszteni!

Remélem tudtam segíteni! Ha bármi további kérdésetek van akár ezzel a kóddal, a képfeltöltés.hu-val vagy másik kóddal kapcsolatban, írjatok bátran! :)

5 megjegyzés:

  1. Válaszok
    1. Igen, giffel is tökéletesen működik! :)

      Törlés
    2. és ugyanúgy?:/ mert feltöltöttem, és lementettem a linkjét, meg minden, de azt írja a kép nem található:/

      Törlés
  2. Igen, ugyan úgy! A direkt linket másoltad be a kódba?

    VálaszTörlés
    Válaszok
    1. Igen, de azt írja ki, hogy a kép nem található. Ez mitől lehet?

      Törlés