0

我怎样才能做到这一点？

是否有可能有一个文本超链接，一旦它悬停在上面，那个文本链接就会变成一个图像？

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

我只是不知道从哪里开始以及使用什么编程语言。javascript？php? jQuery？

我开始使用以下代码：

<a href = "#" onmouseover = "(document.img.src)='SAM_2251.jpg';">Mouseover here</a>

<img name = "img" alt = "" border = "0" />

但这所做的是它在将图像加载到其下方时将文本保留在屏幕上。我希望文字完全摆脱图像。

有什么帮助吗？非常感谢。

4

6 回答 6

3

您可以只使用 html 和 css 背景图像来做到这一点：

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;
}

您可能需要更多的 css 来定义a标签的宽度和高度，但这是基础。

于 2012-04-25T00:06:48.093 回答
2

你可以在很多方面做，这里是一个 CSS 粗略的例子，只是为了看看这个想法

试试这个

于 2012-04-25T00:04:57.740 回答
1

这将使链接仅在悬停时更改为图像，在悬停时变为文本（仅 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>

或者，如果您希望链接永久更改为图像（使用 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>
于 2012-04-25T00:17:03.243 回答
0

假设 HTML 类似于以下内容：

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

以下 JavaScript 应该可以工作：

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 概念证明。

于 2012-04-25T00:06:07.467 回答
0

这是一种javascript方法

    <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>
于 2012-04-25T00:10:37.983 回答
0

这也可以用 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>
于 2012-04-25T00:12:33.040 回答