CSS on mouse over - kun loade ved hover

Hej Eksperter!

Jeg har et CSS script der viser en større version af et billede når man fører musen over den lille version.

Jeg ville blot gerne have følgende modifikationer, som jeg ikke helt kan finde ud af selv at kringle.

Hvordan får jeg scriptet til først at loade det store billeder on hover? Jeg har ca. 150 billeder så det ville være dumt hvis alle billeder blev loadet på en gang!

En anden ting jeg gerne ville have var blot at billede poppede up ved mouse click i stedet for mouse hover. Noget siger mig det ikke ville være så svært?

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.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 on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>


<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" width="400" height="300" align="bottom" alt=""><br /></span></a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" width="400" height="300" align="bottom" alt=""><br /></span></a>