Foros del Web » Programando para Internet » Javascript »

etiquetado en fotos

Estas en el tema de etiquetado en fotos en el foro de Javascript en Foros del Web. Buenas Pues como bien dice el titulo tengo medio sistema de etiquetado, es decir al hacer clic guardo el x e y de cada foto, ...
  #1 (permalink)  
Antiguo 28/09/2012, 05:32
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 12 años, 5 meses
Puntos: 10
etiquetado en fotos

Buenas
Pues como bien dice el titulo tengo medio sistema de etiquetado, es decir al hacer clic guardo el x e y de cada foto, pues bien mi problema o duda es el continuar este sistema quiero que al pasar el mouse por la foto este me muestre un cuadro donde este alguien etiquetado y me diga tambien el nombre o solo con el nombre me valdria pero es que nose como hacer tal cosa, alguien tiene idea de como hacerlo, la funcion de jquery se que es la de mouseover o algo asi pero me gustaria saber como puedo implementar tal funcion con los nombres y/o el div con el nombre. Si alguien lo conoce quiero una cosa estilo facebook o tuenti. un saludo gracias.
  #2 (permalink)  
Antiguo 28/09/2012, 06:10
Avatar de Perr0  
Fecha de Ingreso: mayo-2005
Ubicación: Santiago de Chile, Chile
Mensajes: 676
Antigüedad: 19 años
Puntos: 79
Respuesta: etiquetado en fotos

tienes que googlear haciendo referencia a tooltips y mapeo de imagenes


salu2
__________________
Numerador Mp3 en Access =)
http://www.mediafire.com/download/r9...pdw/mp3(2).zip

Última edición por Perr0; 28/09/2012 a las 06:17
  #3 (permalink)  
Antiguo 28/09/2012, 07:19
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: etiquetado en fotos

lo puedes hacer
con javascript
con css
con cavas
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #4 (permalink)  
Antiguo 28/09/2012, 07:27
Avatar de Perr0  
Fecha de Ingreso: mayo-2005
Ubicación: Santiago de Chile, Chile
Mensajes: 676
Antigüedad: 19 años
Puntos: 79
Respuesta: etiquetado en fotos

te hice un ejemplo, espero te sirva, es sencillo, mapeas y colocas la función tooltip con la palabra "event" y luego el texto que quieres que aparezca, acepta código HTML por usar el innerHTML:

Código HTML:
Ver original
  1. <img src="http://imagenes.es.sftcdn.net/es/scrn/54000/54039/cars-icons-1.jpg" width="500" height="350" border="0" usemap="#Map" style="z-index:0">
  2. <map name="Map">
  3.   <area shape="rect" coords="21,20,107,90" href="#" onMouseMove="tooltip(event, 'hola este es un tooltip de<br>Chick Hicks')">
  4.   <area shape="rect" coords="115,23,209,92" href="#" onMouseMove="tooltip(event, 'hola es un tooltip con imagen<br><img src=\'http://www.mimitoys.ie/uploads/media/category-images/32226-BG1925.jpg\' width=\'100\' height=\'100\'>Doc Hudson')">
  5.   <area shape="rect" coords="22,106,109,170" href="#" onMouseMove="tooltip(event, 'ejemplo con tabla<table width=\'0\' border=\'1\' cellspacing=\'2\' cellpadding=\'3\'><tr><td>Nombre</td><td>Lightning McQueen</td></tr><tr><td>Sexo</td><td>Macho</td></tr><tr><td>Edad</td><td>N/A</td></tr></table>')">
  6. </map>
  7. <div id="dtool"></div>
  8. function tooltip(e,t){
  9.     d = document.getElementById("dtool");
  10.     d.innerHTML = t;
  11.     posx = (document.all) ? window.event.clientX : e.clientX;
  12.     posy = (document.all) ? window.event.clientY : e.clientY;
  13.     d.style.left = posx+13;
  14.     d.style.top = posy-13;
  15.     d.style.display = "block";
  16.     window.onmouseout = function(){d.style.display = "none";}
  17. }
  18. *{font-family:Verdana;font-size:10px;}
  19. #dtool{
  20. border:3px solid #7D6244;
  21. background-color:#FFFF80;
  22. padding:4px 10px;
  23. font-family:Verdana;
  24. font-size:10px;
  25. color:#111;
  26. position:absolute;
  27. display:none;
  28. }

salu2
__________________
Numerador Mp3 en Access =)
http://www.mediafire.com/download/r9...pdw/mp3(2).zip
  #5 (permalink)  
Antiguo 29/09/2012, 04:19
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 12 años, 5 meses
Puntos: 10
Respuesta: etiquetado en fotos

