<!--[if gte IE 7]><!-->
<style type="text/css">
/* for IE7 and all non-IE browsers */
#map ul li#grapes {position:absolute; top:38px; left:39px;}
#map ul li#cherries {position:absolute; top:38px; left:226px;}
#map ul li#carrots {position:absolute; top:38px; left:413px;}
#map ul li#salad {position:absolute; top:225px; left:39px;}
#map ul li#mushroom {position:absolute; top:225px; left:226px;}
#map ul li#apple {position:absolute; top:225px; left:413px;}
#map ul li#pear  {position:absolute; top:412px; left:39px;}
#map ul li#aubergine {position:absolute; top:412px; left:226px;}
#map ul li#orange {position:absolute; top:412px; left:413px;}
#map ul li {z-index:1;}
#map ul li:hover {z-index:100;}
</style>
<!--<![endif]-->

<!--[if lte IE 6]>
<style type="text/css">
/* for IE5.5 and IE6 */
#map ul li#grapes a.tl {position:absolute; top:38px; left:39px;}
#map ul li#cherries a.tl {position:absolute; top:38px; left:226px;}
#map ul li#carrots a.tl {position:absolute; top:38px; left:413px;}
#map ul li#salad a.tl {position:absolute; top:225px; left:39px;}
#map ul li#mushroom a.tl {position:absolute; top:225px; left:226px;}
#map ul li#apple a.tl {position:absolute; top:225px; left:413px;}
#map ul li#pear a.tl {position:absolute; top:412px; left:39px;}
#map ul li#aubergine a.tl {position:absolute; top:412px; left:226px;}
#map ul li#orange a.tl {position:absolute; top:412px; left:413px;}
#map ul li a.tl:hover {border:0; z-index:100;}
</style>
<![endif]-->


<style type="text/css">
#map {position:relative; margin:50px auto; width:600px; height:600px; overflow:hidden;}
#map ul {padding:0; margin:0; list-style:none;}

#map ul li a.tl {text-decoration:none; display:block; width:150px; height:150px; background:url(transparent.gif); text-indent:-9999px;}

#map ul li#grapes a.tl:hover, #map ul li#grapes:hover a.tl {background:url(grapes.gif);}
#map ul li#cherries a.tl:hover, #map ul li#cherries:hover a.tl {background:url(cherries.gif);}
#map ul li#carrots a.tl:hover, #map ul li#carrots:hover a.tl {background:url(carrots.gif);}
#map ul li#salad a.tl:hover, #map ul li#salad:hover a.tl {background:url(salad.gif);}
#map ul li#mushroom a.tl:hover, #map ul li#mushroom:hover a.tl {background:url(mushroom.gif);}
#map ul li#apple a.tl:hover, #map ul li#apple:hover a.tl {background:url(apple.gif);}
#map ul li#pear a.tl:hover, #map ul li#pear:hover a.tl {background:url(pear.gif);}
#map ul li#aubergine a.tl:hover, #map ul li#aubergine:hover a.tl {background:url(aubergine.gif);}
#map ul li#orange a.tl:hover, #map ul li#orange:hover a.tl {background:url(orange.gif);}

.xsnazzy {display:block; position:absolute; height:auto; background:#201919; width:150px; height:250px; text-align:center;}

#map ul li .xsnazzy,
#map ul li a.tl .xsnazzy
{visibility:hidden;}

#map ul li a.tl:hover .xsnazzy {visibility:visible;}

#map ul li:hover .xsnazzy {visibility:visible; z-index:500;}

/* style all backgrounds with bottom location to make IE7 correctly interpret the z-index */
#grapes .xsnazzy {left:149px; bottom:-100px; background:url(right.gif); color:#63b5c5;}
#cherries .xsnazzy {left:149px; bottom:-100px; background:url(right.gif); color:#dc241e;}
#carrots .xsnazzy {left:-149px; bottom:-100px; background:url(left.gif); color:#e88225;}
#salad .xsnazzy {left:149px; bottom:-50px; background:url(right_middle.gif); color:#e78229;}
#mushroom .xsnazzy {left:149px; bottom:-50px; background:url(right_middle.gif); color:#eb7f27;}
#apple .xsnazzy {left:-149px; bottom:-50px; background:url(left_middle.gif); color:#d9241e;}
#pear .xsnazzy {left:149px; bottom:0; background:url(right_bottom.gif); color:#efbb00;}
#aubergine .xsnazzy {left:149px; bottom:0; background:url(right_bottom.gif); color:#63b4c5;}
#orange .xsnazzy {left:-149px; bottom:0; background:url(left_bottom.gif); color:#e78229;}

.xsnazzy h1, .xsnazzy p, .xsnazzy h2 {margin:0; padding:10px;}

.xsnazzy h1, .xsnazzy h2 {font-size:20px;}

#map ul li a:hover .xsnazzy a,
#map ul li:hover .xsnazzy a
{color:#cf0; display:block; width:95px; margin:8px 25px; height:40px; font-size:20px; border:1px solid #666; 
line-height:35px; text-decoration:none;}

#map ul li a:hover .xsnazzy a:hover,
#map ul li:hover .xsnazzy a:hover {background:#333;}

/* cache the hover images */
img.cache {width:0; height:0; overflow:hidden;}
</style>


<div id="map">
<img src="fruit_bw.gif" alt="" title="">
<ul>
<li id="grapes"><a href="#nogo" class ="tl">Grapes<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="xsnazzy">
<h1>Grapes</h1>
<a href="#nogo">Frosted</a>
<a href="#nogo">Jam</a>
<a href="#nogo">Wine</a>
<h1>Grapes</h1>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="cherries"><a href="#nogo" class ="tl">Cherries<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="xsnazzy">
<h1>Cherries</h1>
<a href="#nogo">Pie</a>
<a href="#nogo">Strudel</a>
<a href="#nogo">Sauce</a>
<h1>Cherries</h1>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="carrots"><a href="#nogo" class ="tl">Carrots<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="xsnazzy">
<h1>Carrots</h1>
<a href="#nogo">Minted</a>
<a href="#nogo">Sticks</a>
<a href="#nogo">Glazed</a>
<h1>Carrots</h1>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="salad"><a href="#nogo" class ="tl">Salad<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="xsnazzy">
<h1>Salad</h1>
<a href="#nogo">Tomato</a>
<a href="#nogo">Lettuce</a>
<a href="#nogo">Cheese</a>
<h1>Salad</h1>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="mushroom"><a href="#nogo" class ="tl">Mushroom<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="xsnazzy">
<h1>Mushroom</h1>
<a href="#nogo">Soup</a>
<a href="#nogo">Baked</a>
<a href="#nogo">Stuffed</a>
<h1>Mushroom</h1>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="apple"><a href="#nogo" class ="tl">Apple<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="xsnazzy">
<h1>Apple</h1>
<a href="#nogo">Baked</a>
<a href="#nogo">Crumble</a>
<a href="#nogo">Sauce</a>
<h1>Apple</h1>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="pear"><a href="#nogo" class ="tl">Pear<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="xsnazzy">
<h1>Pear</h1>
<a href="#nogo">Flaming</a>
<a href="#nogo">Stewed</a>
<a href="#nogo">Pickled</a>
<h1>Pear</h1>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="aubergine"><a href="#nogo" class ="tl">Aubergine<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="xsnazzy">
<h1>Aubergine</h1>
<a href="#nogo">Grilled</a>
<a href="#nogo">Fried</a>
<a href="#nogo">Stuffed</a>
<h1>Aubergine</h1>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="orange"><a href="#nogo" class ="tl">Orange<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="xsnazzy">
<h1>Orange</h1>
<a href="#nogo">Alaska</a>
<a href="#nogo">Jelly</a>
<a href="#nogo">Fritters</a>
<h1>Orange</h1>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<img class ="cache1" src="grapes.gif" alt="" title="">
<img class ="cache1" src="cherries.gif" alt="" title="">
<img class ="cache1" src="carrots.gif" alt="" title="">
<img class ="cache1" src="salad.gif" alt="" title="">
<img class ="cache1" src="mushroom.gif" alt="" title="">
<img class ="cache1" src="apple.gif" alt="" title="">
<img class ="cache1" src="pear.gif" alt="" title="">
<img class ="cache1" src="aubergine.gif" alt="" title="">
<img class ="cache1" src="orange.gif" alt="" title="">
</div>