Javascript interactive map working issues

[suzy-q]

Hi All!

I have a problem with this jquery map: it is fully functional when I test internally in dreamweaver cs5 firefox and safari preview mode, but as soon as I test it live on a server the buttons inside the map do not appear.

Please view: http://www.digitalmake-up.com/staging/testing.html

I'm not sure if it's the z-index on the css or the jquery...I tried a bunch of different scenarios but nothing is working.

What it's really suppose to look like is this I see this internally)

1. bullets on the maphttp://www.digitalmake-up.com/stagin...ets-on-map.png

2. that can be clicked and a message pops up.http://www.digitalmake-up.com/stagin...ick-on-map.png

Please help!!!...anyone! I would really appreciate it.

css

#map {
	position: absolute;
	width: 620px;
	height: 512px;
	overflow: hidden;
	clear: right;
	top: 171px;
}
#returnlink { display: block; position: absolute; bottom: 0; right: 0;  color: white; background: blue; padding: 3px;}




/* Start CSS Coding
=====================================================================*/


#containercontent {
	width:850px;
	/* [disabled]padding:10px 10px; */
}


#placeframe{
	width:625px;
	height:446px;
	background: url('./images/back_map.png') repeat-y;
	float:left;
}

#ullegend{
	float:right;
	clear:left;
	width:165px;
	margin:100px 0 0 80px;
	font-family: Arial, Helvetica, sans-serif, Verdana;
	color:#000;
	height: 200px;
}
#ullegend li{
	margin:8px 0;
	padding:2px 0 2px 24px;
}
#ullegend li label{
	font-size:18px;
	font-family: Arial, Helvetica, sans-serif, Verdana;
	margin-left:-18px;
}

#ullegend .legend_1{
	background: url('./images/bullet.jpg') no-repeat 0 -18px;
	font-size:14px;
}
#ullegend .legend_2{
	background: url('./images/bullet.jpg') no-repeat 0 -37px;
	font-size:14px;
}
#ullegend .legend_3{
	background: url('./images/bullet.jpg') no-repeat 0 -56px;
	font-size:14px;
}
#ullegend .legend_4{
	background: url('./images/bullet.jpg') no-repeat 0 -76px;
	font-size:14px;
}

/* Start CSS POPUP Menu
=====================================================================*/
#place_menu{
	width:775px;
	height:36px;
}

#place_menu ul ul a{
	text-align:left;
	border:none;
	text-decoration:none;
}
#place_menu ul ul{
	position:absolute;
	z-index:500;
	display:none;
	width:250x;
	background: url('./images/back_popup.png');
	margin:36px 0 0 0;
}
#place_menu #mainmenu2 ul { background: url('./images/back_popup2.png'); }
div#place_menu ul li ul li:hover{
	cursor:pointer;
	z-index:100;
	background:#799f10;
}
div#place_menu #mainmenu2 li ul li:hover{
	background: #5F6A6D;
}
#place_menu ul li ul li{
	float:none;
	display:block;
	font-size:14px;
	padding:2px;
	text-transform:none;
	font-weight:lighter;
	height:20px;
	border-right:none;
	width:250px;
}
#place_menu ul li ul li a{
	color:#000;
	padding:2px 5px 2px 18px;
	height:15px;
	display:block;
}
#place_menu ul li ul li a:hover{
	background:none;
	color:#fff;
}
div#place_menu li:hover ul ul,
div#place_menu li li:hover ul ul
{display:none;}

div#place_menu li:hover ul,
div#place_menu li li:hover ul
{display:block;}

div#place_menu li:hover{
	background: url('./images/back_popup.png');
	color:#000;
}




/* Start Map CSS
=====================================================================*/
#map a.bullet {
	display: none;
	position: absolute;
	display: block;
	width: 17px;
	height: 15px;
	background-image: url('./images/map/bullets.png');
	background-repeat: no-repeat;
	z-index: 1;
}
#map a.yellow {  background-position: 0px -15px; }
#map a.green   {  background-position: 0px -30px; }
#map a.blue     {  background-position: 0px -45px; }
#map a.purple {  background-position: 0px -60px; }

#map a.bullet:hover { text-decoration: none; }

#map div.popup{
	display: none;
	position: absolute;
	top: 67px;
	left: 176px;
	width: 225px;
	height: 310px;
	background: url('./images/map/popup.png') no-repeat;
	z-index: 2;
}

#map div.yellow { background-position: -225px 0px } 
#map div.green   { background-position: -450px 0px } 
#map div.blue     { background-position: -675px 0px } 
#map div.purple { background-position: -900px 0px } 

#map div.popup h3 {
	display: block;
	padding: 8px 13px 13px 10px;
	color: white;
	font-size: 17px;
}
#map div.yellow h3 { color: black; }

