Question

我想让背景图片具有可点击链接，将有3种语言选择，当我点击它时，它将重定向到相应的语言页面。现在的问题是，当我尝试调整浏览器的大小时，对齐将变得混乱，区域映射将超出选择部分。这是图像：http://imgur.com/fajJXXv

<html>
<style>
body { 
    margin: 0 auto;
    background-color: #000;
}

.responsive-img {
    width: 100%;
    background-size: 100% 100%;
}

@media screen and (min-width: 980px) and (max-width: 1024px){
.responsive-img {
    background: url(<?php echo $imgUrl; ?>images/landing-bg.jpg);
    background-size: 100% 100%;
    background-repeat:no-repeat;
}   
}

.outer-wrapper {
    width:100%;
    margin: 0 auto;
}

.inner-wrapper {
    width:400px;
    margin: 0 auto;
}

#lang-en {
background-color: transparent;
border: 1px solid yellow;
}

#lang-malay {
background-color: transparent;
border: 1px solid yellow; 
}

#lang-simplified {
height: 120px;
width: 90px;
background-color: transparent;
border: 1px solid yellow;
}
</style>
<body>
<div class="outer-wrapper" >
<img src="<?php echo $imgUrl; ?>images/landing-bg.jpg" class="responsive-img" style="position: relative; top: 0; left: 0;">
<div class="inner-wrapper" style="position: absolute; top: 30%; left: 55%;">
<img src="<?php echo $imgUrl; ?>images/blank.gif" width="400px" height="120px" id="lang-en" usemap="#Map" >

<map name="Map" id="Map">
      <area shape="rect" coords="614,85,676,201">
      <area shape="rect" coords="260,86,323,202" href="#" id="lang-en">
      <area shape="rect" coords="26,87,89,202" href="#" id="lang-malay">
</map>

</div>
</div>
</body>

Answer 1

css：

.outer-wrapper {
    width:100%;
    margin: 0 auto;
    position:relative;
}


.x,.y,.z {
    position:absolute;
    top:26%;
    left:74%;
    color:white;
    text-decoration:none;
}
.y{

    top:32%;

}
.z{

    top:40%;

}

html：

<body>
<div class="outer-wrapper" >
<img src="http://i.imgur.com/fajJXXv.jpg" class="responsive-img" style="position: relative; top: 0; left: 0;">
    <a href="#" class="x">english</a><a href="#" class="y">spanish</a><a href="#" class="z">french</a>
<div class="inner-wrapper" style="position: absolute; top: 30%; left: 55%;">
<img src="http://i.imgur.com/H3kggqB.gif" width="400px" height="120px" id="lang-en" usemap="#Map" >

<map name="Map" id="Map">
      <area shape="rect" coords="614,85,676,201">
      <area shape="rect" coords="260,86,323,202" href="#" id="lang-en">
      <area shape="rect" coords="26,87,89,202" href="#" id="lang-malay">
</map>

</div>
</div>
</body>

http://jsfiddle.net/souraj/69kjpz9n/4/

我认为这就是你所需要的。如果没有，请告诉我。现在，您必须根据屏幕分辨率进行必要的更改以定位链接。

在背景图像中放置超链接

1 个答案: