CODEWITHSUNDEEP
jqueryhtmlcsshyperlinkimagemap
HappyHands31
HappyHands31

Reputation: 4101

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>

Upvotes: 1

Views: 461

Answers (2)

Tims
Tims

Reputation: 2007

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.

Upvotes: 1

Poyi
Poyi

Reputation: 930

You can create a set of overlaying divs (with links inside) that are the same dimension as your image. If your image doesn't resize based on viewport, then you should set fix width/height/position on these divs.

That being said, I suggest that you build your design layout/style without using a big image like that. It'll save you some headaches.

Upvotes: 1

Related Questions