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: 
This will make the link change to an image only when hovered, becomes text when hovering out (only CSS)

```
<style>
.changeable img
{
  display:none;
}
.changeable:hover span
{
  display:none;
}
.changeable:hover img
{
  display:inline-block;
}
</style>
<a href="http://www.example.com" class="changeable"><span>Hyper Text</span><img src="img.png" /></a>

```

Or if you want the link to permanently change to image (with jQuery)

```
<style>
.changeable img
{
  display:none;
}
</style>
<a href="http://www.example.com" class="changeable"><span>Hyper Text</span><img src="img.png" /></a>

<script type="text/javascript">
$('.changeable').hover(function(){
  $(this).children('img').show();
  $(this).children('span').hide();
})
</script>

```
Assuming HTML similar to the following:

```
<a href="http://www.example.com/image.png" class="textToImg">Some text</a>

```

The following JavaScript should work:

```
function textToImage(elem){
    if (!elem) {
        return false;
    }
    else {
        var img = document.createElement('img');
        img.src = elem.href;
        elem.removeChild(elem.firstChild);
        elem.appendChild(img);
    }
}

```

[JS Fiddle proof of concept](http://jsfiddle.net/davidThomas/7cUEK/).