Hacer que las imágenes se arrastren (2)

16 de diciembre de 2009 84 comentarios ,
Después de haber visto que podemos hacer que las imágenes se arrastren vamos a darle algo de utilidad, por ejemplo que la imagen tenga un enlace. Para ello vamos a usar la propiedad ondblCick de Javascript, es decir, un doble click, ya que el primer click servirá para mover y arrastrar la imagen, y con un doble click abrirá el enlace:



<img id="draglink1" style="cursor:move; border:0px;" ondblClick="javascript:window.open('URL del enlace')" src="URL de la imagen"/>
<script type="text/javascript">new Draggable('draglink1');</script>


Sólo se cambia la URL de la imagen y la URL del enlace que abrirá. Por supuesto también deberemos cambiar la ID cada vez que lo usemos (color verde).
Lo mismo podríamos hacer con un menú, una imagen flotante, o lo que se les ocurra, será cuestión de echar a volar la imaginación y hacer experimentos.

También podemos usar este mismo efecto para las palabras, por ejemplo, la palabra 'claveles' se puede mover:


No te amo como si fueras rosa de sal, topacio
o flecha de claveles que propagan el fuego:
te amo como se aman ciertas cosas oscuras,
secretamente, entre la sombra y el alma.



No te amo como si fueras rosa de sal, topacio
o flecha de <span id="palabra1" style=" font-weight:bold; cursor:move;"> claveles</span> que propagan el fuego:
te amo como se aman ciertas cosas oscuras,
secretamente, entre la sombra y el alma.
<script type="text/javascript">new Draggable('palabra1');</script>


Y de igual modo podemos hacer que la palabra "arrastrable" tenga un enlace haciendo doble click sobre ella:


Te amo como la planta que no florece y lleva
dentro de sí, escondida, la luz de aquellas flores,
y gracias a tu amor vive oscuro en mi cuerpo
el apretado aroma que ascendió de la tierra.


Te amo como la planta que no florece y lleva
dentro de sí, escondida, la luz de aquellas flores,
y gracias a tu <span id="palabra2" style="font-weight:bold; cursor:move;" ondblclick="javascript:window.open('URL del enlace')">amor</span> vive oscuro en mi cuerpo
el apretado aroma que ascendió de la tierra.
<script type="text/javascript">new Draggable('palabra2');</script>


Nuevamente en ambos casos se cambia la ID y en el caso del segundo ejemplo se agrega la URL de la imagen donde se indica.

Como puedes ver es muy sencillo de usar y sólo hemos utilizado Scriptaculous para generar este efecto drag & drop, y con un poco de creatividad podrás crear elementos interactivos en banners, imágenes, textos o cualquier otra cosa; sobretodo los más pequeños lo agradecerán:

carrolapizsolflor
Coloca las imágenes en su lugar

papel


84 comentarios en:

