Ok so what you are saying is that you would like a link using an image that changes when you roll over it with your mouse?
Here is how I would do it
In your html for the index page put something along the lines of this:
<div class ="enter">
<a class="r" href="home.html"> </a>
</div>
where the green is the next page you are linking to and the red is the class you will reference in your css (I'm assuming you have an external css page here. If not, you should make one.)
Then in your css you should add something like this:
.r {
display: block;
background-image: url(image.png);
width: 650px;
height: 250px;
}
.r:hover {
background-image: url(image2.png);
width: 650px;
height: 250px;
}
where the green would be the images that you are referencing. The second one I called 'image2.png' is the one that will appear in the mouse hover state.
You should obviously adapt this code to fit your page so that the layout, design, etc are what you want. Note that the image sizes are just there to remind you that you should constrain the image size using css to help with layout, just set them to what you need.
Also note that using the div class 'enter' around the link will allow you to have more freedom when moving it around which is why I put it there. It may be that you don't need it at all, it would depend on the rest of your page.
