Sposób na obrazki

Jeśli potrzebujemy czasami zrobić galerię obrazków na stronie, by stały sobie w równych rządkach miniaturki które powiększają się przy kliknięciu, to chciałem pokazać mój sposób. Co cechuje ten sposób i dlaczego go polecam? - Prosty kod, już chyba prościej sie nie da.

W pierszym kroku robimy paragraf tekstowy <p> i wkładamy w niego obrazeki (ja wkładam te same obrazki, bo to tylko przykład. Ty powkładasz swoje rózne.)

Cały kod wygląda tak:

<p class="galeria01">

<img src="img/most-m.jpg" >

<img src="img/most-m.jpg" >

<img src="img/most-m.jpg" >

<img src="img/most-m.jpg" >

<img src="img/most-m.jpg" >

<img src="img/most-m.jpg" >

</p>

+ CSS


.galeria01 { background-color:#ddc;}

.galeria01 img { margin: 20px; border:4px solid #fb6;}

Ustalenie BACKGRUND dla naszej galeri i BORDER dla obrazkw niekońieczne, chodzi o MARGIN który pozwoli rozstawić obrazki, a rozstaw ten zmieniając wielkość MARGIN możemy zgrabnie dostosowywać.

Żeby jednak móc takie obrazki podpisać i coś jeszcze, lepiej zbudować taką galerię na DIV-ach teraz kod wygląda mniej więcej tak tak:

<div class="galeria02">

<img src="img/most.jpg" >

...

Most

Warszawa

Styl

Rzeka

To ten !!!

Wisła

A teraz najedź myszką na obrazek podpisany "To ten !!!" Powinien się powiększyć (zwlaszcza w FF) Można też w niego kliknąć by otworzył się w nowym oknie (zwlaszcza w IE) sztuczka polega na dopisaniu w stylach.

.galeria02 a:hover{ width:200%; position: relative; z-index:20; display: block; margin:-50px 0 5px -50px; }