Imagine redimensionata & popup cu dimensiunile originale

Scris de Matei la data de Joi Mar 11, 2010 9:12 am

Imagine redimensionata si la trecerea cursorului apare popup cu dimensiunile originale

[Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine] De stiut: Acest cod nu funcţionează intr-o noua pagina HTML daca optiunea "Doriti sa utilizati partea de sus si de jos a paginii forumului dvs.?" este bifata cu "Nu"

Ok , deci pentru a face toata treaba asta avem nevoie de doua coduri :
[Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine] Cod CSS
[Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine] Cod HTML

Pentru ca totul sa functioneze avem nevoie de codul css ( vezi in spoiler )

Spoiler:: Panou de administrare - Afisare - [Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine] Imagini si culori - Culori - Foaie de stil CSS
Copiem Codul :

.gallerycontainer{
position: relative;

}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
Inregistrare

Ok , dupa ce am copiat codul in foaia de stil css ne trebuie codul HTML ( vezi in spoiler )

Spoiler:

Cod:: <a class="thumbnail" href="link site"><img src="Link Imagine" width="100px" height="66px" border="0" /><span><img src="Link Imagine" /><br />Text</span></a>

Acest cod html poate fi introdus "Mesaj pe pagina de start" , in descrierea unei categorii etc.

[Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine] Previzualizare

Tutorial realizat de Matei