Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Image draggable sur site Web

ceylia_6438

Par ceylia_6438
dans Programmation

 Partager

Messages recommandés

ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
Posté(e) (modifié)

Bonjour,

Cela fait un petit moment que je ne suis pas venue vous "voir" mais la Vie n'est pas un long fleuve tranquille comme nous le savons.

Je vous souhaite tout de même plein de bonnes choses, mais surtout la Santé.

J'essaye d'insérer dans une page Web une image .gif draggable que l'on peut déplacer pour mieux voir les lignes d'un texte.

J'ai essayé plusieurs méthodes de script sans résultat, et "j'y perds mon latin".

Je code avec Dreamweaver, sans problème. J'héberge via Site pages .free mais cela ne fonctionne pas.

J'ai essayé de poster hier en plaçant mon code mais je n'y suis pas parvenue, cela se confirme si je mets mon code dans la partie prévue il me "repousse" (bloquée), je vais donc réessayer aujourd'hui sans code.

Bonne journée,

Ceylia

Modifié par ceylia_6438

ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
  • Auteur
Posté(e)

Eh bien...

J'ai un problème si je poste le code ici, j'ai une fenêtre :

https://zupimages.net/up/22/08/enxa.jpg

Donc...

J'envoie le code avec cjoint :

https://www.cjoint.com/c/LBws6m1D4ug

Merci de m'aider avec cette image, main que je veux pouvoir voir draggable.

 

Bonne soirée,

Ceylia

 

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Bonsoir Ceylia,

Le logiciel IPB qui gère ce forum a été paramétré pour refuser qu'on insère du code HTML dans un message. C'est la raison de ton problème d'affichage ci-dessus.

Concernant ton problème de glisser/déposer (drag and drop), je te suggère d'aller consulter le site-laboratoire de l'éminent KewlCat  :serviteur: où tu pourras en particulier consulter la Page de tests CSS qui répond élégamment à la question dans une programmation pure en JavaScript et CSS… :wink:

Je pourrai te guider si tu as du mal à décortiquer le mécanisme.

ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
  • Auteur
Posté(e)

Bonjour Dylav,

Eh bien je veux bien que tu m'aides parce que là je suis complètement "perdue", j'ai repris mes bases d'avant, mais pour cette image que je veux mettre, je n'y arrive pas :-( 

Il faut à tout prix que je puisse voir mon image se déplacer, 

D'avance merci à Toi

Ceylia

 

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Bonjour Ceylia,

J'ai extrait la quintessence de la page de test de KewlCat, pour élaborer pour toi une page HTML contenant une image que tu peux faire bouger par glisser/déposer (drag and drop).

Le fichier compressé DragAndDrop.zip ci-joint est constitué de quatre éléments,

  • la page HTML 'DragAndDrop.html',
  • la feuille de style CSS 'DragAndDrop.css',
  • le script JavaScript 'DragAndDrop.js',
  • l'image exemple à faire bouger.

Plusieurs remarques à ce niveau,

  • même si ce n'est pas conseillé, tu peux intégrer le code de la feuille de style 'DragAndDrop.css' dans celui de la page HTML, en le plaçant entre des balises <style> et </style>, en remplacement de la ligne 6 (balise <link>),
  • même si ce n'est pas conseillé, tu peux intégrer le code JavaScript 'DragAndDrop.js' dans celui de la page HTML, en le plaçant entre des balises <script> et </script>, en remplacement de la ligne 7 (balise <script>),
  • bien entendu, les noms de ces deux fichiers peuvent être modifiés, il suffit de les reporter respectivement dans les lignes 6 et 7 de la page HTML,
  • l'attribut d'événement 'onload' de la balise <body> est important pour initialiser le processus (fonction 'captureMousePosition' du script)
  • l'image que tu souhaites faire bouger doit être incluse dans un bloc <div> affecté d'un 'id' permettant de définir son style (en relation avec la feuille de style) et son comportement (en relation avec le script JavaScript), et de deux attributs d'événements 'onmousedown' ('glisser', fonction 'raiseMove' du script) et 'onmouseup' ('déposer').

Cet exemple épuré fonctionne. Il te reste à en mettre en place le dispositif dans ta propre page HTML. Attention, il  permet de faire bouger une seule image (à cause de l'attribut 'id' qui ne peut être affecté qu'à un seul objet, et qui représente la seule méthode de relation avec un script JavaScript). Si tu souhaites faire bouger plusieurs images dans la même page HTML, il faudra faire appel à un dispositif plus complexe.

ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
  • Auteur
Posté(e)

Bonsoir,
Merci pour ta réponse Dylav,
Il me semble en avoir rêver la nuit de css, feuille de style, lier la feuille dans la page .html... etc... 
Merci pour cet exemple qui fonctionne très bien, j'avais commencé à regarder le code source mais avec les deux tableaux ça me perturbait alors imagine !
Je ne veux faire bouger qu'une image, cela me va très bien.
J'examine ma page le plus rapidement possible, et reviens ici je l'espère "toute guillerette" :-)
Encore merci,
Bonne soirée,
Ceylia

ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
  • Auteur
