|
Script *Flèche
de suivi*
La flèche de suivi permet aux utilisateurs de
votre tutorial de suivre celui-ci
en déplaçant la flèche à hauteur de
l'endroit où ils se trouvent pour exécuter votre tutorial, comme ci dessous
 |
Cette flèche
pour marquer votre ligne
Clic
gauche pour la déplacer
|
Pour ce script , vous aurez
besoin d'une flèche au format gif
1 -Mise en forme de votre
page style CSS
Copier ce code, puis coller-le entre les deux balises HEAD,
<head> et </head>,
sous title
|
<style>
<!--
.minitable {
border: 3px dotted #ffcf50;
padding: 10px;
}
.minitable {
border: 3px dotted #ffcf50;
padding: 10px;
}
.dragme{position:relative; border-style: none;}
.dragme{position:relative; border-style: none;}
-->
</style> |
Modifier la couleur des bordures a votre convenance,
ainsi que le style de bordure , ici "dotted" (en
pointillés)
2- Insertion de la
table , de la flèche et du texte
Copier ce code à positionner entre les balises <body> et </body>
à l'endroit désiré sur votre tutorial.
|
<div align="center">
<table class="minitable" style="border-color:
#FFFF66; border-width: 2px;
border-collapse:collapse" id="table1" border="0"
cellpadding="10" cellspacing="0" width="290" >
<tr>
<td style="border:1px dotted #FFFF66;">
<img border="0" src="../images/fleche.gif" name="dragme"
class="dragme" id="dragme" align="left" border="0"
width="78" height="49"></td>
<td style= text-align: center;">
<p align="center">
<font size="2" color="#FFFF66" face="Times New
Roman">Cette flèche
pour marquer votre ligne </font>
<p align="center">
<font size="2" color="#FFFF66" face="Times New
Roman">Clic
gauche pour la déplacer </font></p>
</td>
</tr>
</table>
</div> |
Attention certains
éléments sont à modifier suivant la taille de votre
image , les couleurs, le nom de votre gif
comme indiqué ci dessous
|
<table class="minitable" style="border-color:
#FFFF66; border-width: 2px; border-collapse:collapse" id="table1"
border="0" cellpadding="10" cellspacing="0" width="290" > |
Création de la table , modifier la
couleur de la bordures |
<td style="border:1px dotted #FFFF66;">
<img border="0" src="../images/fleche.gif" name="dragme" class="dragme"
id="dragme" align="left" border="0" width="78" height="49"></td> |
Modifier la
couleur de la bordures.
Insertion de la flèche Modifier le
nom de l' image et les tailles
en fonction de votre image |
<td style= text-align: center;">
<p align="center">
<font size="2" color="#FFFF66" face="Times New Roman">Cette flèche
pour marquer votre ligne </font>
<p align="center">
<font size="2" color="#FFFF66" face="Times New Roman">Clic
gauche pour la déplacer </font></p> |
Insertion de la zone de texte. Modifier la
police, la couleur et la taille suivant votre choix |
8- Insertion du script
Copier et coller ce code à la suite
de votre table flèche,
entre les balises <body> et
</body>
|
<script language="JavaScript1.2">
<!--
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx +
event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty +
event.clientY - y;
return false;
}
}
function selectmouse(e) {
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement &&
fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
//-->
</script> |
|