Imagen movible

13 febrero 2008 0:49

Este es un truco para poder mover por toda la página a nuestro gusto todas las imagenes que queramos. Es interesante aunque en la práctica puede que no lo sea tanto,ya que dependerá de las aplicaciones que queramos darlo. No obstante este es el truco. Primeramente antes del cierre de -/Head- insertaremos el siguiente código:

Abrir Código



    <!--arrastrar imagen-->

    <style type='text/css'>



    .drag{

    position:relative;

    cursor:hand;

    z-index: 100;

    }



    </style>



    <script type='text/javascript'>



    /***********************************************

    * Drag and Drop Script: &#169; Dynamic Drive (http://www.dynamicdrive.com)

    * This notice MUST stay intact for legal use

    * Visit http://www.dynamicdrive.com/ for this script and 100s more.

    ***********************************************/



    var dragobject={

    z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,

    initialize:function(){

    document.onmousedown=this.drag

    document.onmouseup=function(){this.dragapproved=0}

    },

    drag:function(e){

    var evtobj=window.event? window.event : e

    this.targetobj=window.event? event.srcElement : e.target

    if (this.targetobj.className==&quot;drag&quot;){

    this.dragapproved=1

    if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}

    if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}

    this.offsetx=parseInt(this.targetobj.style.left)

    this.offsety=parseInt(this.targetobj.style.top)

    this.x=evtobj.clientX

    this.y=evtobj.clientY

    if (evtobj.preventDefault)

    evtobj.preventDefault()

    document.onmousemove=dragobject.moveit

    }

    },

    moveit:function(e){

    var evtobj=window.event? window.event : e

    if (this.dragapproved==1){

    this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+&quot;px&quot;

    this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+&quot;px&quot;

    return false

    }

    }

    }



    dragobject.initialize()



    </script>

    <!--fin arrastrar imagen-->






Luego en cada imagen que queramos aplicarlo, tendremos que introducir la URL de la imagen dicha dentro de este otro código:
<img src=http://URL_IMAGEN" class="drag" />

Ejemplo:

En vivo, Nadal-Roddick 21/03/09 12.10
Actualidad
Andy Murray ya espera rival en la final del primer Masters Series del año.
04/07/09 20.50 Rossi en Laguna Seca Valentino Rossi logró en la última vuelta el mejor tiempo de los primeros entrenamientos libres del GP de Estados Unidos, una sesión marcada por la pugna constante entre los tres dominadores de la categoría: el italiano, Jorge Lorenzo y el australiano Stoner. Seguir Leyendo...
4/08/08.20.30 Meca,heptacampeón en el Pas David Meca sumó su séptimo triunfo consecutivo en el ascenso a nado a la Rías de Pas, prueba que se celebró ayer con la participación de 120 nadadores en todas las categorías. Meca, récordman de larga distancia, como no podía ser de otra forma Seguir Leyendo...
20/03/09 Cambio puntuación F1 Pretendía cambiar el sistema de puntuación para la clasificación de pilotos y otorgar el título de campeón al piloto con más victorias. Seguir Leyendo...
30/03/08 Portatil Acer 4220 Parece mentira lo que han bajado los portatiles, viendo la página web del Diario Montañes, de Cantabria, veo que venden portatiles nuevos por sólo 399,95 euros., y no hace tanto la media estaba casi en 1200 euros.No deja de ser una buena noticia que algo baje en estos tiempos. Seguir Leyendo...

Post aleatorio

Powered by Stuff-a-Blog

Hechos Historicos

Powered By Blogger

Link My

Recursos y Diseño Web

Create a Meebo Chat Room

Post Ultimos

Fresh Blogger Templates
 
ir arriba ir arriba

El Blog de J.Guti Copyright© 2007 | Plantilla Blogger | Diseño de Freshbloggertemplates y J.Guti