elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Coordenadas de una imagen
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Coordenadas de una imagen  (Leído 2,166 veces)
Layla123

Desconectado Desconectado

Mensajes: 17



Ver Perfil
Coordenadas de una imagen
« en: 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
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="es">
  4. <title>CICLO DE NITR&Oacute;GENO</title>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  8. <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
  9. <link rel="stylesheet" type="text/css" href="css/guion05.css">
  10. </head>
  11. <div class="container">
  12. <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>
  13.          <img class="img-responsive" align="center" src="img/Ciclo_de_nitrogeno.png" alt="CICLO DE NITR&Oacute;GENO" id="imagenfondo" usemap="#ciclo"/>
  14.      <map name="ciclo">
  15.      <!-- 1.-CICLO DE NITROGENO-->
  16.      <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."/>
  17.      <!--2.- Nitrógeno atmosférico-->
  18.      <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." />
  19.            <!-- 3.-Fijación del nitrógeno-->
  20.            <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." />
  21.            <!-- 4.-Asimilación-->
  22.            <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."/>
  23.            <!-- 5.-Nitrificación-->
  24.            <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."/>
  25.            <!-- 6.-Desnitrificación-->
  26.            <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."/>
  27.            <!--7.- Amonificación-->
  28.            <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."/>
  29.            <!--8.- Descomposición-->
  30.            <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 "/>
  31.            <!--9.- Lixiviación-->
  32.            <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."/>
  33.            <!--10.- Eutrofización-->
  34.            <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."/>
  35.            <!--area shape="default" nohref="nohref" /-->
  36.      </map>
  37.    <footer align="center">
  38.  
  39.                   <p align="center"><b>Fuentes:</b>
  40.                   </br>
  41.                  Abraham, Elena, et.al. (s.f.) Definici&oacute;n de eutrofizaci&oacute;n en Breve enciclopedia del ambiente.  Argentina: Portal CRICYT. Consultado en:
  42.                  <br/>
  43.                   <a href="http://www.cricyt.edu.ar/enciclopedia/terminos/Eutrofizac.htm" target="_blank"> http://www.cricyt.edu.ar/enciclopedia/terminos/Eutrofizac.htm </a>
  44.                  <br/>
  45.                   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>
  46.                    <br/>
  47.                   Muro, E. (s.f.) Definici&oacute;n de Lixiviaci&oacute;n en Breve enciclopedia del ambiente.  Argentina: Portal CRICYT. Consultado en:<br/>
  48.           <a href="http://www.cricyt.edu.ar/enciclopedia/" target="_blank"> http://www.cricyt.edu.ar/enciclopedia/ </a>
  49.                  </p>
  50.      </footer>
  51. </div>
  52. <div class="modal fade" id="ModalInstrucciones" tabindex="-5" role="dialog" aria-hidden="true">
  53.  <center>
  54.    <div id="modalinstruc">
  55.      <img class="img-responsive" width="45%" style="padding-top: 40px;" src="img/Instrucciones.png">
  56.      <button type="button" id="btncontinuar" style="display: block;padding-top: -150px;position: relative;" class="btn btn-primary" data-dismiss="modal">Continuar</button>
  57.    </div>
  58.  </center>
  59.  </div>
  60. </body>
  61. <script src="js/jquery-2.2.1.min.js"></script>
  62. <script src="js/jquery-ui.min.js"></script>
  63. <script src="js/bootstrap.min.js"></script>
  64. <script src="js/guion05.js"></script>
  65. <!--Codigo en java script para la ventana de instrucciones-->
  66. <script type="text/javascript">
  67.  $("#ModalInstrucciones").modal("show");
  68.  
  69.  
  70.  $('area').click(function(e){
  71.  var obj = $('.menu-emergente');
  72.  
  73.  obj.html($(this).data('title'));
  74.  
  75.  var top_ = e.clientY + 15;
  76.  var left_ = e.clientX;
  77.  
  78.  if($(this).data('position') == 'center'){
  79.    left_ = left_ - 150;
  80.  }else if($(this).data('position') == 'right'){
  81.    left_ = left_ - 310;
  82.  }else if($(this).data('position') == 'bottom'){
  83.    top_ = top_ - 300;
  84.    letf_ = left_ - 300;
  85.  }
  86.  
  87.  obj.css({
  88.                display: 'block',
  89.                top: top_+'px',
  90.                left: left_+'px'
  91.              });
  92.  });
  93.  //cerrar ventana
  94.  $("#imagenfondo").click(function(){
  95.  $(".menu-emergente").hide();
  96.  });
  97.  
  98.    </script>
  99. </html>
  100.  
  101.  
  102.  



En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
programa que mueva un enemigo(imagen) segun unas coordenadas de un .txt
Programación C/C++
dilberth 0 1,717 Último mensaje 4 Diciembre 2011, 20:38 pm
por dilberth
[APORTE] (ImageMatching) buscar una imagen en la pantalla y devolver coordenadas
.NET (C#, VB.NET, ASP)
Eleкtro 4 4,220 Último mensaje 28 Junio 2014, 21:19 pm
por El Benjo
[C#] detectar imagen y obtener coordenadas
.NET (C#, VB.NET, ASP)
nevachana 8 13,226 Último mensaje 7 Febrero 2015, 17:39 pm
por nevachana
Coordenadas UTM
Foro Libre
Meta 8 5,501 Último mensaje 30 Abril 2015, 13:34 pm
por Meta
Coordenadas de ratón al pulsar
Java
fileteruso 1 2,395 Último mensaje 11 Diciembre 2019, 22:07 pm
por fileteruso
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines