css中如何定义鼠标经过改变图片,并且可以有链接点击
css中如何定义鼠标经过改变图片,并且可以有链接点击：网页里面的图片是这样的：进入网页时是一张图片，可当鼠标移上去后，就变成另外一张图片，现在就是想在鼠标移上去后，换了图...
css中如何定义鼠标经过改变图片,并且可以有链接点击：网页里面的图片是这样的：进入网页时是一张图片，可当鼠标移上去后，就变成另外一张图片，现在就是想在鼠标移上去后，换了图片的加一个链接，请问应该怎么做？
现在的效果是鼠标移上去，改变了照片，现在就是想在改变照片的同时可以加一个链接，链接到别的网页，现在就是不知道怎么加链接上去，好像是做了什么CSS样式，不知道怎么加。哪位知道给说说，谢谢。 展开
现在的效果是鼠标移上去，改变了照片，现在就是想在改变照片的同时可以加一个链接，链接到别的网页，现在就是不知道怎么加链接上去，好像是做了什么CSS样式，不知道怎么加。哪位知道给说说，谢谢。 展开
5个回答
展开全部
不用那么麻烦，活用a标签就可以了
<style type="text/css">
a.home {background:url(鼠标滑过之前的图片地址) no-repeat; width:100px; height:20px; display:inline-block;_float:left;}
a.home:hover {background:url(鼠标滑过的图片地址) no-repeat;
</style>
<div>
<a href="http://www.baidu.com" class="home">首页</a>
</div>
这样就可以实现有链接的可以换图的效果
<style type="text/css">
a.home {background:url(鼠标滑过之前的图片地址) no-repeat; width:100px; height:20px; display:inline-block;_float:left;}
a.home:hover {background:url(鼠标滑过的图片地址) no-repeat;
</style>
<div>
<a href="http://www.baidu.com" class="home">首页</a>
</div>
这样就可以实现有链接的可以换图的效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
通过在这个块的前面添加一个a标签来实现，然后填写上你所需要的链接地址就行了
设定图片超链接，用css样式来实现，其实就是给这个图片的块添加超链接，我们可以通过在这个块的前面添加一个a标签来实现，然后填写上你所需要的链接地址就行了，通过代码来理解：
<html>
<head>
<style>
#div1{
width:660px;
height:400px;
border:1px soild #f00;
}
</style>
</head>
<body>
<div id='div1'>
<a href=""><img src='图片地址'></a>
</div
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<a href="#">提交</a>
a{
display:block;
height:20px;
width:20px;
background:url(图片地址);
text-indent:-9999px; /* 隐藏文字 */
}
a:hover{
display:block;
height:20px;
width:20px;
background:url(图片地址);/*鼠标经过的图片地址*/
}
}
a{
display:block;
height:20px;
width:20px;
background:url(图片地址);
text-indent:-9999px; /* 隐藏文字 */
}
a:hover{
display:block;
height:20px;
width:20px;
background:url(图片地址);/*鼠标经过的图片地址*/
}
}
参考资料： 如果您的回答是从其他地方引用，请表明出处
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<img id="img_1" onmouseover="changeImg(1,1);" onmouseout="changeImg(1,2);" onclick="linkTo(1);" src="images/a.jpg" width="xxx" height="xxx" />
<script type="text/javascript">
function changeImg(id,todo){
var img=document.getElementById("img_"+id);//id是img_1的元素
if(todo==1){
img.src="images/b.jpg"; //todo是1就是换图片
}
if(todo==2){
img.src="images/a.jpg"; //是2就换回图片
}
}
function linkTo(id){
location="img_"+id+".html"; //点击就转到 img_1.html
}
</script>
<script type="text/javascript">
function changeImg(id,todo){
var img=document.getElementById("img_"+id);//id是img_1的元素
if(todo==1){
img.src="images/b.jpg"; //todo是1就是换图片
}
if(todo==2){
img.src="images/a.jpg"; //是2就换回图片
}
}
function linkTo(id){
location="img_"+id+".html"; //点击就转到 img_1.html
}
</script>
已赞过
已踩过<
你对这个回答的评价是？
展开全部
:hover
{
background-image:url(....gif)
}
{
background-image:url(....gif)
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
