Neko

Erre a kódra is volt már nem egy kérdés, hogy hogyan lehet létrehozni.
Nekem egyszerűnek tűnik a dolog, de ugye akadnak olyanok is, akik most kezdik a honlap építését, így nekik lehet jól fog jönni ez a leírás.
Most egy komplett elit csere doboz kódjáról írok. Méghozzá erről:

Ez tartalmazza a táblázatkódot, a linkelést, a css kódot és azt a kódot is, amitől előjön egy kis szövegbuborék, ha a képre viszed az egeret :)
A következő kódokat mind másold be az egyszerű modulod bal vagy jobb oldalába, attól függően, hogy hol lesz az elit csere dobozod. De a kódok közül nem muszáj pl. a CSS részét felhasználni, ha nem tetszik. Vagy írd át a saját stílusoddá.

1. táblázat kód a képekkel és azok linkelésével

Ebben a kódban ez az 1 darab elit csere képének és linkjének a kódrészlete. Itt, amit kiemeltem részeket lejjebb találod a magyarázatot hozzájuk.

<a href="//nessastar.gportal.hu/" onmouseout="hideddrivetip()" onmouseover="ddrivetip('Vanessa Hudgens')" target="_blank"><img src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1344063138_72.png" style="width: 50px; height: 50px;" /></a>

1. //nessastar.gportal.hu/ : Ide kell beírnod a cseréd oldalának a címét.
2. Vanessa Hudgens: A zárójelben lévő szöveg fog megjelenni, ha ráviszed a képre az egeret.
3. //aranymeli.gportal.hu/portal/aranymeli/image/gallery/1344063138_72.png: Ez a cseréd képének az URL címe. Ahova a képet feltöltötted.

2. CSS kód

<style type="text/css">
a:link img, a:visited img {
    background-color: #ffffff; /*képed keretének a színe*/
    padding: 4px; /* a keret szélessége */
    border: 0px;
    box-shadow: #a3a3a3 1px 1px 2px; /* árnyék a kép alá */
    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: 4px;
    border: 0px;
    box-shadow: #a3a3a3 1px 1px 2px;
    filter: alpha(opacity=80); /* Kép elhalványítása */
    opacity: .8;
}

/* a buborék css-e */

#dhtmltooltip{
    font-size: 10px; /* betű mérete */
    color: #999999; /* betű színe */
    position: absolute;
    width: 150px; /* buborék szélessége */
    border: 0px solid #D3DCCD;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #ffffff; /* buborék színe */
    visibility: hidden;
    z-index: 100;
    text-align: center;
    -moz-border-radius: 1em 0em 1em 0em; /* firefox */
    -webkit-border-radius: 1em 0em 1em 0em; /* chrome */
    border-radius: 1em 0em 1em 0em; /* opera */
/*eddig változtathatod*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
--></style>

3. Javascript kód ahhoz, hogy a buborék megjelenjen a képeknél, ha ráviszed az egeret.

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

Frissítés

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