Én ezt úgy szoktam megoldani, hogy nem használok image-tag-et hanem az "a" tag-nek adom meg background-nak a képet, ami ráadásul általában sprite.
Az esetedben a html így néz ki:
<div id="picsleft">
<br>
<h2>A szerzõrõl</h2>
<br>
<a id="galeria_link" href="galeria.html" >A szerzõrõl</a></div>
A CSS pedig így:
#galeria_link {
display: block;
width: x px; /* x = A képed szélessége px-ben */
height: y px; /* y = A képed magassága px-ben */
background: url(images/pics2.jpg) 0 0 no-repeat;
text-indent: -9000px; /*feliratot eltûntetjük, hogy csak az extra nagy monitorosok lássák :P */
text-decoration: none;
}
#galeria_link:hover {
background: url(images/a_masik_kep.jpg) 0 0 no-repeat; /*ide kerül a hover effektes kép url-je*/
}
Ez sprite nélkül van.
A spritenak annyi a lényege, hogy egy képen van rajta mindkét állapot, és hovernél csak a background positiont tolod el.
Pl. ha van egy 200x100-as képed (aminek 2 állapota van) akkor a forrás file-od pl:200x200-as lesz. Így egymás alatt fog elhelyezkedni az eredeti, és a hoveres állapot. Fontos megadni a width:200px; height:100px-elt. A hover állapotnál meg annyi a változás, hogy:
background: url(images/pics2.jpg) 0 -100px no-repeat; sorod lesz.
Itt a "-100px"-ellel tolod el a képet.
Nagyjából ennyi. Spriteok nélkül egyszerûbb, viszont spriteok használatával picit letudod csökkenteni a betöltési idõt. :)