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

 

 


Tema destacado: Tutorial básico de Quickjs


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