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:
Coloca las imágenes en su lugar
Ciudad Blogger
Que post anterior te mandaste! [Hacer que las imágenes se arrastren (1)]
ResponderEliminarMuchos 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.-
Hola Jpz,
ResponderEliminarAl 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!
Yo el primero que le interesaa!! JAJA!
ResponderEliminarMuchisimas 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
Hola potro
ResponderEliminarEste 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
buenisimo!!!! ya lo pongo en mi blog!!!!!
ResponderEliminarDj Nestor, claro que me acuerdo, y sin duda se verá muy original poner los banners de directorio en modo de arrastrar.
ResponderEliminarsamantha, alguna buena idea saldrá, estoy seguro, saludos!
Julián Cardoso, ya me daré una vuelta para ver cómo te ha quedado ;)
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!
ResponderEliminarSó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!!!
JAJAJAJAJAJAJAJAJAJAJAJAJAJAJJAJA
ResponderEliminarMe 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.
Uhhhhhhhhh :( perdona bro, los vecinos ya deben estar juntando firmas para que te vayas del vecindario, y todo por mi culpa :(
ResponderEliminarXD
Un abrazo!!!
Hay Potro eres muy bueno en esto
ResponderEliminary 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
El potro, como hago para que la imagen flotante de mi blog se pueda arrastrar?
ResponderEliminarNo entendi mucho eso de la Id.
Jajaja, sus conversaciones me matan, además, el primer comentario que lei fue el de Cyberblogger:
ResponderEliminar"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...
brother, no te preocupes, mis vecinos hacen más ruido que yo.
ResponderEliminarAlex, 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.
Se me ocurrio algo con esas imagenes.
ResponderEliminarPeron 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.
No te he entendido :S
ResponderEliminarGenial 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
ResponderEliminarAdios y buena suerte
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.
ResponderEliminarMensaje 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
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.
ResponderEliminarSaludos.
¿Sabes? Tienes razón, creo que tuve un error por ahí, ahora mismo te mando de nuevo la plantilla con la corrección.
ResponderEliminarSaludos.
Ok gracias EL POTRO saludos
ResponderEliminarSabes, me mata el autito, sabes porqué, porque tiene el humito bien contaminante, jajaja, un saludo, jaja, gracias por ofresernos esto!
ResponderEliminarPero sigo esperando el Jquery...
ResponderEliminarAscesino96,
ResponderEliminarNo me he olvidado, esta semana lo publico ;)
Saludos.
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?
ResponderEliminarUn saludo ;~)
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
ResponderEliminarHola Silvia Alonso,
ResponderEliminarSupongo 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.
tengo una gran duda que me surgio:
ResponderEliminarquiero 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?
Antes de cursor:move agrega position:absolute;
ResponderEliminargracias 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--> ..."
ResponderEliminarme desabilita una presentacion de imajenes con un plugin de jquery
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.
ResponderEliminarPara poner una posición específica habría que cambiar lo de position:abosolute pero con eso dejaría de verse como quieres.
Saludos.
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!!!
ResponderEliminarLo que sucede es que este truco usa Scriptaculous, una librería de scripts que es incompatible con el gadget de seguidores.
ResponderEliminarDe cualquier forma aquí hay una solución para poder usar Scriptaculous y la lista de seguidores al mismo tiempo.
Genial!!!!
ResponderEliminar¿Es posible hacer la corrección de alguna forma? Quiero decir que cuando acabes te diga si lo has hecho bien o no.
Gracias!!!
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.
ResponderEliminarPos nada, Gracs Anyway majo!!!
ResponderEliminarOtra cosica, si quisiera escribir un texto donde sean varias las palabras que se puedan mover, ¿cómo tendría que escribir el código?
ResponderEliminarGracs
Del mismo modo, sólo tienes que repetir los códigos en rojo y cambiar los IDs en verde:
ResponderEliminarLorem 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>
Gracs Potro, ¿podría hacerse con dos palabras juntas? por ejemplo; 24 ratones
ResponderEliminarGracias
Me refiero a que se muevan las dos palabras como un solo objeto.
ResponderEliminarY 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!!!
Entonces donde iría la palabra pon las palabras que quieras que se muevan juntas.
ResponderEliminarEl 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.
Hola Potro, no me funcionaba porque no había pegado el código antes de "head" ;(.
ResponderEliminarAhora 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!!!
Pues no deberían desaparecer, ya ves que igual tengo de ejemplo una imagen y las que se arrastran quedan encima de ella.
ResponderEliminarPor si las dudas prueba agregar dentro del código de la imagen grande (el cuadro) esto:
style="z-index:-1;"
No soy tan experto jeje
ResponderEliminaraquí 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
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:
ResponderEliminarstyle=" font-weight:bold; cursor:move; z-index:90; "
CLAP CLAP CLAP
ResponderEliminarGracias como siempre!!!!
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...
ResponderEliminarQué hago mal??
Gracs por tu paciencia
No lo sé, quizá tienes jQuery o Mootools en ese blog.
ResponderEliminary ¿cómo lo puedo saber?
ResponderEliminarEn la Edición de HTML busca las palabras jQuery y Mootools, si tienes algo con ello entonces es que sí los usas.
ResponderEliminarPOs no tengo ninguno de los dos.... ¿qué podrá ser?
ResponderEliminarGracias
No tengo idea, ya sabes que sin poder verlo funcionando me es difícil acertar :/
ResponderEliminarGracs tío, pero como te comenté, ahora mismo no puedo invitarte, ya que el otro administrador es mu rarito ;(
ResponderEliminarGracs anyway
Hay alguna forma de que entres y veas la plantilla sin que se de cuenta???
ResponderEliminarTe podría mandar la plantilla por correo...
Ya me dirás...
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.
ResponderEliminarGracias Potro, no sé cómo tiene que estar colocado casi nada, pero voy a indagar jeje
ResponderEliminarUn abrazo chaval!!
Mira, tengo esto antes de lo de head (bueno, ahora está justo antes que el código de strpitecus este que he puesto):
ResponderEliminar<script type='text/javascript'>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22722526-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
quería decir scriptaculos en vez de stripitecus...
ResponderEliminarNo pues no lo sé, así sin poder ver todo es como pintar un cuadro a ciegas. Siento no poder ayudarte :/
ResponderEliminarok gracs anyway majo.
ResponderEliminarsiento las molestias
un abrazo
Hola de nuevo Potro,
ResponderEliminar¿Por qué no funciona?
Es que a mí me pasaba como ahora le pasa a tus imágenes.
Gracias
Seguro usas Chrome, ahí ya no funciona el arrastrado, ya sabes, cambios que hacen siempre los desarrolladores en el navegador.
ResponderEliminarestos tiempos cambiantes...jejeje
ResponderEliminarGracias majo!!!
No se si todavía revisa los comentarios pero aquí les dejo como me quedo en mi blog!
ResponderEliminarhttp://www.tiendameme.com/p/juego.html
Muchas Gracias por esta maravilla!
Sí, sí los reviso todos, y te ha quedado estupendo :)
Eliminardel potro ¿ es posible que todas las imagenes se muevan sin necesidad de poner un codigo para cada imagen?
ResponderEliminarNo, es necesario que se aplique el código manualmente a las imágenes que quieras que se le aplique este efecto.
Eliminargracias
Eliminarpotro..!! no funciona en mi ultima entrada porque..!!!! en la anterior si..!! aaahhh me deprimo, me deprimo..!!saludos..!!
ResponderEliminar¿Le cambiaste el ID al código como se indica? Recuerda que nunca deben tener el mismo ID.
EliminarRetomando cuestiones pendientes...jeje
ResponderEliminarHola Potro,
Funciona ya con chrome??? (comentarios 60 y 61)
Gracias majo
A mí ya me funciona, ahora mismo estoy desde Chrome y los ejemplos se arrastran bien :)
EliminarGracias otra vez más
ResponderEliminar;)
Como hacerlo en una página de flash?, por ejemplo en wix, es posible?
ResponderEliminarNop, en Flash sólo se usa Flash.
EliminarHola, 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
ResponderEliminarNo, pero seguro debe haber algún plugin de jQuery que lo haga, será cuestión de buscar.
EliminarBueno graciass seguire en ello
EliminarGenial como siempre!!! tengo:
ResponderEliminarDos 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.
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.
EliminarLo otro no, al menos no con este método.
Saludos.
Hola Potro, esta increible esto, ¿Exite algo parecido con Jquerry?
ResponderEliminarHola Sentido Er, sí existe un método con jQuery, te dejo el enlace:
Eliminarhttp://ciudadblogger.com/2010/05/arrastrar-imagenes-con-jquery.html
Este comentario ha sido eliminado por el autor.
ResponderEliminarinteresante, 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
ResponderEliminarDesconozco si sea posible.
Eliminar