Posté(e)

Bonsoir,

Outre le manque de temps, j'ai eu de gros problèmes d'ordinateur, sans savoir ce qui se passait, donc... 

Me revoici, pas encore "guillerette" !

Avant quelques petits résultats laborieux, lorsque j'avais appris tout ça, cela remonte à "loin" et me semblait tellement simple.

J'aimerai éclaircir quelques points.

J'ai un dossier où se trouve mon fichier .html :

- dans un dossier "filtres_exe"

Donc, dans celui-ci, le fichier .html s'appellera "filtres_exe"

Est-ce qu'il est très important de mettre le fichier .js et le fichier.css dans ce dossier avec le fichier .html ou bien mettre le fichier .css dans un dossier dans le dossier "filtres_exe" et ranger le fichier .js dans un propre dossier "scripts" ou se trouvera le fichier .js

Je me demandais si on pouvait créer un fichier scripts comme celui du "filtre_exe" (à part) car j'aurais aussi le script qui stipule "pas de clic droit" donc il y aura deux scripts.

L'image que je veux faire bouger est une image qui se trouve en dehors du dossier filtres_exe mais dans un dossier "curseurs", en gif,  et se nomme main_droite.gif hors dossier "filtres"_exe" comme chaque dossier que j'ai.

Qu'est-ce que cela change si je place un mini tableau qui serait donc "stipulé" dans la div et l'image à l'intérieur du tableau (celle draggable)  en question ?

Et je dois nommer l'Id celui-ci serait "dragme" 

Merci et bonne soirée,

Ceylia

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Bonjour Ceylia,

Tu as toute latitude pour donner les noms qui te conviennent et ranger à ta guise la feuille de style, le script et l'image. Il suffit d'indiquer leur chemin (relatif ou absolu), respectivement dans les balises <link>, <script> et <img>.

Si par exemple tu crées dans ton dossier filtres_exe deux sous-dossiers CSS et scripts, cela donnera les chemins relatifs ci-dessous (tous les noms sont à ton choix),

<link href="CSS/feuille_de_style.css" rel=stylesheet>
<script src="scripts/javascript.js"></script>

Et, si le dossiers curseurs est dans le même répertoire que le dossier filtres_exe,

<img src="../curseurs/main_droite.gif" alt="">

Le chemin relatif ../ indique qu'il faut remonter d'un niveau au-dessus de filtres_exe, pour redescendre dans le dossier curseurs.

Si tu veux donner un autre nom à l'id du bloc <div>, il faut bien entendu le modifier partout (dans les trois fichiers sources, HTML, CSS et JavaScript).

Quant à mettre un tableau dans le bloc <div>, je ne comprends pas du tout le but de cette manœuvre, qui me semble totalement inutile. Mais cela fonctionnera probablement (à vérifier). Un conseil : commence par mettre en place tout le reste et vérifier que ça marche, avant de tester l'introduction de ton mini-tableau.

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...