Question: how can i do this?

is it possible to have a text hyperlink and once its hovered over, that text link becomes an image?

iv seen image rollovers but haven't seen or know how to code text to image rollover yet. 

i just dont know where to begin and with what programming language. javascript? php? jquery?

i started of by using the following code: 

```
<a href = "#" onmouseover = "(document.img.src)='SAM_2251.jpg';">Mouseover here</a>

<img name = "img" alt = "" border = "0" />

```

but what this does is it keeps the text on screen whilst the image is loaded below it. i want the text to completely get rid off by the image. 

any help guys? thanks so much in advance.

Answer: 
You can do it using just html and a css background image:

html

```
<a href = "#" class="hover_image">Mouseover here</a>

```

css

```
a.hover_image:hover {
    background: url(/url/to/image) no-repeat center center;
    text-indent: -9999em;
}

```

You probably need a bit more css to define the width and height of the `a` tag, but this is the basics.
Here is a javascript way to do it

```
    <div id="link">    
    <a href = "#" onmouseover = "document.getElementById('link').style.display='none';document.getElementById('hoverImage').style.display='block';;">Mouseover here</a>  
</div>
<div id="hoverImage" style="display:none">
    <img name = "img" alt = "" border = "0" src="img.JPG" onmouseout = "document.getElementById('link').style.display='block';document.getElementById('hoverImage').style.display='none';;" />    
</div>

```