7/26/2011 06:44:00 a. m.
Tweet
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.
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.
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
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 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 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
0 comentarios:
Publicar un comentario