When page loads display 1st image text - hide all other text

Question

Hi

I have created http://techavid.com/design/test3.html and when you load the page you see there are 3 images. The sun image is focused(in color), while the others are greyed out until clicked. That is how it should be for the images.

Also when you load the page you see under each image it's own text(i.e. 1st: Sun, 2nd: Airplane, 3rd: Nano), but on page load I only want 1st:Sun to display and hide all other text until their respective image is clicked.

Any idea how to do this?

thanks :) J

Answer 1

Give them a css class that makes them hidden or use jQuery and make them hidden (.hide()). On mouseover, change that .show()