Rollover Text on Images

Here are two ways to do image rollovers. One is pure CSS and the other uses javascript. You can view them here.

The CSS version uses a background image and the hover is a transparent png with just the text in it.

The javascript version swaps out images on rollover and click.

<style type="text/css">

.image {
    height:300px;
    width:500px;
    display: block;
    float:left;
    clear: left;
    margin-top:20px;
}

.rollover img {
    opacity: 0;
}

.rollover img:hover {
    opacity: 1.0;
}

</style>

<div class="image" style="background:url(Roscher_Photo_1.jpg);">
    <a class="rollover" href=""><img src="Roscher_Photo_1_Text.png" alt="Rollover text" /></a>
</div>

<div class="image">
    <a href="Roscher_Photo_1.jpg"
    onmouseover="if (document.images) document.imagename1.src='Roscher_Photo_1_Annotated.jpg';"
    onmouseout="if (document.images)  document.imagename1.src='Roscher_Photo_1.jpg';">

        <img src="Roscher_Photo_1.jpg" name="imagename1"
        alt="Moving the cursor over the image will bring up an annotated version.
        Clicking on the image will bring up the highest resolution version available.">
    </a>
</div>