Affichage d'image en cliquant sans changer de page.
Résolu/Fermésebiou1 Messages postés 22 Date d'inscription mercredi 7 octobre 2015 Statut Membre Dernière intervention 14 août 2022 - 11 août 2022 à 20:22
- Javascript afficher une image au clic
- Windows 11 clic droit afficher plus d'options par défaut - Guide
- Image iso - Guide
- Telecharger javascript - Télécharger - Langages
- Comment agrandir une image - Guide
- Acronis true image - Télécharger - Sauvegarde
7 réponses
11 août 2022 à 13:35
Bonjour,
Pour utiliser des liens pointant dans la page, on utilise des ancres. On donne un nom/label à une position dans le source HTML, puis sur un lien, on complète l'url par #label pour pointer vers le label indiqué.
Voir : https://www.alsacreations.com/astuce/lire/5-lien-precis-page-ancre-anchor-diese.html
11 août 2022 à 14:00
Bonjour,
Merci beaucoup pour votre réponse.
En revanche, je ne me suis pas bien expliqué.
J'aimerais que les liens affiche l'image (qui n'est pas affichée à l'arrivée sur la page).
Est-ce possible ?
Merci d'avance,
Cordialement,
11 août 2022 à 18:10
je ne comprends pas ce que tu veux
ou j'imagine que cela ne peut être réalisé en html pur, mais avec du javascript ou un module photo carrousel
11 août 2022 à 19:30
Je ne dois pas m'expliquer comme il faut.
En gros, j'ai créé des liens. Et j'aimerais, quand je clic dessus, qu'ils m'affichent une image sur la droite de la page.
C'est un site que je veux conserver en local et pas en ligne, donc les images sont dans le dossier images de mon site.
Les images (plans de bâtiments) ne sont pas affichées tans que je ne clic pas sur le lien.
Quand j'arrive sur la page "plans" par exemple, je souhaite cliquer sur le RDC (par exemple) et la j'aimerais que le plan du RDC s'affiche à droite. Pareil pour les autres étages.
Comme vous dites, peux être que ce n'est pas possible en HTML, malheureusement, je débute (j'ai commencé il y as 3 jours) et je ne connais pas encore le javascript.
Si toutefois mes explications ci-dessus vous ont aidé et que vous avez une solution, je suis preneur, sinon merci beaucoup pour votre aide. Je vais voir si je peux faire autrement.
Cordialement,
Modifié le 11 août 2022 à 20:04
En html, il faudrait une page avec toutes les images et une ancre devant chaque pour positionner la page sur la bonne image.
Après ce n'est plus du html, on peut faire :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function changerimage(imgid,nom) {
var img = document.getElementById(imgid);
img.src = nom;
}
</script>
<title>Test</title>
</head>
<body>
<p>
<button id="button" onclick="changerimage('cadre','image1.png')">image 1</button>
<button id="button" onclick="changerimage('cadre','image2.png')">image 2</button>
<button id="button" onclick="changerimage('cadre','image3.png')">image 3</button>
<img id="cadre" src = "image0.png" alt="Mon image" />
</p>
</body>
</html>
11 août 2022 à 19:57
Merci beaucoup, je test ça dès demain (j'ai laissé les fichiers au boulot).
Pour les lignes 7 à 10 je dois les mettres dans mon fichier CSS je suppose ?
Cordialement,
11 août 2022 à 20:05
non tout est dans un html, testes d'abord juste ce fichier avant d'essayer de l'integrer dans ton source
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionBonjour,
Puisque tout est sur la même page, tu devrais plutôt utiliser des boutons à la place des liens.
Tu peux bien sûr utiliser du css pour donner à tes boutons l'apparence d'un lien.
On peut utiliser quelques astuces en css pour afficher/masquer un élément, notamment avec les peudo-classes (:focus, :hover, :checked, etc.) et le sélecteur + mais on est assez vite limité. Prends le temps d'apprendre le fonctionnement des peudo-classes si ce n'est pas déjà fait.
Un exemple basique : https://jsfiddle.net/u8z2q4b9/
Le sélecteur css + permet de cibler l'élément voisin, ce qui oblige dans la partie html à avoir les images à coté des boutons (<button></button> <img>) et pas n'importe où dans le document.
Si on veut gérer un état afficher/masquer pour chaque image et afficher plusieurs images en même temps, au lieu d'utiliser une pseudo-classe comme :focus, on peut utiliser une checkbox et la pseudo-classe :checked.
Des exemples ici : https://css-tricks.com/the-checkbox-hack/
Ces astuces peuvent être ponctuellement utiles mais contraignantes sur la structure html.
Comme indiqué par jee pee, le mieux est de se tourner vers JavaScript pour ajouter de l'interactivité sur ta page html.
Modifié le 11 août 2022 à 20:15
Je viens de le tester rapidement et c'est SUPER !!!!
Exactement ce que je voulais !!!!
C'est pas des liens, mais c'est encore mieux mdr... Je savais pas faire les boutons :(
Merci beaucoup.
Il faut juste que je trouve comment placer les images au bon endroit et modifier la mise en forme et l'emplacement des boutons (couleurs, police et taille), mais je pense qu'avec mon fichier je devrais pouvoir bidouiller un truc mdr.
Merci encore.
Cordialement,
Modifié le 11 août 2022 à 20:25
Ah ! Je viens de voire votre réponse Pitet, merci pour l'exemple et les explications également.
Je vais regarder un peu plus les classes et id xD, je commence à peine à comprendre le HTML de base, j'avance tranquillement mais surement mdr.
Par contre mon anglais est pas exceptionnel, du coups je parcours des tutos sur internet en français quand j'ai de la chance.
Le javascript est surement plus utiles, mais pour l'instant je ne connais que de nom. Je veux juste faire un site assez simple, consultable en local par moi et mes collègue afin d'améliorer notre gestion de bâtiments.
Genre des plans avec les emplacements des extincteurs, du système SSI, des réseaux de GAZ et de chauffage.
Du coups, j'ai des plans de bâtiments et sur chaque plans de chaque étages, je vais mettres des points rouge pour les extincteurs, et autres symbole pour les autres réseaux. Un plan par type (extincteurs, SSI etc...)
J'espère y arriver grace à vous.
Désolé, je n'ai pas vu votre message tous de suite.
Merci à vous deux.
Cordialement,
PS : désolé pour les fautes d'orthographe, je fais 40 trucs en même temps et je ne me relis pas...
