Insérer une flèche ou un signe déplacable dans une page Web.
Dans un tuto, une description que l'internaute devra suivre pas à pas, il est intéressant de mettre à sa disposition un signet qu'il déplacera au fur et à mesure de sa lecture.
Ce dispositif existe sur bien des sites, et a été actualisé pour Graphisme en tous genres.
Vous trouverez un exemple ici et le script est à insérer entre les balises <head></head> et <body></body> .
Si votre site est conçu avec une feuille de style CSS vous pouvez ajouter la propriété :
.drag {
Z-INDEX: 100; CURSOR: hand; POSITION: relative
}
Si vous n'utilisez pas de feuille de style la syntaxe est la suivante:
Entre <head> et </head>
<SCRIPT type=text/javascript>
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()
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
</SCRIPT>
Et entre les balises <body> et </body> :
<div align="center"><IMG
src="fleche_rouge.gif" width=35 height=21 hspace="20" vspace="200"
border=0 class=drag></DIV>
Remplacez les valeurs en bleu.
flèche_rouge.gif par le nom de votre image de flèche
width=35 et height=21, entrez les dimensions de votre image de flèche.
hspace="20" et vspace="200" , entrez les valeurs que souhaitez pour afficher la flèche par défaut. Les dimensions étant comptées en pixels du haut de l'écran pour vspace et du bord gauche pour hspace.