Résolu pour mettre une règle pour suivre un texte

Bonjour, 

Mon blog Accueil - CreaShaw-Anim

sur windows 11 avec Edge

Je fais des traductions de tutoriels de graphisme de l'espagnol en français

je voudrais placer une règle pour suivre le texte 

voici le script que la personne m'a fourni

mais premièrement je ne sais pas si cela est bon et et deuxièmement où le placer

</style><script type="text/javascript" src="flecha.js"></script>

    Si quieres puedes ayudarte de la regla para situarte en la realizaci&oacute;n del tutorial</p>                      

  <p>Marcador (Arrastra con el raton)</p>

  <img id="flecha" alt="" src="regla_navidad1.gif" style="position: relative;" name="flecha">

  <script type="text/javascript">

Drag.init(document.getElementById("flecha"));

</script>

est-ce que quelqu'un peut m'aider?

merci par avance

Bonjour Shawnee.Lootah

j'ai testé le code via 4 navigateurs différents (FireFox, Chrome, Opera et Edge) mais ça n'affiche que les deux phrases :

Si quieres puedes ayudarte de la regla para situarte en la realización del tutorial
Marcador (Arrastra con el raton)

= pas de règle ou quoi que ce soit d'autre visible. Donc à priori c'est pas "le bon" code.

Mais je ne connais pas le codage Javascript pour aider + que ça, désolée.

Bonnes suites

Edit :  pour vérifier un code Javascript :
- sélectionner le code
- coller le code dans Notepad par exemple, ou PSPad etc. 
- l'enregistrer avec l'extension  Html  (par exemple "js_regle_lecture.html")
puis ouvrir ce fichier html avec n'importe quel navigateur
---> ça va afficher le résultat du code

merci beaucoup de votre réponse

je vais attendre de savoir si quelqu'un d'autre connait et peut me donner un script valable 

bonsoir

