0

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.

3
  • 2
    not even Chuck Norris can do this with PHP, (that language is server-side)
    – ajax333221
    Apr 24, 2012 at 23:59
  • Lol... May be David copperfield can do it.
    – The Alpha
    Apr 25, 2012 at 0:02
  • 1
    @ajax333221: Chuck Norris can do a cross-domain ajax request without CORS
    – qwertymk
    Apr 25, 2012 at 0:02

6 Answers 6

3

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.

2

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

try this

1
  • yh its nice but the text link contains a hyperlinked border! is there anyway i can remove that? Apr 25, 2012 at 0:21
1

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>
0
0

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>
2
  • thank you, it works! how do i code it so when the mouse is not hovering over the image, the text comes up and the image dissappears? Apr 25, 2012 at 0:17
  • I have edited the answer to include the feature for getting the text back. Apr 25, 2012 at 0:35
0

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.

0

This can also be done with jQuery:

See In Action

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>
<script type='text/javascript'>
$( function() {
  $("#imglink").hover(
    function () {
      $(this).attr('small',$(this).html());
      $(this).html($(this).attr('full'));
    },
    function () {
       $(this).html($(this).attr('small'));
    }
  );
});
</script>

<a herf="" id='imglink' full='<img border="0" src="someImage.png" width="163" height="37"/>'>Rollover for image 'n' rollout for text</a>

</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.