#map div.popup div.popupcontent{
	position: absolute;
	top: 54px;
	height: 256px;
	padding: 0 15px;
	overflow: auto;
	overflow: visible; 
	font-family: arial;
	font-size: 13px;
	line-height: 18px;
}
#map div.popup div.popupcontent p{
	margin: 10px 0;
	width: 195px;
}
#map div.popup div.popupcontent a {
	color: blue;
	border-bottom: 1px dotted blue;
}
#map div.popup div.popupcontent a:hover {
	text-decoration: none;
	}
#map div.popup a.close{
	display: block;
	position: absolute;
	top: 286px;
	left: 200px;
}
#map div.popup a.close img{
	border: none;
	z-index: 100;
}

jquery

/*
* Copyright (C) 2009 Joel Sutherland.
* Liscenced under the MIT liscense
* TODO:
* 1. Create API
* 2. Address accesibility automatically
* 3. Make object oriented
*/
(function($) {
	$.fn.zoommap = function(settings) {
		settings = $.extend({
			zoomDuration: 1000,
			zoomClass: 'zoomable',
			popupSelector: 'div.popup',
			popupCloseSelector: 'a.close',
			bulletWidthOffset: '10px',
			bulletHeightOffset: '10px',
			showReturnLink: true,
			returnId: 'returnlink',
			returnText: 'Return to Previous Map'
		}, settings);
		
		$(this).each(function(){
			var map = $(this);
			$(this).data('currentId', '');
			
			function showMapById(id){
				var region = findRegion(settings.map, id);
				if(region != -1){
					displayMap(region);
				}
			}

			// recursive id find
			function findRegion(root, id){
				if(root.id == id){
					return root;
				}else{
					if(root.maps != undefined){
						for(var i=0; i<root.maps.length; i++){
							var possible = findRegion(root.maps[i], id);
							if(possible != -1)
								return possible;
						}
					}
				}
				return -1;
			}
			
			// region is a map
			// This gets called every time we zoom
			function displayMap(region){
				//Set Current Region Id
				$(this).data('currentId', region.id);
				
				//Clear the Map and Set the Background Image
				map.empty().css({
					backgroundImage: 'url(' + region.image + ')',
					width: settings.width,
					height: settings.height
				});
				var check = map.css('background-image');
				
				//Load RegionData
				loadRegionData(region);
			}
			/************************************************************************************/

			
			//Show Return Link
			function showReturnLink(region){
				map.append('<a href="javascript:void(0);" id="' + settings.returnId + '">' + settings.returnText + '</a>');
				$('#' + settings.returnId).hide().fadeIn().click(function(){
					showMapById(region.parent);
				});
			}
				
			
			//Load the Bullets 
			function loadRegionData(region){
				var url = region.data;
				map.load(url, {}, function(){
					//place bullets
					$(this).children('a.bullet').each(function(){
						var coords = $(this).attr('rel').split('-');
						$(this).css({left: addpx(Number(coords[0]) - rempx(settings.bulletWidthOffset)), top: addpx(Number(coords[1]) - rempx(settings.bulletHeightOffset))})
							   .hide()
							   .click(function(){showPopup($(this).attr('id'));})
							   .fadeIn('fast');							
					});
					//Set up each submap as an item to click
					if(region.maps != undefined){
						for(var i=0; i<region.maps.length; i++){
							addZoom(region.maps[i]);
						}
					}
					//Create Return Link
					if(settings.showReturnLink && region.parent != undefined){
						showReturnLink(region);
					}						
				});
			}
			
			function showPopup(id, leftbul, topbul){
				map.find(settings.popupSelector).fadeOut(); 
				var boxid = '#' + id + '-box';
				
				$(boxid).fadeIn();
				$(settings.popupCloseSelector).click(function(){
					$(this).parent().fadeOut();
				});
			}
			
			//add a clickable image for a region on the current map
			function addZoom(region){
				$('<img />').addClass(settings.zoomClass)
					.attr({
						src: settings.blankImage,
						id: region.id
					}).css({
						position: 'absolute',
						width: region.width,
						height: region.height,
						top: region.top,
						left: region.left,
						cursor: 'pointer'
					}).appendTo(map).click(function(){
						//hide neighboring bullets and zoomables
						var width = settings.width;
						var height = settings.height;
						if(region.scan){
							width = region.scanwidth;
							height = region.scanheight;
						}
						$(this).siblings().fadeOut();
						$(this).hide()
							   .attr('src', region.image).load(function(){
									$(this).fadeIn('slow')
										   .animate({
												width: width,
												height: height,
												top: '0px',
												left: '0px'
											}, settings.zoomDuration, '', function(){
												displayMap(region);
											});
								});
					});
			}
			
			function rempx(string){
				return Number(string.substring(0, (string.length - 2)));
			}
			
			function addpx(string){
				return string + 'px';
			}
			
			function showHash(string){
				string = string.replace('#', '');
				showMapById(string);
			}
			
			//initialize map
			var hash = self.document.location.hash;
			if(hash.length > 0)
				showHash(hash);
			else{
				displayMap(settings.map);
			}
			
			return this;
		});
	}
})(jQuery);