Considering the code below.
Adapting this part of the code from meyerweb.com to my own use, I was
playing around with some values and came up with an interesting result I
like.
Copy and paste the code and try it out and you'll see what I mean.
The problem is, somehow in the coding, my thumbnails can not be presented as
they are given.
The dimensions of the thumbnails are totally dependent upon the fixed value
of the height in the first line.
I would like to show the thumbnails in their original sizes, but can't seem
to figure it out.
Using the code as is presents problems for showing the thumbnails as they
should be.
Setting a fixed height and width, causes some images to be shown out of
whack.
What can be done to correct this problem?
div#links { width: 166px; height:600px; font: 13pt Arial, Verdana,
sans-serif; }
div#links a {display: block; text-align: left; font: bold 1em Arial,
sans-serif;
padding: 5px 5px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #FFC; background: #F44;
}
div#links a:hover {color: #F11; background: #AAA;
border-right: 5px double white;}
div#links a img { height:0px; width:0px; border-width: 0;}
div#links a:hover img { width:100px; height:60px;}
<div id="links">
<a href="#">Bar Red<img src="images/thmb001.jpg"></a>
<a href="#">Cat's Eye Nebulae<img src="images/thmb002.jpg"></a>
<a href="#">Magellanic Cloud<img src="images/thmb003.jpg"></a>
</div>
