滚动文本超链接以成为图像 [英] rollover a text hyperlink to become an image

问题描述

我如何做到这一点？

是否可以有一个文本超链接，一旦它的鼠标悬停，该文本链接成为一个图像？

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

iv看到的图像翻转，但没有看到或知道如何编码文本到图像翻转。

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

我不知道从哪里开始，用什么编程语言。 javascript？ php？ jquery？

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

我开始使用以下代码：

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

推荐答案

这将使链接只在悬停时变为图片，只有CSS）

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>

或者如果您想要将链接永久更改为image（使用jQuery）

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>

这篇关于滚动文本超链接以成为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！