为可调整大小的图像创建热点？

Question

由于无法创建包含所需文本的水平导航栏，我不得不在 illustrator 中创建一个新的 navbar 并将其另存为 jpeg。我计划在 home 和 products 上使用热点。当然，现在的问题是，当用户调整浏览器大小时，他们仍然需要点击链接。执行此操作的最佳方法是什么？当用户调整浏览器大小时，我真的需要为页面上可能出现的每个位置绘制出每个位置吗？

这是三个不同的地方，当用户调整大小时，home 和 products 将出现在页面上。 Home和Products在第一张和第二张截图之间左右移动，在第二张和第三张截图之间上下移动。除此之外，文字几乎固定在页面上。

我担心用户可能会找到一个不存在的词的热点。我怎样才能防止这种情况发生？谢谢你。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
#banner {width:100%}
#banner img {width:100%;height:auto}
nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-align:center;
background-color:#c0872e;}
nav li {display:inline-block;background-color:#c0872e;
font-family:Georgia;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:22px;
 font-family:Georgia; background-color:#c0872e;}
nav a:hover {text-decoration:none}

a{float:left;margin-right:58px; margin-left:58px;color:#000;
text-decoration:none;
}
body {background-image: url("daikinbackground1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

-->
</style>
<meta charset="utf-8"/>
<title>daikininc.com</title>
</head>
<body>
<div id="body">
<header>
<div>
<div style="text-align:center" id="banner">
<title="daikinincbanner">
<img src="daikinbanner1.jpg" border="0" alt="daikinbanner1">
</div>
<!--
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
</ul>
</nav>
-->
<nav style="text-align:center">
<img style ="height:300px" width="1355" src="navbarimage1.jpg">
</nav>
<br>
<p style="text-align:center;font-family:WindsorDemi;">
<font size="4">
Welcome to daikininc.com! Home to the world's greatest eggorll
wrappers and noodles.
</font>
</p>
<br><br><br><br><br><br><br><br><br>
</nav>
</header>
<section>
<aside>
</aside>
<article>
</article>
<footer>
</footer>
</div>
</body>
</html>

Answer 1

您可以创建一组与图像尺寸相同的重叠 div（内部带有链接）。如果您的图像不根据视口调整大小，那么您应该在这些 div 上设置 fix width/height/position。

话虽如此，我建议您构建自己的设计 layout/style 而不要使用那样的大图像。它会让您省去一些麻烦。

Answer 2

您不应该对图像执行此操作。查找 Windsor 的网络字体版本，并将其与 @font-face.

一起使用

css-tricks 有 nice write up on using @font-face.

为可调整大小的图像创建热点？

Creating Hotspots for Resizable Image?

html

css

jquery

imagemap

hyperlink