+- Support Forums (https://www.supportforums.net)
+-- Forum: Categories (https://www.supportforums.net/forumdisplay.php?fid=87)
+--- Forum: Webmaster Support (https://www.supportforums.net/forumdisplay.php?fid=36)
+---- Forum: Website Development (https://www.supportforums.net/forumdisplay.php?fid=43)
+---- Thread: Image map help, please. (/showthread.php?tid=3437)
Image map help, please. - Elektrisk - 12-09-2009
Hello.
I have this image, and I'd like to create an image map so that the user can click 'English' to direct them to 'www.xx.com' and '官话' to direct them to 'ww.xx.cn'. However, the problem is that it's a background image controlled via CSS, so there's no <img src>. The code for the image map is as follows (ignore the google links, they're just place holders):
Code:
<map id="Languages" name="Languages">
<area shape="rect" alt="" title="" coords="572,12,647,34" href="www.google.com" target="" />
<area shape="rect" alt="" title="" coords="655,14,693,33" href="www.google.cn" target="" />
</map>Can anyone think of a way to do this?
I could easily do this in Photoshop or Dreamweaver, but the problem is, it appears you can't set hotspots to a background image. Or maybe I'm missing something..?
Here's a screenshot of the page, for further clarification.
http://i49.tinypic.com/2exya6t.jpg
Thanks
RE: Image map help, please. - Gaijin - 12-09-2009
May I come with something I like more than map tag.
Code:
<div style="background:url(http://i45.tinypic.com/2mcztk9.jpg);width:735px;height:119px;">
<div style="position:absolute;left:580px;top:20px;width:120px;height:30px;">
<a style="border:0px;" href="example.htm">
<div style="display:inline-block;width:75px;height:22px;"></div>
</a>
<a style="border:0px;" href="ex.htm">
<div style="display:inline-block;width:35px;height:22px;"></div>
</a>
</div>
</div>The code is pretty easy to understand, but if not just ask!