Search code examples
jqueryhtmlcsshyperlinkimagemap

Creating Hotspots for Resizable Image?

Since I was not able to create a horizontal navigation bar with the desired text, I had to create a new navbar in illustrator and save it as a jpeg. I am planning on using hotspots over the words home and products. Of course, now the problem is that as a user resizes their browser, they still need to click on the links. What is the best way to go about doing this? Do I really need to map out every single spot for where the words could be on the page as the user resizes their browser?

Here are three different places where the words home and products will appear on the page as the user resizes. Home and Products move left and right between the first and second screenshots, and up and down between the second and third screenshots. Besides that the words are pretty much fixed on the page.
Resize 3 Resize 2 Resize 1

My fear is that the user could find a hotspot for a word that isn't there. How can I prevent this? Thank you. 

<!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>
Solution

  • You should NOT be doing this with images. Find a web font version of Windsor and use that instead with @font-face.

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