rollover a text hyperlink to become an image
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.
6 answers
solution1
3 2012-04-25 00:06:48
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.
solution2
2 2012-04-25 00:04:57
You ca in do in a lots of ways, here is a CSS rough example, just to see the idea
solution3
1 ACCPTED 2012-04-25 00:17:03
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>
solution4
0 2012-04-25 00:06:07
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);
}
}
solution5
0 2012-04-25 00:10:37
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>
solution6
0 2012-04-25 00:12:33
This can also be done with jQuery:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.