PDA

View Full Version : image gallery using image map difficulties



tgastine
02-04-2008, 03:50 AM
Hi,

I have designed a website using an image map and have a section where I have an area for one large image and thumbnails to click on so that when you either click on or mouseover it will pull that pic up in the large image space. What has made this difficult is that both the small pics and the large defined space are all within the image map. I know I'll need to use javascript and have tried many different ways, but just can't seem to get it quite right. Here is the code that I currently have:


<html>
<head>
<title>Holderby Custom Finish</title>
<meta name="description" content="Holderby Custom Finish - Fine Carpentry serving all of San Diego County">
<meta name="keywords" content="carpentry, finish carpentry, crown molding, window stool and apron, waines coating, handrail, base boards, entry doors, interior doors, doors, counter tops, decorative molding, remodeling, beams, false beams, ceilings, wood ceilings, new construction, residential, home, housing, building">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

</head>

<body background="images/door.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="center"><img src="images/door.gif" width="1015" height="600" border="0" usemap="#Map"></div></td>

</tr>
</table>

<map name="Map">
<area shape="rect" coords="179,466,278,518" href="/index.html">
<area shape="rect" coords="138,181,333,194" href="/door.html">
<area shape="rect" coords="138,211,289,223" href="/moulding.html">
<area shape="rect" coords="138,240,317,252" href="/hardware.html">
<area shape="rect" coords="138,268,265,280" href="/handrail.html">
<area shape="rect" coords="138,296,251,309" href="/ceiling.html">
<area shape="rect" coords="138,326,205,338" href="/remodel.html">
<area shape="rect" coords="138,355,277,367" href="/countertop.html">
<area shape="rect" coords="138,384,205,396" href="/about.html">
<area shape="rect" coords="138,412,215,424" href="/contact.html">
<area shape="rect" coords="693,153,772,258" href="images/">
<area shape="rect" coords="803,153,882,258" href="images/">
<area shape="rect" coords="693,281,772,385" href="images/">
<area shape="rect" coords="803,281,882,385" href="images/">
<area shape="rect" coords="748,407,827,512" href="images/">

</map>
</body>
</html>


Thanks for any help!

Tammi