que tal, el siguiente código es para la carga de una imagen que a su vez carga de la misma manera una imagen de sprite, la cual al darle clic muestra parte de la informacion cargada.. ahora bien este codigo localmente funciona sin problema sin embargo al subirlo al servidor no carga ninguna información
agradecería su valiosa información:
este ejemplo es tomando referencia y apoyo del sitio:
http://ncmarinescience.com/
$(window).load(function() {
function initializeMap(){
$('#searchlocations').hide();
$('#map').fadeOut(500, function(){
$('#map').empty().css({
width: '920px',
height: '710px',
backgroundImage: 'url(img/planmaestro/planmaestro2.jpg)',
position: 'relative'
});
$('#map').fadeIn();
loadBullets('planmaestro');
});
}
function loadBullets(id){
$('#map').load('section/' + id + '.html' , {}, function(){
//place bullets
$(this).children('a.bullet').each(function(){
var coords = $(this).attr('rel').split('-');
$(this).css({left: coords[0] + 'px', top: coords[1] + 'px'})
.hide()
.fadeIn()
.click(function(){showPopup($(this).attr('id'));}) ;
});
});
}
function showPopup(id){
$('#map div.popup').fadeOut();
var boxid = '#' + id + '-box';
$(boxid).fadeIn();
$('a.close').click(function(){
$(this).parent().fadeOut();
});
}
//initialize map
initializeMap();
});
el css:
#placeframe{
width:925px; height:auto; float:left; /*margin: 0 auto;*/ text-align:center;
}
#map a.bullet {
display: none;
position: absolute;
display: block;
width: 122px;
height: 50px;
background-image:url(../img/sprite.gif); /* purple */
background-repeat: no-repeat;
z-index: 9;
}
#map a.mandarinos{ background-position: 0px 0px; }
#map a.olivos { background-position: 0px -39px; }
#map a.abetos { background-position: 0px -86px; }
#map a.lomas { background-position: 0px -139px; }
#map a.cedros { background-position: 0px -186px; }
#map a.ciruelos { background-position: 0px -239px; }
#map a.bosques { background-position: 0px -300px; }
#map a.canadas { background-position: 0px -350px; }
#map a.club { background-position: 0px -400px; }
#map a.fresnos { background-position: 0px -450px; }
#map a.infinity { background-position: 0px -500px; }
#map a.parque { background-position: 0px -550px; }
#map a.terrazasZ { background-position: 0px -600px; }
#map a.bosquesD { background-position: 0px -650px; }
#map a.recinto { background-position: 0px -700px; }
#map a.centro { background-position: 0px -750px; }
#map a.grupo3 { background-position: 0px -800px; }
#map a.sancharbel { background-position: 0px -850px; }
#map a.konexo { background-position: 0px -900px; }
#map a.cluster { background-position: 0px -950px; }
#map a.issste { background-position: 0px -1000px; }
#map a.imss { background-position: 0px -1050px; }
#map a.cinepolis { background-position: 0px -1100px; }
#map a.cceem { background-position: 0px -1150px; }
#map a.terrazas { background-position: 0px -1200px; }
#map a.khepani{ background-position: 0px -1250px; }
#map a.montesori { background-position: 0px -1300px; }
#map a.varmond { background-position: 0px -1350px; }
#map a.tec { background-position: 0px -1400px; }
#map a.cumbres { background-position: 0px -1450px; }
#map a.bullet:hover { text-decoration: none; }
#map div.popup{
display: none;
position: absolute;
top: 150px;
left: 346px;
width: 225px;
height: 310px;
background-image: url(../img/popup.png); /*purple*/
background-repeat: no-repeat;
z-index: 10;
}
/*#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.gray { background-position: -225px 0px }
#map div.green { background-position: -450px 0px }
#map div.blue { background-position: -675px 0px }
#map div.red { background-position: -900px 0px }
#map div.popup h3 {
display: block;
padding: 8px 13px 13px 13px;
color: white;
font-size: 17px;
}
#map div.gray h3 { color:#FFF; }
#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: 15px;
}
#map div.popup a.close img{
border: none;
z-index: 100;
}
#map div.popup a.miniSite{
display: block;
position: absolute;
top: 266px;
left: 15px;
}
#map div.popup a.miniSite img{
border: none;
}