5568 sujets

Sémantique web et HTML

Parties cliquables d'une même image

Bonjour à tous,

Je mets ma question dans cette section, en espérant que ca soit la bonne.

J'aimerais pourvoir rendre "cliquable" différentes partie d'une même image de façon indépendante tout en restant rattachées à l'image de base ?

Comme une image vaut mieux qu'un long discours, voici un schéma : http://takeaphoto.eu/question/question.php

J'ai vu que l'on pouvais mapper une image mais j'aimerais faire cela plus proprement encore avec par exemple uniquement la bulle sélectionnée qui change de couleur (et pas l'ensemble des bulles) et faire en sorte que le point d'interrogation ne se change uniquement lorsque l'on passe sa souris sur la bulle en question.

Est ce que c'est quelque chose que l'on peut faire en HTML 5 ?

J'accepte les solutions simples comme celle plus "compliquées" Smiley murf

Merci d'avance pour votre aide.

Cordialement
Modifié par dark.tonin (11 Aug 2011 - 19:20)
Bonsoir,

en simple, je dirai chaque bulle est une image. tu fais une superposition d'images en jouant avec le positionnement en CSS (bon courage toutefois) et le fameux z-index. ensuite, en JavaScript, tu peux utiliser les événements du style onmouseover, onmouseout, pour remplacer ta bulle par une autre colorée.
Merci pour la réponse rapide Smiley biggrin

C'est aussi ce que je pensais faire mais à cela viens s'ajouter quelques complications :

- Certaines bulles doivent être entrelacées car, c'est pas représentatif sur le schéma, mais il doit y en avoir une dizaine au total.

- J'aimerais lié les bulles au point d'interrogation. Cad que quand on passe la souris sur une bulle, le point d'interrogation se transforme en ampoule (j'ai utilisé le onmouseover ici mais je ne sais pas "lier" 2 images entre elle avec)

- Si possible (mais là c'est vraiment être exigeant), avoir un truc qui s'intègre facilement dans un site Worldpress et pas galérer à tout replacer le code.

Voila, je sais que ca fait bcp d'exigences et j'espère vraiment que c'est possible Smiley confused
humm...entrelacées, c'est-à-dire? je vois pas. tu peux donner un exemple concret?

onmouseover peut appeler une fonction (style ChercherLampoule). Dans la fonction, tu cherches avec un Document.GetElementById le point d´interrogation que tu remplaces par l'ampoule, un truc comme ThisImage.src="image/lampoule.jpg".

Wordpress et consort, j'utilise pas. seulement Phase5 ou Notepad++.
oui, je vois. pour les bulles entrelacées, pas le choix, faut faire du map. cela risque de te prendre un certain temps, rien que la liste des coordonnées. Smiley eek
les images, qu´elles représentent des bulles ou autre chose, resteront toujours des boites de forme rectangulaire à positionner au sein de ta page. une autre alternative serait peut-être SVG, mais là, je m'avance un peu (au risque de raconter des sottises Smiley lol ), je n'ai jamais utilisé/pratiqué.
Sujet clos
Aller à