Rollover A Text Hyperlink To Become An Image

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

Solution 1:

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

html

<ahref = "#"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.

Solution 2:

You ca in do in a lots of ways, here is a CSS rough example, just to see the idea

try this

Solution 3:

This will make the link change to an image only when hovered, becomes text when hovering out (only CSS)

<style>.changeableimg
{
  display:none;
}
.changeable:hoverspan
{
  display:none;
}
.changeable:hoverimg
{
  display:inline-block;
}
</style><ahref="http://www.example.com"class="changeable"><span>Hyper Text</span><imgsrc="img.png" /></a>

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

<style>.changeableimg
{
  display:none;
}
</style><ahref="http://www.example.com"class="changeable"><span>Hyper Text</span><imgsrc="img.png" /></a><scripttype="text/javascript">
$('.changeable').hover(function(){
  $(this).children('img').show();
  $(this).children('span').hide();
})
</script>

Solution 4:

Here is a javascript way to do it

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

Solution 5:

Assuming HTML similar to the following:

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

The following JavaScript should work:

functiontextToImage(elem){
    if (!elem) {
        returnfalse;
    }
    else {
        var img = document.createElement('img');
        img.src = elem.href;
        elem.removeChild(elem.firstChild);
        elem.appendChild(img);
    }
}

JS Fiddle proof of concept.