如何使 <img style> 可点击答案

【问题标题】：How to make <img style> clickable如何使 <img style> 可点击
【发布时间】：2014-03-03 23:34:59
【问题描述】：

我正在使用以下代码：

<img style="border:2px solid #3591c0;
width:200;
height:200;
border-radius-30px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
-webkit-border-radius:30px;"
src="1.jpg"/></style>

如何使这段代码中的图像可点击？

【问题讨论】：

相信您可能会将属性 style 与标签（元素）style 混淆。 <img style=... 不会打开新的 <style> 标记。 <img> 是一个 <style> 另一个。反正我们看到了。 <style> 标签内不能有 HTML，因此 </style> 不好。
这有帮助。非常感谢
我用下面的代码试过了，它似乎不适用于 div 标签？还有什么我可以使用的吗？
你不能在 div 上使用自闭语法/>。使用 this 验证您的 HTML，使用 this 验证您的 CSS。

标签： html css tags

【解决方案1】：

你可以把它放在一个锚点 <a> 标记中，这将使它成为一个链接。

<a>
    <img style="border:2px solid #3591c0;
    width:200;
    height:200;
    border-radius-30px;
    -moz-border-radius:30px;
    -khtml-border-radius:30px;
    -webkit-border-radius:30px;"
    src="1.jpg"/>
</a>

【讨论】：

【解决方案2】：

将<img> 标记包装在<a> 标记中。另外，</style> 也不需要。

<a href="http://stackoverflow.com">
  <img style="border:2px solid #3591c0;
  width:200;
  height:200;
  border-radius-30px;
  -moz-border-radius:30px;
  -khtml-border-radius:30px;
  -webkit-border-radius:30px;"
  src="1.jpg"/>
</a>

【讨论】：

【解决方案3】：

用锚标记包围它：

<a href="destination.html">
    <img style="border:2px solid #3591c0;
    width:200;
    height:200;
    border-radius-30px;
    -moz-border-radius:30px;
    -khtml-border-radius:30px;
    -webkit-border-radius:30px;"
    src="1.jpg"/>
</a>

其中“destination.html”是您希望将用户重定向到的文件路径或链接。是的，你不需要</style> 标签。

这一切都显示在 JSFiddle 中：http://jsfiddle.net/Mf6Dq/5/

【讨论】：

不需要</style> 太弱了。这是不好的标记，因为我们不能在 <style> 中包含 HTML。
如果它回答了你的问题，你能选择它作为“最佳答案”吗？