Coordenadas de una imagen

Layla123 · 11 Mayo 2016, 19:19 PM

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.

Código (html4strict) [Seleccionar]


<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="es">
 <title>CICLO DE NITR&Oacute;GENO</title>
 <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">
</head>
<body>
 <div class="container">
 <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&Oacute;GENO" id="imagenfondo" usemap="#ciclo"/>
      <map name="ciclo">
      <!-- 1.-CICLO DE NITROGENO-->
      <area id="mapa_fuente" shape="circle" coords="568,16,22" href="#" alt="Ciclo de nitr&oacute;geno" data-position="center" data-title="<b>Ciclo de Nitr&oacute;geno</b>.El ciclo adquiere importancia debido a que las plantas y seres vivos no son capaces de asimilar directamente el nitr&oacute;geno."/>
      <!--2.- Nitrógeno atmosférico-->
      <area id="mapa_fuente" shape="circle" coords="515,181,26" href="#" alt="Nitr&oacute;geno atmosf&eacute;rico" data-title="<b>Nitr&oacute;geno atmosf&eacute;rico</b>. El nitr&oacute;geno es uno de los elementos que m&aacute;s abunda en la atm&oacute;sfera. Los seres vivos necesitan de &eacute;l para realizar procesos biol&oacute;gicos importantes." />
            <!-- 3.-Fijación del nitrógeno-->
            <area id="mapa_fuente" shape="circle" coords="320,318,26" href="#" alt="Fijaci&oacute;n del nitr&oacute;geno" data-title="<b>Fijaci&oacute;n del nitr&oacute;geno</b>. El nitr&oacute;geno que se encuentra en el aire es llevado al suelo gracias a la acci&oacute;n de los rel&aacute;mpagos o por la actividad de ciertas bacterias que fungen como fijadoras del nitr&oacute;geno al convertir el gas en nitratos. Los nitratos una vez en el suelo son absorbidos por las plantas a trav&eacute;s de sus ra&iacute;ces para realizar la s&iacute;ntesis de prote&iacute;nas." />
            <!-- 4.-Asimilación-->
            <area id="mapa_fuente" shape="circle" coords="361,408,26"  href="#" alt="Asimilaci&oacute;n" data-title="<b> Asimilaci&oacute;n</b>.Una vez que el nitrato es absorbido por la planta el nitr&oacute;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&oacute;n" data-title="<b>Nitrificaci&oacute;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&eacute;s de las ra&iacute;ces."/>
            <!-- 6.-Desnitrificación-->
            <area id="mapa_fuente" shape="circle" coords="767,420,26"  href="#" alt="Desnitrificaci&oacute;n" data-position="right" data-title="<b>Desnitrificaci&oacute;n</b>. Parte del nitrato que se encuentra en el suelo puede llegar a perderse durante el proceso de desnitrificaci&oacute;n en el cual algunas bacterias transforman el nitrato en nitr&oacute;geno gaseoso y lo liberan a la atm&oacute;sfera."/>
            <!--7.- Amonificación-->
            <area id="mapa_fuente" shape="circle" coords="495,711,26"  href="#" alt="Amonificaci&oacute;n" data-title="<b>Amonificaci&oacute;n</b>. Es el proceso en el cual algunas bacterias y hongos  degradan los compuestos nitrogenados producto de la descomposici&oacute;n de materiales org&aacute;nicos complejos a compuestos simples liberando el exceso de nitr&oacute;geno en forma de amon&iacute;aco o ion amonio."/>
            <!--8.- Descomposición-->
            <area id="mapa_fuente" shape="circle" coords="520,873,40"  href="#" alt="Descomposici&oacute;n" data-position="bottom" data-title="<b>Descomposici&oacute;n</b>. Una parte de nitr&oacute;geno vuelve al suelo cuando hongos y bacterias descomponen los productos de desecho y organismos en descomposici&oacute;n para liberar energ&iacute;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&oacute;geno es devuelto a la atmosfera gracias a bacterias nitrificantes y a los procesos geol&oacute;gicos "/>
            <!--9.- Lixiviación-->
            <area id="mapa_fuente" shape="circle" style="margin-right:-2000px;" coords="202,697,26"  href="#" alt="Lixiviaci&oacute;n" data-title="<b>Lixiviaci&oacute;n</b>. Fen&oacute;meno de desplazamiento de sustancias solubles o dispersables (arcilla, sales, hierro, humos) causado por el movimiento de agua en el suelo, caracter&iacute;stico de climas h&uacute;medos."/>
            <!--10.- Eutrofización-->
            <area id="mapa_fuente" shape="circle" coords="35,460,26"  href="#" alt="Eutrofizaci&oacute;n" data-position="left" data-title="<b> Eutrofizaci&oacute;n</b>. Es el proceso natural de enriquecimiento de aguas con nutrientes. La descomposici&oacute;n de la materia org&aacute;nica produce una disminuci&oacute;n de ox&iacute;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&aacute;lido."/>
            <!--area shape="default" nohref="nohref" /-->
      </map>
    <footer align="center">
                
                   <p align="center"><b>Fuentes:</b>
                   </br>
                  Abraham, Elena, et.al. (s.f.) Definici&oacute;n de eutrofizaci&oacute;n en Breve enciclopedia del ambiente.  Argentina: Portal CRICYT. Consultado en:
                  <br/>
                   <a href="http://www.cricyt.edu.ar/enciclopedia/terminos/Eutrofizac.htm" target="_blank"> http://www.cricyt.edu.ar/enciclopedia/terminos/Eutrofizac.htm </a> 
                  <br/>
                   Bioenciclopedia.(2016). Ciclo del nitr&oacute;geno. Consultado en<a href="http://www.bioenciclopedia.com/ciclo-del-nitrogeno/" target="_blank">  http://www.bioenciclopedia.com/ciclo-del-nitrogeno/</a>
                    <br/>
                   Muro, E. (s.f.) Definici&oacute;n de Lixiviaci&oacute;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>
                  </p>
      </footer>
 </div>
 <div class="modal fade" id="ModalInstrucciones" tabindex="-5" role="dialog" aria-hidden="true">
  <center>
    <div id="modalinstruc">
      <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>
    </div>
  </center>
  </div>
</body>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/guion05.js"></script>
<!--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();
  });
  
    </script>
</html>

Test Foro de elhacker.net SMF 2.1

Coordenadas de una imagen

Layla123