je ne suis pas expert, mais src=" ..... " doit contenir une adresse internet complète commençant par http ou https (sauf cas particuliers d'adresses relative).
Ce que j'ai mis en rouge est donc incomplet ; ce qu'il manque correspond probabalement à l'adresse du blog (ou du site) qui héberge le code JavaScript "flecha.js" et l'image "regla_naviga.gif" .

<script type="text/javascript" src="flecha.js"></script>

<img id="flecha" alt="" src="regla_navidad1.gif" style="position: relative;" name="flecha">

Pour les autres lignes de codes je n'ai pas d'avis.

 =====================================

 EDIT : il serait utile pour espérer t'apporter une réponse plus favorable de nous indiquer le site qui utilise ce code (ou un autre site qui utilise une pratique similaire )

bonjour, 

mon passe temps est le graphisme sur Paint Shop Pro 2020 (PSP)

je traduis donc des tutoriels en français 

ce site est espagnol voici l'adresse 

:: Stardesignpsp :: Index ::

mais des blogs français s'en servent aussi

Voici un tutoriel où l'on se sert d'une flèche que l'on déplace pour suivre 

parfums_d_automne

Bonne soirée et amicalement

j'ai cherché sur la page... jusqu'à voir la flèche marron qu'on pouvait déplacer.

Peut-être utiliser une fonction "drag and drop↗" ?  mais ne la maitrisant pas, je te laisse lire les infos et les utilisations.

(attention au Javascript qui peut planter le blog, il vaut mieux faire des essais sur un blog-tests ou sur le blog de Démo EB↗  où tu peux faire ce que tu veux sans risque)

Bonnes suites

Bonjour,

@ Shawnee.Lootah,

J'ai cru devoir abandonner ma recherche sur Stardesignpsp :: Index :: car pas de flèche en vue sur les diverses pages consultées, alors que sur parfums_d_automne elle apparait vite, mais le codage me semble plus limité en possibilité d'installation (du genre 1 code par page ; mais c'est plus une présomption qu'une certitude)

Finalement, bingo ! J'ai ouvert sur stardesignpsp une page avec une flèche à déplacer. Je te détaille la manip. Ça peut resservir.

Utilisation du navigateur Firefox

1- page examinée : http://www.stardesignpsp.com/tutoriales/trucos/filtro_attacks/tuto_instalar_filtro_Attacks.htm

2- Affichage de son code source en faisant Ctrl+U puis recherche via Ctrl+F du nom  flecha.js qui est celui du code JavaScript qui ta été indiqué.

3- On trouve ainsi,
Ligne 68 de la page source   <script type="text/javascript" src="flecha.js"></script> c'est l'adresse du code JavaScript qui est à utiliser

En positionnant le pointeur sur "flecha.js" qui est une adresse relative, j'utilise le clic droit, pour choisir "ouvrir le lien dans un nouvel onglet" le code javascript s'affiche dans un nouvel onglet
La barre adresse de l'ongele affiche :  view-source:http://www.stardesignpsp.com/tutoriales/trucos/filtro_attacks/flecha.js 

Il te faut donc remplacer src="flecha.js" par src="http://www.stardesignpsp.com/tutoriales/trucos/filtro_attacks/flecha.js"

4- On trouve également;
Ligne 86 à 89 de la page source :
<img id="flecha" alt="" src="fleche_coeur_jaune_invers.png" style="position: relative;" name="flecha">  c'est l'adresse de l'image flèche
<script>Drag.init(document.getElementById("flecha"));</script> c'est la ligne qui indique que le déplacement doit concerner l'image qui a pour identifiant id="flecha"
 

En pratiquant comme pour le script flecha.js de la ligne 68, on connait l'adresse réelle de l'image définie avec src="fleche_coeur_jaune_invers.png"  c'est http://www.stardesignpsp.com/tutoriales/trucos/filtro_attacks/fleche_coeur_jaune_invers.png

 Résumé pour réutiliser ce type de code sur EB, ces lignes . . .

 <script type="text/javascript" src="flecha.js"></script>

<img id="flecha" alt="" src="fleche_coeur_jaune_invers.png" style="position: relative;" name="flecha">
<script>Drag.init(document.getElementById("flecha"));</script>

. . . sont à ré-écrire comme ceci, et dans le même ordre:

<script type="text/javascript" src="http://www.stardesignpsp.com/tutoriales/trucos/filtro_attacks/flecha.js"></script>

<img id="flecha" alt="" src="http://www.stardesignpsp.com/tutoriales/trucos/filtro_attacks/fleche_coeur_jaune_invers.png
" style="position: relative;" name="flecha">
<script>Drag.init(document.getElementById("flecha"));</script>

IMPORTANT l'existence du code javascript flecha.js et de l'image peut être supprimé un jour en Espagne, et donc ça ne fonctionnera plus ici.

Solution  : importer le code actuel de flecha.js sur ton ordi et le télécharger sur la médiathèque Ekladata. C'est alors le nom et l'adresse dans ekladata qui devra figurer dans src="...." et plus ce qui correspond à http://www.stardesignpsp.com            

. . . . idem pour l'image

===============================

Prudence : tester cette récupération sur une page simple ; en cas d'anomalie persistante on peut ainsi la supprimer via Contenu > Gérer les Rubriques.

⛐ Bon à savoir : en cas de retouche du code il faut parfois quitter le blog et le ré-ouvrir pour faire disparaitre l'usage précédent en mémoire (vécu par ailleurs)

On peux aussi utiliser un blog test comme l'indique Pipiou, mais pas le blog de démo, car l'utilisation de JavaScript n'y est pas acceptée (le code sera rejeté)

Ceci dit je n'ai pas testé le cas présent

Bonsoir Stormalo,

je suis un peu, même beaucoup, perdue

merci d'avoir détaillé tout cela 

je vais mettre "résolu"

bonne et agréable soirée

Amicalement

Bonsoir Shawnee.Lootah

J'ai détaillé un max, sans introduction, car je ne connais pas le profil personnel et l'expérience du demandeur (en plus je suis très loin d'être expert en Javacript)

En introduction : Le principe

Il n'y a  que 3 lignes à écrire dans le code source de ton blog pour obtenir ce que tu recherches.

❶ <script type="text/javascript" src=" adresse du code opératoire"></script>

❷ <img id="flecha" alt="" src="adresse de l'image déplaçable" style="....." >

❸ <script>Drag.init(document.getElementById("flecha"));</script>

La ligne n°1 indique au navigateur le fichier codé en JavaScript qu'il va devoir télécharger en mémoire (c'est le programme d’exécution des calculs)

La n°2 indique au navigateur le fichier d'une image qu'il va devoir télécharger et lui attribue un nom (flecha) pour son identification

La n°3 transmet au code opératoire le nom qui identifie l'image qu'il devra cibler pour modifier son positionnement

Remarques :

- Le codage prévu utilise les ressources d'un autre blog (donc en dépend)

- Puisque les éléments code et image sont d'origines externes, leur adresses doivent être complètes (absolues) c.a.d. commencent par http:// ou https://, sinon le navigateur ne sait pas à qui faire la demande.

- Pour des raisons pratiques de trafic et disponibilité réseaux, il est préférable que les ressources nécessaires (le code JS et l'image) soient hébergées sur la plateforme Eklablog

Maintenant tu peux reprendre la lecture de mon commentaire précédent (éventuellement à partir du résumé)

Édit 1 :
 ✋ 28/10/24 j'ai réalisé un test, ce n'est pas  idéal, mais ça marche.  [ LIEN ]

Édit 2 :
✅  30/10/2024
Trouvé un petit code autonome, prêt à copier-coller. [ LIEN ]    ok