Fatal编程技术网
  • javascript/
  • Javascript 滚动文本超链接以成为图像

Javascript 滚动文本超链接以成为图像

javascript jquery html css

Javascript 滚动文本超链接以成为图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我该怎么做 有没有可能有一个文本超链接，一旦它被悬停在上面，该文本链接就会变成一个图像 我见过图像翻转，但还不知道如何将文本编码为图像翻转 我只是不知道从哪里开始，用什么编程语言。javascript？php？jquery 我开始使用以下代码： <a href = "#" onmouseover = "(document.img.src)='SAM_2251.jpg';">Mouseover here</a> <img name = "img" alt = ""

我该怎么做

有没有可能有一个文本超链接，一旦它被悬停在上面，该文本链接就会变成一个图像

我见过图像翻转，但还不知道如何将文本编码为图像翻转

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

我开始使用以下代码：

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

<img name = "img" alt = "" border = "0" />
但这样做的目的是，当图像加载到屏幕下方时，文本仍保留在屏幕上。我想文字完全摆脱了图像

有人帮忙吗？提前非常感谢。

你可以用很多方法来做，这里是一个CSS的粗略示例，只是想看看这个想法

你可以用很多方法来做，这里是一个CSS粗略的例子，只是想看看这个想法

假设HTML类似于以下内容：

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

假设HTML类似于以下内容：

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

只需使用html和css背景图像即可：

html

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

您只需使用html和css背景图像即可：

html

您可能需要更多的css来定义
a
标记的宽度和高度，但这是最基本的

    <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>
下面是一个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>
这也可以通过jQuery完成：


$（函数（）{
$（“#imglink”）。悬停(
函数（）{
$（this.attr（'small'，$（this.html（））；
$（this.html（$（this.attr（'full'））；
},
函数（）{
$（this.html（$（this.attr（'small'））；
}
);
});
图像“n”的滚动显示文本的卷展栏
这也可以通过jQuery完成：


$（函数（）{
$（“#imglink”）。悬停(
函数（）{
$（this.attr（'small'，$（this.html（））；
$（this.html（$（this.attr（'full'））；
},
函数（）{
$（this.html（$（this.attr（'small'））；
}
);
});
图像“n”的滚动显示文本的卷展栏
这将使链接仅在悬停时更改为图像，在悬停时变为文本（仅CSS）


.可变img
{
显示：无；
}
.可更改：悬停范围
{
显示：无；
}
.可更改：悬停img
{
显示：内联块；
}
或者如果希望链接永久更改为图像（使用jQuery）


.可变img
{
显示：无；
}
$（'.change'）.hover（函数（）{
$（this.children（'img'）.show（）；
$（this.children（'span'）.hide（）；
})
这将使链接仅在悬停时更改为图像，在悬停时变为文本（仅CSS）


.可变img
{
显示：无；
}
.可更改：悬停范围
{
显示：无；
}
.可更改：悬停img
{
显示：内联块；
}
或者如果希望链接永久更改为图像（使用jQuery）


.可变img
{
显示：无；
}
$（'.change'）.hover（函数（）{
$（this.children（'img'）.show（）；
$（this.children（'span'）.hide（）；
})
即使Chuck Norris也不能用PHP实现这一点（这种语言是服务器端的）哈哈。。。可能是David copperfield可以做到。@ajax333221:Chuck Norris可以在没有Corsno的情况下完成跨域ajax请求，甚至Chuck Norris也不能用PHP实现这一点（该语言是服务器端的）哈哈。。。也许大卫·科波菲尔可以做到。@ajax333221:Chuck Norris可以在没有CORSthank的情况下完成跨域ajax请求。谢谢，这很有效！当鼠标不悬停在图像上，文本出现，图像消失时，我该如何编码呢？我已经编辑了答案，包含了返回文本的功能。谢谢，它工作正常！当鼠标不悬停在图像上，文本出现，图像消失时，我该如何进行编码？我已经编辑了答案，其中包含了返回文本的功能。这很好，但是文本链接包含一个超链接边框！还有什么我可以删除的吗？这很好，但是文本链接包含一个超链接的边框！有什么我可以移除的吗？ 
    <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>

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

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

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