Cita:
Iniciado por Perr0 Ver Mensaje
te hice un ejemplo, espero te sirva, es sencillo, mapeas y colocas la función tooltip con la palabra "event" y luego el texto que quieres que aparezca, acepta código HTML por usar el innerHTML:

Código HTML:
Ver original
  1. <img src="http://imagenes.es.sftcdn.net/es/scrn/54000/54039/cars-icons-1.jpg" width="500" height="350" border="0" usemap="#Map" style="z-index:0">
  2. <map name="Map">
  3.   <area shape="rect" coords="21,20,107,90" href="#" onMouseMove="tooltip(event, 'hola este es un tooltip de<br>Chick Hicks')">
  4.   <area shape="rect" coords="115,23,209,92" href="#" onMouseMove="tooltip(event, 'hola es un tooltip con imagen<br><img src=\'http://www.mimitoys.ie/uploads/media/category-images/32226-BG1925.jpg\' width=\'100\' height=\'100\'>Doc Hudson')">
  5.   <area shape="rect" coords="22,106,109,170" href="#" onMouseMove="tooltip(event, 'ejemplo con tabla<table width=\'0\' border=\'1\' cellspacing=\'2\' cellpadding=\'3\'><tr><td>Nombre</td><td>Lightning McQueen</td></tr><tr><td>Sexo</td><td>Macho</td></tr><tr><td>Edad</td><td>N/A</td></tr></table>')">
  6. </map>
  7. <div id="dtool"></div>
  8. function tooltip(e,t){
  9.     d = document.getElementById("dtool");
  10.     d.innerHTML = t;
  11.     posx = (document.all) ? window.event.clientX : e.clientX;
  12.     posy = (document.all) ? window.event.clientY : e.clientY;
  13.     d.style.left = posx+13;
  14.     d.style.top = posy-13;
  15.     d.style.display = "block";
  16.     window.onmouseout = function(){d.style.display = "none";}
  17. }
  18. *{font-family:Verdana;font-size:10px;}
  19. #dtool{
  20. border:3px solid #7D6244;
  21. background-color:#FFFF80;
  22. padding:4px 10px;
  23. font-family:Verdana;
  24. font-size:10px;
  25. color:#111;
  26. position:absolute;
  27. display:none;
  28. }

salu2
Si me sirve pero no tengo nada mas que dos coordenadas Y y la X y aqui pones 4 como puedo sacar las otras dos coordenadas?? es que nunca trabaje con cosas como esta jeje gracias un saludo.
  #6 (permalink)  
Antiguo 29/09/2012, 16:05
Avatar de Perr0  
Fecha de Ingreso: mayo-2005
Ubicación: Santiago de Chile, Chile
Mensajes: 676
Antigüedad: 19 años
Puntos: 79
Respuesta: etiquetado en fotos

las 4 coordenadas son para el mapa del área rectangular en la imagen para cada etiquetado, las coordenadas X e Y los detecta solo mediante el área del mapa, para aprender a hacerlo debes googlear, ya ni me acuerdo, lo hice con dreamweaver
salu2
__________________
Numerador Mp3 en Access =)
http://www.mediafire.com/download/r9...pdw/mp3(2).zip
  #7 (permalink)  
Antiguo 29/09/2012, 16:08
Avatar de Perr0  
Fecha de Ingreso: mayo-2005
Ubicación: Santiago de Chile, Chile
Mensajes: 676
Antigüedad: 19 años
Puntos: 79
Respuesta: etiquetado en fotos

ya me acordé, los 4 puntos son las coordenadas X e Y del vértice superior izquierdo y las otras dos del vértice inferior derecho
__________________
Numerador Mp3 en Access =)
http://www.mediafire.com/download/r9...pdw/mp3(2).zip
  #8 (permalink)  
Antiguo 30/09/2012, 03:00
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 12 años, 5 meses
Puntos: 10
Respuesta: etiquetado en fotos

Ya lo conseguio me vino bien lo de IsaBelM gracias a todos me abeis ayudao mucho pensaba que era mas dificil pero con vuestra ayuda lo habeis hecho mas facil gracias.
  #9 (permalink)  
Antiguo 03/10/2012, 05:19
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 12 años, 5 meses
Puntos: 10
Respuesta: etiquetado en fotos