" Hacer que las imágenes se arrastren (2) "

  1. Que post anterior te mandaste! [Hacer que las imágenes se arrastren (1)]
    Muchos comentarios en poco tiempo.
    Este blog cada día tiene más adherentes.
    El sacrificio y la dedicación, siempre, tiene su recompensa.
    ¡¡¡Adelante Potro!!!

    Saludos y éxito.
    Jpz.-

    ResponderEliminar
  2. Hola Jpz,

    Al parecer les gustó la idea de hacer más interactivo el blog, supongo que por ahí será el futuro de las páginas web.
    Muchas gracias por tus comentarios y por tus deseos.

    Saludos!

    ResponderEliminar
  3. Yo el primero que le interesaa!! JAJA!
    Muchisimas gracias potro.
    Te acuerdas del directirio aquel que me dio algunos problemas, con las tablas y todo aquello, pues quiero hacer todo aquello arrastrable para que puedan ordenar como quieran!!

    Me gusta mucho el tema de hacer interactivo nuestros blogs! Muchisimas gracias!

    Saludos! Por si no te acuerdas del directorio:
    New Generation of Sound

    ResponderEliminar
  4. Hola potro
    Este truco tambien me encanto! bueno de hecho todos tus trucos y tutoriales realmente me gustan y son muy buenos me has ayudado mucho tambien lo colocare en mi blog ya tengo una idea en mente

    saludos

    ResponderEliminar
  5. Dj Nestor, claro que me acuerdo, y sin duda se verá muy original poner los banners de directorio en modo de arrastrar.

    samantha, alguna buena idea saldrá, estoy seguro, saludos!

    Julián Cardoso, ya me daré una vuelta para ver cómo te ha quedado ;)

    ResponderEliminar
  6. Wow bro! no se me había ocurrido usar eso para hacer elementos interactivos. La verdad que esta fabuloso, imagina las cosas que pueden hacer las docentes con este fabuloso truco! y lo digo porque en la familia hay una docente!

    Sólo tengo que pedirte un favor, para la próxima si puedes hazlo mas sencillo, porque todavía no le he podido resolver. XD


    Un abrazo!!!

    ResponderEliminar
  7. JAJAJAJAJAJAJAJAJAJAJAJAJAJAJJAJA

    Me hace mal leerte cuando hay gente cerca, apenas te leo y suelto la carcajada, volteo al rededor y veo a los vecinos asomados por la ventana asustados por mi risa, jajajajaja.

    ResponderEliminar
  8. Uhhhhhhhhh :( perdona bro, los vecinos ya deben estar juntando firmas para que te vayas del vecindario, y todo por mi culpa :(

    XD


    Un abrazo!!!

    ResponderEliminar
  9. Hay Potro eres muy bueno en esto
    y espero que sigas asi
    y no coloque un post donde digas "Disculpase me terminaron los trucos" espero que sigan por mucho tiempo ok
    nos vemos
    gran truco

    ResponderEliminar
  10. El potro, como hago para que la imagen flotante de mi blog se pueda arrastrar?

    No entendi mucho eso de la Id.

    ResponderEliminar
  11. Jajaja, sus conversaciones me matan, además, el primer comentario que lei fue el de Cyberblogger:

    "Uhhhhhhhhh :( perdona bro, los vecinos ya deben estar juntando firmas para que te vayas del vecindario, y todo por mi culpa :("

    Jajaj, bueno, volviendo a mi comentario, me impresionó esto, no hay que usar scriptaculous y es una gran solución para muchos...

    ResponderEliminar
  12. brother, no te preocupes, mis vecinos hacen más ruido que yo.

    Alex, el problema no es tanto que se acaben los posts, sino que se acaben las ganas, pero ojalá y no.

    AlexTfe26, lee el post anterior donde explico cómo hacerlo: Hacer que las imágenes se arrastren (1)

    Ascesino96, sí hay que usarlo, este post es parte del post anterior, así que de igual forma se tiene que usar Scriptaculous.

    ResponderEliminar
  13. Se me ocurrio algo con esas imagenes.
    Peron no se si se pueda.

    Algo como un gadget para que las personas pongan la imagen en su igoogle u otro, y cuando se publique una entrada en mi blog, la imagen muestre el titulo del post y el enlace.

    ResponderEliminar
  14. Genial efecto EL POTRO me servira para una seccion de actividades que ya hacia tiempo habia abandonado Interactiblog y gracias por la gran ayuda que me brindaste para mi plantilla la verdad aun no la instalo pero sin dudar estoy muy seguro de que funcionara adecuadamente

    Adios y buena suerte

    ResponderEliminar
  15. Ummm acabao de intentar instalarla pero me sale este mensaje No se ha podido analizar su plantilla, porque no está bien formada. "No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The end-tag for element type "li" must end with a '>' delimiter." y no se que sucede aun asi gracias por tu ayuda no se que hacer cada vez me desespera mas por que las plantillas no quedan como quiero y en realidad me encanta esta plantilla

    ResponderEliminar
  16. Si no le hiciste ningún cambio debe de funcionar. Así como estaba en mi blog de pruebas la descargué y no marcó ningún error.

    Saludos.

    ResponderEliminar
  17. ¿Sabes? Tienes razón, creo que tuve un error por ahí, ahora mismo te mando de nuevo la plantilla con la corrección.

    Saludos.

    ResponderEliminar
  18. Sabes, me mata el autito, sabes porqué, porque tiene el humito bien contaminante, jajaja, un saludo, jaja, gracias por ofresernos esto!

    ResponderEliminar
  19. Ascesino96,

    No me he olvidado, esta semana lo publico ;)
    Saludos.

    ResponderEliminar
  20. Jajaja, no te dejes presionar por mi, de seguro tienes a muchos blogger de los que preocuparte... Mi problema es mínimo, jaja, mejor temrina los trabajos importantes y luego vete con eso ok?
    Un saludo ;~)

    ResponderEliminar
  21. Hola potro, suelo leer tu página para mejorar mi blog, pero tengo un problemilla, que quizás sabes como puedo solucionar: Cuando comparto la entrada de mi último post en Facebook o twitter, aparece como título no el del post sino el de mi blog. Cómo puedo solucionarlo??? Mil graciass

    ResponderEliminar
  22. Hola Silvia Alonso,

    Supongo que depende del servicio que uses para compartir tus entradas, pero de igual modo no estaría mal que optimizaras los títulos de tu blog para que primero aparezca el título del post y luego el título del blog.

    Saludos.

    ResponderEliminar
  23. tengo una gran duda que me surgio:
    quiero hacer un post y utilizar ese efecto de arrastrar la imagen. PERO LO QUE DESEO ES QUE AL ABRIR ESE POST LA IMAGEN ESTE SOBRE LO ESCRITO... PORQUE? ES PORQUE SE ME OCURRE QUE LA IMAEGEN LLEVE UN CARTELITO QUE DIGA: "ARRASTRAME A OTRO LUGAR PARA PODER LEER EL POST" ESA ES LA IDEA .. PERO NO LOGRO QUE LA IMAGEN QUEE ADELANTE DEL TEXTO (TAPANDOLA" SERA POSIBLE CONSEGUIR ESO?

    ResponderEliminar
  24. Antes de cursor:move agrega position:absolute;

    ResponderEliminar
  25. gracias me ayudaste nueva mente ahora quedara genial mi entrada... solo un ultima duda (bueno son dos) 1) ahora como hago para que quede en un lugar especifico? osea centrada o ala derecha o izquierda etc. 2) agragando lo de "-- Prototype y Scriptaculous--> ..."
    me desabilita una presentacion de imajenes con un plugin de jquery

    ResponderEliminar
  26. JQuery no es compatible con Scriptaculous así que si tienes ambos seguro las cosas que tienes que requieren estas librerías dejarán de funcionar.
    Para poner una posición específica habría que cambiar lo de position:abosolute pero con eso dejaría de verse como quieres.

    Saludos.

    ResponderEliminar
  27. hola potro muxo gusto!!! me encantaron tus trucos!! pero tengo una mega pregunta: inserto los códigos el primero q es en diseño-edición HTML pero el ponerlo no me permite ver mis gadgets de seguidores y de comentarios recientes!!! nose porq ahhh stoi desesperada jaja ojala puedas ayudarme!!!

    ResponderEliminar
  28. Lo que sucede es que este truco usa Scriptaculous, una librería de scripts que es incompatible con el gadget de seguidores.
    De cualquier forma aquí hay una solución para poder usar Scriptaculous y la lista de seguidores al mismo tiempo.

    ResponderEliminar
  29. Genial!!!!

    ¿Es posible hacer la corrección de alguna forma? Quiero decir que cuando acabes te diga si lo has hecho bien o no.

    Gracias!!!

    ResponderEliminar
  30. Pues si existe una forma no la conozco, al menos no me he enterado de algún método que no requiera programación que sea capaz de hacerlo.

    ResponderEliminar
  31. Otra cosica, si quisiera escribir un texto donde sean varias las palabras que se puedan mover, ¿cómo tendría que escribir el código?

    Gracs

    ResponderEliminar
  32. Del mismo modo, sólo tienes que repetir los códigos en rojo y cambiar los IDs en verde:

    Lorem ipsum dolor sit amet, <span id="palabra1" style="font-weight:bold; cursor:move;">consectetur</span> adipiscing elit. Aliquam pharetra est sem. <span id="palabra2" style="font-weight:bold; cursor:move;">Aliquam</span> quis vulputate urna. Nunc et auctor nulla. Ut fermentum vestibulum metus nec ultricies. Curabitur ac massa ipsum. Nulla dapibus dolor non nunc scelerisque aliquet. In hac habitasse platea dictumst.

    <script type="text/javascript">new Draggable('palabra1');</script>
    <script type="text/javascript">new Draggable('palabra2');</script>

    ResponderEliminar
  33. Gracs Potro, ¿podría hacerse con dos palabras juntas? por ejemplo; 24 ratones

    Gracias

    ResponderEliminar
  34. Me refiero a que se muevan las dos palabras como un solo objeto.

    Y otra cosa, no sé si tengo algo con jquery por el blog. Como veo que no funcionaría con este método, he echado un vistacico por tu casa y he visto esta opción de arrastrar con jquery. pero, sólo para imágenes. ¿Se podría para texto?
    Te pregunto sólo por si veo que tengo algo incompatible conel austrolopitecus este ;)

    Gracs majo!!!

    ResponderEliminar
  35. Entonces donde iría la palabra pon las palabras que quieras que se muevan juntas.
    El método con jQuery nunca lo probé con palabras (no recuerdo ni por qué) pero puedes probar y ver si funciona, el método es el mismo sólo que en lugar de una imagen es una palabra.

    Saludos.

    ResponderEliminar
  36. Hola Potro, no me funcionaba porque no había pegado el código antes de "head" ;(.
    Ahora que me funciona, me gustaría que al colocar las palabras siempre se queden encima del resto de imágenes. Es que he puesto un cuadro a modo de imagen, y dentro quiero que pongan unos datos. Al mover esos datos al cuadro, desaparecen como si se quedasen dentro ocultos.
    NO sé si mexcplico...

    Gracias tío!!!

    ResponderEliminar
  37. Pues no deberían desaparecer, ya ves que igual tengo de ejemplo una imagen y las que se arrastran quedan encima de ella.
    Por si las dudas prueba agregar dentro del código de la imagen grande (el cuadro) esto:
    style="z-index:-1;"

    ResponderEliminar
  38. No soy tan experto jeje

    aquí te pongo el código del cuadro donde quiero poner los datos arrastrados encima. Es que no sé dónde tengo que poner esa frase que me dices


    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://2.bp.blogspot.com/-ShgAyjkoYHo/Tes14uepXYI/AAAAAAAAAII/W4ZYp_pd4Hk/s1600/Cuadro+Doble+Ganancias.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="199" src="http://2.bp.blogspot.com/-ShgAyjkoYHo/Tes14uepXYI/AAAAAAAAAII/W4ZYp_pd4Hk/s320/Cuadro+Doble+Ganancias.jpg" width="320" /></a></div>

    Gracias majo

    ResponderEliminar
  39. Me confundí un poco y te expliqué mal, sólo busca en el código de la palabra que se mueve esta parte y añade lo que está en negrita:

    style=" font-weight:bold; cursor:move; z-index:90; "

    ResponderEliminar
  40. CLAP CLAP CLAP

    Gracias como siempre!!!!

    ResponderEliminar
  41. JO potro, había probado a hacerlo en mi blog de pruebas, y al poner exactamente lo mimo en una entrada del blog de la clase no me deja arrastrar nada. Puse el código antes de "head" y todo, incluso como digo, el código es el mismo que en el blog de pruebas...

    Qué hago mal??
    Gracs por tu paciencia

    ResponderEliminar
  42. No lo sé, quizá tienes jQuery o Mootools en ese blog.

    ResponderEliminar
  43. En la Edición de HTML busca las palabras jQuery y Mootools, si tienes algo con ello entonces es que sí los usas.

    ResponderEliminar
  44. POs no tengo ninguno de los dos.... ¿qué podrá ser?

    Gracias

    ResponderEliminar
  45. No tengo idea, ya sabes que sin poder verlo funcionando me es difícil acertar :/

    ResponderEliminar
  46. Gracs tío, pero como te comenté, ahora mismo no puedo invitarte, ya que el otro administrador es mu rarito ;(

    Gracs anyway

    ResponderEliminar
  47. Hay alguna forma de que entres y veas la plantilla sin que se de cuenta???
    Te podría mandar la plantilla por correo...

    Ya me dirás...

    ResponderEliminar
  48. Me temo que no, pero puedes buscar minuciosamente en tu plantilla para que veas qué puede estar afectando, si se trata de otro script o de algo que esté mal colocado, ahí o en la entrada o gadget donde lo has puesto.

    ResponderEliminar
  49. Gracias Potro, no sé cómo tiene que estar colocado casi nada, pero voy a indagar jeje

    Un abrazo chaval!!

    ResponderEliminar
  50. Mira, tengo esto antes de lo de head (bueno, ahora está justo antes que el código de strpitecus este que he puesto):

    <script type='text/javascript'>

    var _gaq = _gaq || [];
    _gaq.push([&#39;_setAccount&#39;, &#39;UA-22722526-1&#39;]);
    _gaq.push([&#39;_trackPageview&#39;]);

    (function() {
    var ga = document.createElement(&#39;script&#39;); ga.type = &#39;text/javascript&#39;; ga.async = true;
    ga.src = (&#39;https:&#39; == document.location.protocol ? &#39;https://ssl&#39; : &#39;http://www&#39;) + &#39;.google-analytics.com/ga.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(ga, s);
    })();

    </script>

    ResponderEliminar
  51. quería decir scriptaculos en vez de stripitecus...

    ResponderEliminar
  52. No pues no lo sé, así sin poder ver todo es como pintar un cuadro a ciegas. Siento no poder ayudarte :/

    ResponderEliminar
  53. ok gracs anyway majo.

    siento las molestias
    un abrazo

    ResponderEliminar
  54. Hola de nuevo Potro,

    ¿Por qué no funciona?

    Es que a mí me pasaba como ahora le pasa a tus imágenes.

    Gracias

    ResponderEliminar
  55. Seguro usas Chrome, ahí ya no funciona el arrastrado, ya sabes, cambios que hacen siempre los desarrolladores en el navegador.

    ResponderEliminar
  56. estos tiempos cambiantes...jejeje

    Gracias majo!!!

    ResponderEliminar
  57. No se si todavía revisa los comentarios pero aquí les dejo como me quedo en mi blog!
    http://www.tiendameme.com/p/juego.html
    Muchas Gracias por esta maravilla!

    ResponderEliminar
    Respuestas
    1. Sí, sí los reviso todos, y te ha quedado estupendo :)

      Eliminar
  58. del potro ¿ es posible que todas las imagenes se muevan sin necesidad de poner un codigo para cada imagen?

    ResponderEliminar
    Respuestas
    1. No, es necesario que se aplique el código manualmente a las imágenes que quieras que se le aplique este efecto.

      Eliminar
  59. potro..!! no funciona en mi ultima entrada porque..!!!! en la anterior si..!! aaahhh me deprimo, me deprimo..!!saludos..!!

    ResponderEliminar
    Respuestas
    1. ¿Le cambiaste el ID al código como se indica? Recuerda que nunca deben tener el mismo ID.

      Eliminar
  60. Retomando cuestiones pendientes...jeje

    Hola Potro,

    Funciona ya con chrome??? (comentarios 60 y 61)

    Gracias majo

    ResponderEliminar
    Respuestas
    1. A mí ya me funciona, ahora mismo estoy desde Chrome y los ejemplos se arrastran bien :)

      Eliminar
  61. Como hacerlo en una página de flash?, por ejemplo en wix, es posible?

    ResponderEliminar
  62. Hola, ley el post y me gustaria saber si tienes alguno para hacer que una imagen se mueva en un intervalo de posiciones dentro de otra imagen como contorno. Saludos y Gracias

    ResponderEliminar
    Respuestas
    1. No, pero seguro debe haber algún plugin de jQuery que lo haga, será cuestión de buscar.

      Eliminar
    2. Bueno graciass seguire en ello

      Eliminar
  63. Genial como siempre!!! tengo:

    Dos preguntas;
    1) ¿se podrán usar estas instrucciones en un sitio como joomla (o algun otro donde te registras como usuario)?.
    2) ¿Se podrán guardar las figuras una vez ordenadas por el usuario, en una base de datos?, para integrarla en un sitio de aprendizaje (donde se pueda calificar las respuestas, etc).

    Me mata la curiosidad.

    ResponderEliminar
    Respuestas
    1. Hola Juan, no sé en otras plataformas qué tanta libertad tengan para añadir códigos en su plantilla. Siempre que la plataforma les permita modificarla se podrá hacer.
      Lo otro no, al menos no con este método.

      Saludos.

      Eliminar
  64. Hola Potro, esta increible esto, ¿Exite algo parecido con Jquerry?

    ResponderEliminar
    Respuestas
    1. Hola Sentido Er, sí existe un método con jQuery, te dejo el enlace:
      http://ciudadblogger.com/2010/05/arrastrar-imagenes-con-jquery.html

      Eliminar
  65. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  66. interesante, muy interesante, pero seria mas interesante que al momento de soltar la imagen esta emitiera un sonido, sera posible??? para hacerlo mas dinámico e interactivo

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger