newhousebuilder.com image map with pop-ups

Nice site. I am looking for an application like this: http://www.vipliving.ca/suites.aspx

Same question... how to implement this with Beauty Tips (i.e., different linked areas of an image map coded with specific tool-tip/pop-up information)?

Follow up post:

1. in my experience, building an image map with map and area tags (as in this example: http://css-tricks.com/image-map-with-prototype-tooltips/) did not work with beauty tips
---> led to this problem: http://drupal.org/files/issues/Screen%20shot%202010-12-06%20at%206.52.52...
---> issue: http://drupal.org/node/961286

2. building an image map with css and using one image as background and other images positioned as content lists with css co-ordinates for hot links (as in this example: http://www.cssplay.co.uk/menu/solar_map.html) works fine with beauty tips.
---> similar examples: http://designreviver.com/tutorials/css-image-map-techniques-and-tutorials/

3. how to implement: in this example background image 625x625 px with transparent png file at 21x21 px for hotlink area:

Template file:

 class="edgepop1" style="display:inline-block; width: 350px; height:250px; padding:10px;">
<div class="edgepopside1" style="width:160px; padding:0px; float: left;">
<h3><strong>The Title Area</strong><br />
<strong>General Information Area</strong></h3>
<p>Details & Specifications<br />
Available: On this date: 2013<br />
<strong>From $xxx,xxx</strong></p>
<p><a href="/sites/default/files/mapfiles/Brochure.pdf" target="_blank" ><strong>Download Brochure</strong></a></p>
</div>
<div class="edgeplan1" style="width: 170px; padding:0px; padding-right:10px; float:right;">
<img src="/sites/default/files/mapfiles/edge1.png" alt=' ' />
</div>
</div>

This is for the pop-up, on the display page, saved as a html file (example: /sites/default/files/mapfiles/edgemap1.html). Use same html template to create different pop-ups for the hotlink regions, (saved as: edgmap2.html, edgemap3.html, etc.)

<div class="edgemapmain">
	<ul>
		<li id="c101">
			<img src="/sites/default/files/mapfiles/trans.png" /></li>
		<li id="c102">
			<img src="/sites/default/files/mapfiles/trans.png" /></li>
		<li id="c103">
			<img src="/sites/default/files/mapfiles/trans.png" /></li>
		<li id="c104">
			<img src="/sites/default/files/mapfiles/trans.png" /></li>
		<li id="c105">
			<img src="/sites/default/files/mapfiles/trans.png" /></li>
		<li id="c106">
			<img src="/sites/default/files/mapfiles/trans.png" /></li>
	</ul>
</div>

---> example: panel pane, block for image map display

In template.php file:

$options['edgelink1'] = array(
       'cssSelect' => '#e101',
       'ajaxPath' => '/sites/default/files/mapfiles/edgemap1.html',
       'trigger' => array('mouseover'),
       'width' => 350,
	   'positions' => 'right',
	   'fill' => '#fff',   
	   'ajaxCache' => 'false', 
     );
$options['edgelink2'] = array(
       'cssSelect' => '#e102',
       'ajaxPath' => '/sites/default/files/mapfiles/edgemap2.html',
       'trigger' => array('mouseover'),
       'width' => 350,
	   'positions' => 'right',
	   'fill' => '#fff',	   
	   'ajaxCache' => 'false',  
     );
	 $options['edgelink3'] = array(
       'cssSelect' => '#e103',
       'ajaxPath' => '/sites/default/files/mapfiles/edgemap3.html',
       'trigger' => array('mouseover', 'click'),
       'width' => 350,
	   'positions' => 'right',
	   'fill' => '#fff',
	   'ajaxCache' => 'false',	   
     );
	 $options['edgelink4'] = array(
       'cssSelect' => '#e104',
       'ajaxPath' => '/sites/default/files/mapfiles/edgemap4.html',
       'trigger' => array('mouseover', 'click'),
       'width' => 350,
	   'positions' => 'right',
	   'fill' => '#fff',	
	   'ajaxCache' => 'false',		   
     );
	 $options['edgelink5'] = array(
       'cssSelect' => '#e105',
       'ajaxPath' => '/sites/default/files/mapfiles/edgemap5.html',
       'trigger' => array('mouseover'),
       'width' => 350,
	   'positions' => 'left',
	   'fill' => '#fff',   
	   'ajaxCache' => 'false', 
     );
	 $options['edgelink6'] = array(
       'cssSelect' => '#e106',
       'ajaxPath' => '/sites/default/files/mapfiles/edgemap6.html',
       'trigger' => array('mouseover'),
       'width' => 350,
	   'positions' => 'left',
	   'fill' => '#fff',	   
	   'ajaxCache' => 'false',  
     );
	 $options['edgelink7'] = array(
       'cssSelect' => '#e107',
       'ajaxPath' => '/sites/default/files/mapfiles/edgemap7.html',
       'trigger' => array('mouseover', 'click'),
       'width' => 350,
	   'positions' => 'left',
	   'fill' => '#fff',
	   'ajaxCache' => 'false',	   
     );
	 $options['edgelink8'] = array(
       'cssSelect' => '#e108',
       'ajaxPath' => '/sites/default/files/mapfiles/edgemap8.html',
       'trigger' => array('mouseover', 'click'),
       'width' => 350,
	   'positions' => 'left',
	   'fill' => '#fff',	
	   'ajaxCache' => 'false',		   
     );
     beautytips_add_beautytips($options);

In the style.css file:

.edgemapmain {
    background: url("/sites/default/files/mapfiles/edgemap1.png") no-repeat scroll left 0 transparent;
    height: 625px;
    width:625px;
	margin: 0;
	padding: 0;
	position: relative
}
.edgemapmain ul {padding:0; margin:0; list-style:none; position:absolute; top:0; left:0;}
.edgemapmain ul li {position:absolute;}
.edgemapmain ul li#e101 {width:21px; height:21px; top:452px; left:429px;}
.edgemapmain ul li#e102 {width:21px; height:21px; top:475px; left:429px;}
.edgemapmain ul li#e103 {width:21px; height:21px; top:452px; left:385px;}
.edgemapmain ul li#e104 {width:21px; height:21px; top:475px; left:385px;}
.edgemapmain ul li#e105 {width:21px; height:21px; top:444px; left:249px;}
.edgemapmain ul li#e106 {width:21px; height:21px; top:467px; left:248px;}
.edgemapmain ul li#e107 {width:21px; height:21px; top:441px; left:209px;}
.edgemapmain ul li#e108 {width:21px; height:21px; top:464px; left:208px;}

This creates a single image map that can be used to display on different pages, etc. on the site with beauty tip pop-ups customized with the html templates. The hotlink regions are created with transparent png files over a css region with the image file (map) as background.