Hacer que las imágenes se arrastren (2) – Hipotecario

Después de haber visto que podemoshacer 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 propiedadondblCick 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 laURL de la imagen y laURL 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 tuamor 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 tuspan 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 utilizadoScriptaculous para generar este efectodrag & 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:

carro