Can I make an image rollover that enlarges the image?

[mariko]

I want an image to "get bigger" when a mouse hovers over it. I've looked at some coding that uses CSS and HTML, and I'd need an source image that has both the small image and the large image. I don't understand how to set the CSS so that it actually picks up the image. Is there a better way or am I doing this correctly? I don't want to use javascript. One image is 500px by 655px and the other is 100px by 130px so the source image can either be 600px by 655px or 500px by 785px.

CSS

.rollover a {
display:block;
padding:10px 10px 10px 7px;
background: url("rollover-image.gif") 0 0 no-repeat;
}
.rollover a:hover {
background-position: 0 -35px;
}

HTML

<div class="rollover">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
</div>

[drjohn]

just change the image used in the hover bit

background: url("rollover-image2.gif") 0 0 no-repeat;

[mariko]

I can adjust the code to an extent, but I can't make the image appear when I use an external css stylesheet. Even when I can make it appear by using internal css script, I can't pull up only a piece of the source image-the whole thing comes up. I think that I'm missing the code that references the style.css page. Can you tell me what I'm missing and/or doing wrong?

I have this in the header:

<link href="style.css" rel="stylesheet" type="text/css">

And in the body I have this:

<div id="rollover">
<a href="#">Item 1</a>
</div>  

The CSS code I saved as style.css and it looks like this:

a.rollover {
    display: block;
    width: 500px;
    height: 785px;
    background: url("PonAndZiTwo.jpg") 0 -655px no-repeat;
    }

a.rollover:hover {
    background-position: 0 0 no-repeat;
    }