Question

如何做到这一点?

文本超链接一旦被搁置,文本链接就会成为形象吗?

iv 看到图像传播,但已经发现或知道如何将图像传播成像。

i 只字眼知道何时开始,方案措辞是什么。 javascript? php? jquery?

i 先采用以下守则:

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

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

但是,在图像被装在后面的时候,它还是把案文放在屏幕上。 i 想使案文完全摆脱形象。

任何帮助? 预言如此之多。

Answer 1

只有在被 h弃时,才能改变与图像的联系,在被 h离时成为文字(只有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>

或者如果你想要与永久改变形象挂钩(用 j子)

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

你们可以只使用html,并使用一种背景形象:

html

<a href = "#" class="hover_image">Mouseover here</a>

c)

a.hover_image:hover {
    background: url(/url/to/image) no-repeat center center;
    text-indent: -9999em;
}

You probably need a bit more c) to define the width and height of the a tag, but this is the basics.

Answer 3

你在很多方面说得 ca,这里是特别安全局的一个粗略例子,只是看一看这一想法。

<http://jsfiddle.net/d5ym/3/>rel=“nofollow>try this

Answer 4

这里是这样做的 j脚石。

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

假定超文本为:

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

The following Java texts 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 evidence of concept.

Answer 6

也可以通过 j:

http://jsfiddle.net/pkZAW/“rel=“nofollow” 见《行动。

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

友情链接