bien os agradezco la ayuda que me disteis pero ahora tengo otro problema con el mismo proyecto, resulta que cada vez que hago el click se etiqueta de nuevo pero me gustarian tres cosas:
1- que al hacer click me de opcion de meter el nombre de alguno de mis amigos para etiquetarlo a el, y nose como hacerlo, ya que yo no se mucho de javascript.
2- poner un tooltip como el de facebook que es un restangulito negro con una flecha, que el la web de jquery no me deja bajarlo porque dice que esta de mantenimiento y no se como se hace.
3- que no me deje etiquetarme dos veces en la misma foto, es decir que me valide si ese id existe en la base ono y e googleado pero no se como hacerlo, este codigo es el que yo tengo ahora:
Código Javascript:
Ver original
  1. <?php  
  2. session_start();
  3. include("header.php");
  4. if (!isset($_SESSION['logueado_usuario'])) {
  5.     include ("login.php");  
  6. }
  7.     else {  
  8.     $nombre =$_SESSION['logueado_nombre'];
  9.     $id_usuario=$_SESSION['logueado_id'];
  10. $obejeto=$_REQUEST['objeto'];
  11.  
  12. }
  13. if(!empty($_SESSION['logueado_nombre']))
  14.  
  15. {
  16. include("privados/config.php");
  17. $id=$_GET['id'];
  18. if($_POST)    
  19. {
  20.     set_time_limit(0);      
  21.     /*header("Edge-control: no-store");*/  
  22.     sleep(0);
  23.     include('config.php');
  24.     $notificaciones=mysql_query("select * from comentario where id_foto='$id'",$conexion);
  25.     while($rs=mysql_fetch_assoc($notificaciones))
  26.     {?><div id="cacao"><?php  $coment_foto=utf8_decode($rs['comentario']);
  27.     echo   $coment_foto."<br>";
  28.     ?></div><?php }  
  29.      //echo $rs['id_logueado']."<br>";
  30.     mysql_close($conexion);    
  31.     exit();  
  32. }
  33. $resultados=mysql_query("select * from imagenes where id='$id' and id_logueado='1'",$conexion) or
  34.   die("Problemas en el select:".mysql_error());
  35.  $a = mysql_query("select max(id) from imagenes where id <".$id. " and id_logueado='1'");
  36. $ida = mysql_result($a,0);
  37. mysql_free_result($a);
  38. $b = mysql_query("select min(id) from imagenes where id >".$id. " and id_logueado='1'");
  39. $idb = mysql_result($b,0);
  40. mysql_free_result($b);
  41. $a1 = mysql_query("select max(id) from imagenes where id_logueado='1'");
  42. $ida1 = mysql_result($a1,0);
  43. mysql_free_result($a1);
  44. $b1 = mysql_query("select min(id) from imagenes where id_logueado='1'");
  45. $idb1 = mysql_result($b1,0);
  46. mysql_free_result($b1);
  47. ?><div align="center"><div align="right" id="pasar"><a href="galeria.php?id=<?php echo $id; ?>" >Volver</a></div>
  48. <?php
  49. /*$fotos=mysql_query("select * from imagenes where id='$id'",$conexion);
  50. while($fot=mysql_fetch_array($fotos))
  51. {
  52. echo '<img src="'.$fot['nombre'].'"';
  53. }*/
  54.  
  55. ?>
  56.  
  57. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
  58.         <script src='js/jquery.autosize.js'></script>
  59.         <script>
  60.             $(function(){
  61.                 $('textarea').autosize();
  62.             });
  63.         </script>
  64. <script language="JavaScript" type="text/javascript" src="ajax.js"></script>
  65. <script language="JavaScript">
  66. function nuevoAjax(){
  67.                     var xmlhttp=false;
  68.                      try {
  69.                       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  70.                      } catch (e) {
  71.                       try {
  72.                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  73.                       } catch (E) {
  74.                        xmlhttp = false;
  75.                       }
  76.                      }
  77.  
  78.                     if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  79.                       xmlhttp = new XMLHttpRequest();
  80.                     }
  81.                     return xmlhttp;
  82.                     }
  83. function presionado(e)
  84. {
  85.   if (window.event) //es ie?
  86.   {
  87. divResultado = document.getElementById('resultado');
  88.     var foto = "<?php echo $id; ?>" ;
  89.    
  90.     ajax=nuevoAjax();
  91.    
  92.     ajax.open("GET","etiquetar.php?x="+window.event.clientX+"&y="+window.event.clientY+"&id="+foto,true);
  93.     ajax.onreadystatechange=function(){
  94.         if(ajax.readyState==4){
  95.             alert("Se ha etiquetado con exito.");
  96.         }
  97.     }
  98.     ajax.setRequestHeader("Conten-Type","application/x-www-form-urlencoded");
  99.     ajax.send("x="+window.event.clientX+"&y="+window.event.clientY)
  100.  
  101.    
  102.   }
  103.   else
  104.   {
  105.   var x1=e.clientX;
  106.   var y1=e.clientY;
  107.   divResultado = document.getElementById('resultado');
  108.    
  109.     ajax=nuevoAjax();
  110.    
  111.     ajax.open("GET","etiquetar.php?x="+e.clientX+"&y="+e.clientY,true);
  112.     ajax.onreadystatechange=function(){
  113.         if(ajax.readyState==4){
  114.             divResultado.innerHTML = ajax.responseText
  115.         }
  116.     }
  117.     ajax.setRequestHeader("Conten-Type","application/x-www-form-urlencoded");
  118.     ajax.send("x="+e.clientX+"&y="+e.clientY)
  119.  
  120. }
  121.  
  122. }
  123.  
  124. </script>
  125. <html>
  126. <head>    
  127. </head>
  128. <body>
  129.  
  130.  
  131.  
  132.    
  133. <script type="text/javascript" src="js/comet.js"></script>
  134. <style type="text/css">
  135. #cacao{background-color: #EEEFF0;
  136.     padding: 5px;
  137.     width: 500px;
  138.     margin: auto;
  139.     border-top:2px double #91969B ;
  140.     border-left:2px double #91969B ;
  141.     border-right:2px double #91969B ;
  142.     border-bottom:2px double #91969B ;
  143.     }
  144.     div.mapa_imagen {
  145.     position:static;
  146. }
  147. ul.notas li {
  148.   list-style: none;
  149.   display: none;
  150.   position: absolute;
  151. /*  border: medium solid white;*/
  152.   background: url("esta_imagen_no_existe");
  153. }
  154. div.mapa_imagen:hover ul.notas li {
  155.   display: block;
  156. }
  157. ul.notas li p {
  158.   margin: 10px 0 0 0;
  159.   padding: .3em;
  160.   display: none;
  161.   background: #FFF;
  162.   /*opacity: 0.65;*/
  163.   position: absolute;
  164.   top: 100%;
  165. }
  166. ul.notas li:hover p {
  167.   display: block;
  168. }
  169.    
  170. </style> <?php
  171. $con=mysql_query("select * from etiqueta where id_foto='$id'",$conexion);
  172. $i=1;
  173. echo '<div class="mapa_imagen">';
  174. while($ima=mysql_fetch_array($con))
  175. {
  176. ?><style>ul.notas li#nota<?php echo $i; ?> {
  177.   width: 100px; height: 100px; top: <?php echo $ima['y']."px"?>; left: <?php echo $ima['x']."px"?>;
  178. }</style><?php
  179. $consulta=mysql_query("select * from usuarios where id='$ima[id_logueado]'",$conexion);
  180. while($cons=mysql_fetch_array($consulta))
  181. {
  182.     echo '<ul class="notas">';
  183.     echo '<li id="nota'.$i.'"><p>'.$cons['nombre'].'</p></li>';
  184.     echo '</ul>';
  185.    
  186.     }$i++;
  187. }
  188.  
  189. $comentarios=mysql_query("select * from comentario where id_foto='$id'",$conexion);
  190. while($comen=mysql_fetch_array($comentarios))
  191. {
  192.     $comentario=utf8_decode($comen['comentario']);
  193. }
  194.   while($fot=mysql_fetch_assoc($resultados))
  195. {
  196. $foto_nombre=$fot['nombre'];
  197. $titulo=$fot['titulo'];
  198. $fecha=$fot['fecha'];
  199. if(isset($idb) && !empty($idb))
  200. {
  201.  echo '<img src="'.$foto_nombre.'" onclick="presionado(event);" "usemap="#Map" style="z-index:0">';
  202.  echo '<br>';
  203.  /*echo $comentario;*/
  204. }
  205. else
  206. {
  207. echo '<img src="'.$foto_nombre.'" onclick="presionado(event);" usemap="#Map" style="z-index:0">';
  208. echo '<br>';
  209. /*echo $comentario;*/
  210. }
  211. }
  212. echo "<br>";
  213. ?><div align="right" id="pasar" style="margin-top:-48%; position:relative"><?php echo $titulo."<br>"; echo $fecha;  ?></div><?php
  214. ?>
  215.  
  216. <script type="text/javascript">
  217. function sapeartextarea(){
  218.     var nav=(document.all)?"%0D":"%0A"
  219.     var ref=document.getElementById("textarea")
  220.     textoarea=escape(ref.value)
  221.     lineas=textoarea.split(nav)
  222.     lin=lineas.length
  223.     if(lin>4){
  224.         ref.rows=lin
  225.         document.getElementById("clin").innerHTML=lin
  226.     }
  227. }
  228. document.onkeyup = function(){sapeartextarea()}
  229. </script>
  230. <div id="respuesta"></div><?php }?>
  231. </body>
  232. </html>
  233. <br /></div>
  234. </body>
  235. </html>
gracias un saludo.

Última edición por edie8; 03/10/2012 a las 05:47

Etiquetas: fotos, funcion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:58.