Navigáció képekkel

Minden kiskép, egy - egy különálló html fájlra utal.
Minden html fájlban, el kell helyezni az összes kisképet, így könnyen mozoghatunk egyik html fájlról a másik html fájlra.
Minden egyes html fájlban a rá jellemző nagyképet helyezzük el.
A html fájlokban nem csak nagyképet jeleníthetünk meg, hanem leírásokat is.

Az XHTML lap tartalmát, minden egyes html fájlba be kell írni
A stílus-meghatározásoknak elég egy CSS fájl, és ezt használja az összes html fájl.

Baloldali kisképek megírása XHTML lapon

<div id="kiskepek">
<a href="#"><img src="images/xxxx_75x75.jpg" alt="xxxx" width="75" height="75" /> <br />
A mészkő</a> <br />
<a href="#"><img src="images/xxxx_75x75.jpg" alt="xxxx" width="75" height="75" /> <br />
Este</a> <br />
<a href="#"><img src="images/xxxx_75x75.jpg" alt="xxxx" width="75" height="75" /> <br />
Takarékos</a> <br />
<a href="#"><img src="images/xxxx_75x75.jpg" alt="xxxx" width="75" height="75" /> <br />
Juhász</a> <br />
<a href="#"><img src="images/xxxx_75x75.jpg" alt="xxxx" width="75" height="75" /> <br/>
Virág</a>
</div>

Nagykép vagy szöveg, megírása XHTML lapon
A kék színnel kiemelt meghatározásoknak, az adott html fájlra jellemző kép elérési útját kell beírni.

<div id="nagykep">
<img src="images/xxxx_600x330.jpg" alt="xxxx" width="600" height="330" class="foto" />
</div>

Baloldali kisképek meghatározásai CSS lapon

#kiskepek {float: left; width: 150px; margin-top: 10px; position: relative; margin-bottom: 30px; text-align: center; border-right: 1px solid black; }
#kiskepek img {border: 0px; margin-top: 10px;}
#kiskepek a:active {font-size: 90%; color: #369; text-decoration: none;}
#kiskepek a:hover { color: #C36; background: aqua;}

Nagykép meghatározásai CSS lapon

#nagykep {margin-left: 160px;}
.foto { float: left; margin-right: 2px; margin-bottom: 5px; margin-left: 2px;}