Question

我该怎么做？

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

iv看过图像翻转但尚未看到或知道如何编码文本到图像翻转。

我只是不知道从哪里开始，使用什么编程语言。 JavaScript的？ PHP的？ jquery的？

我开始使用以下代码：

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

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

但是它的作用是将图像保存在屏幕上，同时将图像加载到屏幕下方。我希望文本完全摆脱图像。

任何帮助人员？非常感谢。

Answer 1

您只需使用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标记的宽度和高度，但这是基础知识。

Answer 2

你可以通过多种方式进行操作，这里有一个CSS粗略的例子，只是为了看到这个想法

try this

Answer 3

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

Answer 4

假设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 proof of concept

Answer 5

这是一种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>

Answer 6

这也可以通过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>

翻转文本超链接以成为图像

6 个答案: