Html 带有图片链接的点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12702888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Onclick with image link
提问by eric
I want to create a menu that will change when mouseover and onclick.
我想创建一个在鼠标悬停和点击时会改变的菜单。
But, my onclick will only turn blank when clicked.
但是，我的 onclick 只会在单击时变为空白。
I found out that if i delete the a href, the onclick function will function.
我发现如果我删除 a href，onclick 函数就会起作用。
Anyone know how to solve the problem?
有谁知道如何解决问题？
<a href="{storeurl}?act=aboutus">
<img src="skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg"
onclick="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'"
onmouseover="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'"
onmouseout="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg'"/>
</a>
回答by gabitzish
add return false;at the end of the callback function:
return false;在回调函数末尾添加：
<a href="{storeurl}?act=aboutus"><img src="skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg"
onclick="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'; return false;"
onmouseover="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'"
onmouseout="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg'"
/></a>
回答by Ivanka Todorova
You can use CSS for this.
Example html:
您可以为此使用 CSS。示例html：
<ul>
<li><a href="#n">Whisky</a></li>
</ul>
Example css:
示例css：
ul a {
display: block;
background: url('skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg') no-repeat;
}
ul a:active,
ul a:focus {
background: url(skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg) no-repeat;
}
ul a:hover {
background: url('skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg') no-repeat;
}
回答by Ashouri
You can make this without jquery library
您可以在没有 jquery 库的情况下进行此操作
just with simple javascript
只需使用简单的 javascript
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<img src="test.png" onclick="myFunction()">
</body>
</html>
