使图像的一部分可点击 [英] Making part of an image clickable

问题描述

我以这种方式应用了背景图像

  HTML 
 
 
< img src =stock.pngclass =stretchalt =image/> 
< / div> 
 
 CSS 
 
 #background {
 width：100％; 
身高：100％; 
位置：绝对; 
 left：0px; 
 top：0px; 
 z-index：0; 
} 
 
 .stretch {
 width：100％; 
身高：100％; 
} 
  

我想让图片的一部分区域可点击，这样它会链接到我的下一页，任何简单的方法来做到这一点？ 你总是可以做一个链接相对和 z-index 它到合适的位置：

 < div id =background> 
< img src =stock.pngclass =stretchalt =image/> 
< a href =path / to / url /class =link>< / a> 
< / div> 
  

然后就像这样：

  #background {
 width：100％; 
身高：100％; 
位置：绝对; 
 left：0px; 
 top：0px; 
 z-index：0; 
} 
 .stretch {
 width：100％; 
身高：100％; 
 z-index：1; 
} 
 .link {
 width：200px; 
 height：200px; 
位置：绝对; 
 top：50％; 
剩下：50％; 
 display：block; 
 z-index：2; 
} 
  

然后按照CSS和/或图像的方式移动和设置链接的样式（ s）。

I have a background image applied this way

HTML

<div id="background">
    <img src="stock.png" class="stretch" alt="image" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

I want to have a part of an area of the image clickable, so that it will link me to the next page, any simple ways of doing this?

解决方案

You could always make a link relative and z-index it to the proper position:

<div id="background">
    <img src="stock.png" class="stretch" alt="image" />
    <a href="path/to/url/" class="link"></a>
</div>

Then something like:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}
.stretch {
    width:100%;
    height:100%;
    z-index:1;
}
.link {
    width:200px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    display:block;
    z-index:2;
}

Then move and style the link as you will with CSS and/or image(s).

这篇关于使图像的一部分可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！