Imagen movible

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: