我有一个由5个重叠矩形组成的图像,所有这些矩形都有相关的标题,并且必须链接到相应的页面。我已经尝试将图像上传到在线图像映射生成器,该生成器自动生成代码但是,我只能改变CSS而不是HTML。图像映射是否是我问题的最佳解决方案?或者我可以使用哪种替代方法,不涉及修改HTML?
这是我的形象:
HTML:
<div style="text-align:center; width:406px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_3201310160406077" src="http://www.image-maps.com/uploaded_files/3201310160406077_home_image.png" usemap="#Image-Maps_3201310160406077" border="0" width="406" height="406" alt="" />
<map id="_Image-Maps_3201310160406077" name="Image-Maps_3201310160406077">
<area shape="rect" coords="72,3,192,43" href="#" alt="" title="" />
<area shape="rect" coords="326,75,401,115" href="#" alt="" title="" />
<area shape="rect" coords="4,290,118,330" href="#" alt="" title="" />
<area shape="rect" coords="241,361,332,401" href="#" alt="" title="" />
<area shape="rect" coords="158,180,249,220" href="#" alt="" title="" />
<area shape="rect" coords="404,404,406,406" href="http://www.image-maps.com/index.php?aff=mapped_users_3201310160406077" alt="Image Map" title="Image Map" />
CSS:
dl.image_map {display:block; width:406px; height:406px; background:url(http://www.image-maps.com/uploaded_files/3201310160406077_home_image.png); position:relative; margin:2px auto 2px auto;}
a.LINK0 {left:72px; top:3px; background:transparent;}
a.LINK0 {display:block; width:122px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK0:hover {background:transparent; border:1px dashed black; color:black;}
a.LINK1 {left:326px; top:75px; background:transparent;}
a.LINK1 {display:block; width:77px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK1:hover {background:transparent; border:1px dashed black; color:black;}
a.LINK2 {left:4px; top:290px; background:transparent;}
a.LINK2 {display:block; width:116px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK2:hover {background:transparent; border:1px dashed black; color:black;}
a.LINK3 {left:241px; top:361px; background:transparent;}
a.LINK3 {display:block; width:93px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK3:hover {background:transparent; border:1px dashed black; color:black;}
a.LINK4 {left:158px; top:180px; background:transparent;}
a.LINK4 {display:block; width:93px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK4:hover {background:transparent; border:1px dashed black; color:black;}
答案 0 :(得分:1)
如果您愿意,可以使用完整的HTML / CSS执行此操作,使用position: absolute
,z-index
和display: table-cell;
nav {
position: relative;
font-family: Arial;
font-size: 14px;
margin: 20px;
}
nav a {
position: absolute;
top: 0; left: 0;
padding: 10px;
border-radius: 5px;
color: #222;
background: #333;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
text-decoration: underline;
}
nav a span {
display: table-cell;
width: 145px; height: 145px;
}
.link-home {
top: 115px; left: 115px;
color: white;
line-height: 145px;
font-size: 24px;
background: #C1272C;
box-shadow: 0 0 10px 0 #333;
z-index: 5;
}
.link-printed-digital-media {
top: 0; left: 65px;
background: rgba(50, 50, 50, .8);
z-index: 4;
}
.link-file-sharing {
top: 70px; left: 185px;
background: rgba(50, 50, 50, .6);
z-index: 3;
}
.link-external-links {
top: 185px; left: 165px;
background: rgba(50, 50, 50, .4);
z-index: 2;
}
.link-stock-management {
top: 165px; left: 0;
background: rgba(50, 50, 50, .2);
z-index: 1;
}
/* size */
.link-printed-digital-media span,
.link-external-links span {
height: 200px;
}
.link-file-sharing span,
.link-stock-management span {
width: 200px;
}
/* align */
.link-home span {
text-align: center;
}
.link-file-sharing span,
.link-external-links span {
text-align: right;
}
.link-external-links span,
.link-stock-management span {
vertical-align: bottom;
}
<nav>
<a href="#" class="link-home">
<span>Home</span>
</a>
<a href="#" class="link-printed-digital-media">
<span>Printed &<br>Digital Media</span>
</a>
<a href="#" class="link-file-sharing">
<span>File<br>Sharing</span>
</a>
<a href="#" class="link-external-links">
<span>External<br>Links</span>
</a>
<a href="#" class="link-stock-management">
<span>Stock<br>Management</span>
</a>
</nav>
请注意<span>
是必需的,因为您无法将table-cell
和绝对定位合并到同一元素上。
答案 1 :(得分:0)
如果使用z-index(在CSS中)使用正确位置的正确大小来堆叠html元素,并添加带图像的超链接,它应该正确工作吗?
查看此示例以了解它是如何工作的。
<html>
<head>
<style>
/* setup container */
.nav-wrapper
{
position:relative;
width:500px;
height:500px;
background:#f0f0f0;
}
/* on each item */
a.nav-item
{
position:absolute;
width:200px;
height:200px;
}
/* per specific item, note the position and the z-index */
.home {
left: 120;
top: 135;
z-index:5; /*on top*/
background:rgba(250,50,50,.9);
}
.print {
left:80;
top: 30;
z-index:1; /*on bottom*/
background:rgba(60,60,60,.5);
}
.fileshare {
left: 40;
top: 180;
z-index:2;
background:rgba(50,50,50,.5);
}
.stock {
left: 235;
top: 220;
z-index:3;
background:rgba(70,70,70,.5);
}
.links {
left: 240;
top: 50;
z-index:4;
background:rgba(80,80,80,.5);
}
/* for example only */
.nav-item img
{
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="link-wrapper">
<!-- items over here. note the classes -->
<a href="print.html" class="nav-item print">
<img src="print.png" alt="print" />
</a>
<a href="fileshare.html" class="nav-item fileshare">
<img src="fileshare.png" alt="fileshare" />
</a>
<a href="home.html" class="nav-item home">
<img src="home.png" alt="home"/>
</a>
<a href="stock.html" class="nav-item stock">
<img src="stock.png" alt="stock" />
</a>
<a href="links.html" class="nav-item links">
<img src="links.png" alt="links" />
</a>
</div>
</body>
</html>