html - 使横幅图像的某些区域可点击

标签 html css image hyperlink

我正在制作一个新网站,主页上有一个带有不同元素(公司提供的产品)的大横幅图片;您可以查看网站 site2.dvsport.com 并了解我在说什么。我真的很想让那些带有产品名称的单元格成为链接到页面的可点击区域。这可能吗?

非常感谢。

最佳答案

根据点击图片的位置,可以将一张图片链接到多个页面。

这种技术称为图像映射。

您只需指定图像的哪些区域应该链接到哪里。

在下面的示例中,如果您将鼠标放在左上角,它会链接到 yahoo .... 而在右下角.... 它会链接到 hotbot。

<img src="rainbow.gif" usemap = #example border=0> 
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com"> 
<area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com"> 
</map>

在上面的例子中,我们只使用了矩形图像映射。可能的形状是:

<area shape=rect coords= x1,y1, x2,y2 Href="http://www.domain.com">


<area shape=circle coords= x1,y1, x2,y2 Href="http://www.domain.com">


<area shape=polygon coords= x1,y1, x2,y2, .., xn,yn Href="http://www.domain.com">

编辑: 那么对于您真正的查询,您应该看看这个 this .

关于html - 使横幅图像的某些区域可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25941212/

相关文章:

javascript - 如何防止 HTML 表单提交空白

javascript - 将json数据放入canvas html5

html - 在另一个视频元素中 float html 5 视频元素

html - 创建一个 'New' 带有 24 点或以上点爆发的尖峰标签

java - 任何用于将 Java/Android 中的原始图像(如 DNG)转换为 JPG 格式的 API 或代码

java - 安卓/Java : Find an image match (Big image contains small image)

html - 如何通过任何地方或外部点击关闭这个纯 css 弹出窗口?

jquery - 如何隐藏真棒字体图标以外的文本

html - 当一行中超过 12 列且高度不同时,列不能正确换行

java - 有没有一种内存效率高的替代方案来替代graphics.drawImage()?