Hola me gustaria que me apoyaran con este codigo, lo que quiero implementar es que cuando la pantalla cambie de resolucion me muetre las coordenadas y al dar click en cada coordenada me muestre un mensaje.
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"> <link rel="stylesheet" type="text/css" href="css/guion05.css"> <div class="menu-emergente" style="border-radius: 15px; padding: 16px; width: 310px; height: auto; background:#D7E9F3; position:absolute; display: none; font-size:20px; -ms-border-radius: 15px;"></div> <img class="img-responsive" align="center" src="img/Ciclo_de_nitrogeno.png" alt="CICLO DE NITRÓGENO" id="imagenfondo" usemap="#ciclo"/> <!-- 1.-CICLO DE NITROGENO-->
<area id="mapa_fuente" shape="circle" coords="568,16,22" href="#" alt="Ciclo de nitrógeno" data-position="center" data-title="<b>Ciclo de Nitr
ógeno
</b>.El ciclo adquiere importancia debido a que las plantas y seres vivos no son capaces de asimilar directamente el nitr
ógeno."/>
<!--2.- Nitrógeno atmosférico-->
<area id="mapa_fuente" shape="circle" coords="515,181,26" href="#" alt="Nitrógeno atmosférico" data-title="<b>Nitr
ógeno atmosf
érico
</b>. El nitr
ógeno es uno de los elementos que m
ás abunda en la atm
ósfera. Los seres vivos necesitan de
él para realizar procesos biol
ógicos importantes." />
<!-- 3.-Fijación del nitrógeno-->
<area id="mapa_fuente" shape="circle" coords="320,318,26" href="#" alt="Fijación del nitrógeno" data-title="<b>Fijaci
ón del nitr
ógeno
</b>. El nitr
ógeno que se encuentra en el aire es llevado al suelo gracias a la acci
ón de los rel
ámpagos o por la actividad de ciertas bacterias que fungen como fijadoras del nitr
ógeno al convertir el gas en nitratos. Los nitratos una vez en el suelo son absorbidos por las plantas a trav
és de sus ra
íces para realizar la s
íntesis de prote
ínas." />
<!-- 4.-Asimilación-->
<area id="mapa_fuente" shape="circle" coords="361,408,26" href="#" alt="Asimilación" data-title="<b> Asimilaci
ón
</b>.Una vez que el nitrato es absorbido por la planta el nitr
ógeno es llevado al cuerpo de los seres vivos que se alimentan de ellas."/>
<!-- 5.-Nitrificación-->
<area id="mapa_fuente" shape="circle" coords="670,538,26" href="#" alt="Nitrificación" data-title="<b>Nitrificaci
ón
</b>. Algunas bacterias comunes oxidan el amoniaco (o amonio) a nitrito el cual es transformado por otro grupo de bacterias en nitrato que es la forma en la que es aprovechado por las plantas a trav
és de las ra
íces."/>
<!-- 6.-Desnitrificación-->
<area id="mapa_fuente" shape="circle" coords="767,420,26" href="#" alt="Desnitrificación" data-position="right" data-title="<b>Desnitrificaci
ón
</b>. Parte del nitrato que se encuentra en el suelo puede llegar a perderse durante el proceso de desnitrificaci
ón en el cual algunas bacterias transforman el nitrato en nitr
ógeno gaseoso y lo liberan a la atm
ósfera."/>
<!--7.- Amonificación-->
<area id="mapa_fuente" shape="circle" coords="495,711,26" href="#" alt="Amonificación" data-title="<b>Amonificaci
ón
</b>. Es el proceso en el cual algunas bacterias y hongos degradan los compuestos nitrogenados producto de la descomposici
ón de materiales org
ánicos complejos a compuestos simples liberando el exceso de nitr
ógeno en forma de amon
íaco o ion amonio."/>
<!--8.- Descomposición-->
<area id="mapa_fuente" shape="circle" coords="520,873,40" href="#" alt="Descomposición" data-position="bottom" data-title="<b>Descomposici
ón
</b>. Una parte de nitr
ógeno vuelve al suelo cuando hongos y bacterias descomponen los productos de desecho y organismos en descomposici
ón para liberar energ
ía. El amoniaco proveniente de urea y excremento es convertido en iones de amonio que posteriormente transforman en nitritos y nitratos que son absorbidos por las plantas. El nitr
ógeno es devuelto a la atmosfera gracias a bacterias nitrificantes y a los procesos geol
ógicos "/>
<!--9.- Lixiviación-->
<area id="mapa_fuente" shape="circle" style="margin-right:-2000px;" coords="202,697,26" href="#" alt="Lixiviación" data-title="<b>Lixiviaci
ón
</b>. Fen
ómeno de desplazamiento de sustancias solubles o dispersables (arcilla, sales, hierro, humos) causado por el movimiento de agua en el suelo, caracter
ístico de climas h
úmedos."/>
<!--10.- Eutrofización-->
<area id="mapa_fuente" shape="circle" coords="35,460,26" href="#" alt="Eutrofización" data-position="left" data-title="<b> Eutrofizaci
ón
</b>. Es el proceso natural de enriquecimiento de aguas con nutrientes. La descomposici
ón de la materia org
ánica produce una disminuci
ón de ox
ígeno en aguas profundas, sus efectos pueden interferir en los usos que hace el hombre del agua. Sucede en cuerpos de agua poco profundos y clima c
álido."/>
<!--area shape="default" nohref="nohref" /-->
<footer align="center">
<p align="center"><b>Fuentes:
</b> Abraham, Elena, et.al. (s.f.) Definición de eutrofización en Breve enciclopedia del ambiente. Argentina: Portal CRICYT. Consultado en:
<a href="http://www.cricyt.edu.ar/enciclopedia/terminos/Eutrofizac.htm" target="_blank"> http://www.cricyt.edu.ar/enciclopedia/terminos/Eutrofizac.htm
</a> Bioenciclopedia.(2016). Ciclo del nitr
ógeno. Consultado en
<a href="http://www.bioenciclopedia.com/ciclo-del-nitrogeno/" target="_blank"> http://www.bioenciclopedia.com/ciclo-del-nitrogeno/
</a> Muro, E. (s.f.) Definici
ón de Lixiviaci
ón en Breve enciclopedia del ambiente. Argentina: Portal CRICYT. Consultado en:
<br/> <a href="http://www.cricyt.edu.ar/enciclopedia/" target="_blank"> http://www.cricyt.edu.ar/enciclopedia/
</a> </footer>
<div class="modal fade" id="ModalInstrucciones" tabindex="-5" role="dialog" aria-hidden="true"> <img class="img-responsive" width="45%" style="padding-top: 40px;" src="img/Instrucciones.png"> <button type="button" id="btncontinuar" style="display: block;padding-top: -150px;position: relative;" class="btn btn-primary" data-dismiss="modal">Continuar
</button> <!--Codigo en java script para la ventana de instrucciones-->
<script type="text/javascript"> $("#ModalInstrucciones").modal("show");
$('area').click(function(e){
var obj = $('.menu-emergente');
obj.html($(this).data('title'));
var top_ = e.clientY + 15;
var left_ = e.clientX;
if($(this).data('position') == 'center'){
left_ = left_ - 150;
}else if($(this).data('position') == 'right'){
left_ = left_ - 310;
}else if($(this).data('position') == 'bottom'){
top_ = top_ - 300;
letf_ = left_ - 300;
}
obj.css({
display: 'block',
top: top_+'px',
left: left_+'px'
});
});
//cerrar ventana
$("#imagenfondo").click(function(){
$(".menu-emergente").hide();
});
Mostrar Temas
