Fonds colorés déplaçable avec image transparente d'1 pixel...

Commenter

Contenu du snippet 

<!DOCTYPE html><html lang='fr'><head><meta charset='UTF-8'><title></title><head><style>
img{position:absolute;}
.A{background-color:aqua;}
.B{background-color:red;}
.C{background-color:lime;}
</style></head><body>Vous pouvez déplacer les couleurs avec la souris<script>

'use strict';

var ob;//objet img "en déplacement"
var x,y=-1;//y=-1 quand on a pas pas encore cliqué sur une img

// une image vide d'un pixel transparente
var p="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";

//retourne une image colorée
function getimg(n,c,x,y,w,h)//n==id c==class(pour couleur) x==left w==width...
{
 return "<img class='"+c+"' id='"+n+"' onmousedown='clk(event,this);' src='"+p+"' style='left:"+x+"px;top:"+y+"px;' width='"+w+"px' height='"+h+"px'></img>";
}

document.onmouseup=function(event)
{
 if(y<0)return;else y=-1;
 event.preventDefault();
}

function clk(e,t)
{
 e.preventDefault();
 ob=t;
 x=e.offsetX;
 y=e.offsetY;
}

document.onmousemove=function(event)
{
 if(y>=0)
 {
  event.preventDefault();
  ob.style.left = (event.clientX-x) + 'px';
  ob.style.top = (event.clientY-y) + 'px';
 }
}

document.write(getimg(0,'A',35,35,40,60));
document.write(getimg(1,'B',35,90,40,30));
document.write(getimg(2,'C',90,40,60,40));

</script></body></html>

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (pabbati)