Patrimoine culturel
Visites

   visiteurs

   visiteurs en ligne

Liens


bpapinou.gif

meric_graphisme.gif

Chez Jean-Mi

Chez Jean-Mi

divers - placer un POST IT déplaçable
placer une image de post it     post_it_anglais.gif    dans le dossier img

ajouter la classe suivante à la fin du fichier du CSS de la skin

.drag{/* pour les post it */
  position:absolute;
  cursor:all-scroll;
  z-index: 100;
}




placez le code suivant en début de code de l'éditorial

<img class="drag"
  src="img/post_it_anglais.gif"
  title="Si cette image gène, déplacez la !"
  height="163px" width="200px"
  style="left: 400px;top:300px;position: absolute;"
 />


Placer le code suivant dans un fichier inc/hpage.js

 <script type="text/javascript">
/***********************************************
* Drag and Drop Script: © 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=="drag"){
    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+"px"
    this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
    return false
    }
  }
}


dragobject.initialize()


</script>


et c'est tout

merci à fred76 pour son article ICI comment insérer un post it déplaçable.(je n'ai fait que copier ses idées pour ne pas en perdre la trace). rendons à César ce qui appartient à César

pour créer votre image de postit  digital postit creator



Date de création : 26/11/2009 · 22:56
Dernière modification : 20/01/2010 · 18:27
Catégorie : divers
Page lue 1506 fois


Imprimer l'article Imprimer l'article

 
Films d'animation
Connexion...
 Liste des membres Membres : 37
membres 10 derniers membres :
alankoz    essai    Alain    michel84    chmol44    feraud    maritina    mido    Penanders    tebelo   

Votre pseudo :

Mot de passe :

[ Mot de passe perdu ? ]


[ Devenir membre ]


  Membre en ligne :
  Anonymes en ligne : 2

Total visites Total visites: 190933  

Record connectés :
Record connectés :Membres: 7

Le 17/12/2008 @ 21:40

Record connectés :Cumulé : 78

Le 13/06/2012 @ 17:46

^ Haut ^
haut de page
bas de page