Faire apparaitre une info-bulle sur click d'une zone précise d'une image

**roro222** · 23/02/2015, 18h54

Bonjour

Il y à une quinzaine de jours, je me suis enfin lancé dans la création d'un site
J'ai choisi la version gratuite de Wix éditor. Éditeur graphique, donc nul besoin de connaitre le HTLM sauf pour effets spéciaux

Je suis un novice dans le code HTLM

Mon problème est le suivant:

Comment faire apparaitre une info-bulle en cliquant sur une zone précise d'une image et la faire disparaitre lorsque le pointeur de la sourie quitte cette zone ?

J'ai bien contacté Wix, mais ils m'ont répondu que cette fonctionnalité n'existait pas sur cet éditeur et qu'il fallait soi-même taper son code et qu'ils n'intervenaient pas sur les codes extérieur.
j'ai tenté des solutions trouvées sur le net, mais ça ne marche pas.

Faut savoir que sur cet éditeur, on ne peut affecter que 1 lien à une image.

Mais j'ai trouvé une astuce pour outrepasser cette limitation
Je peux affecter une action à plusieurs zones d'une image et ça marche.

Pour cela j'ai crée une image transparente, c'est à dire nulle.
Je la dimensionne et la colle en sur-impression sur l'image de base dans zone ou je veux que l'internaute clique et lui applique un lien.
Là ça fonctionne. Pour l’instant 3 personnages ( Riri, le père et le frère dans mon exemple) ont leur page accessible en cliquant sur leur tête.

Mais pour "La femme à Riri" alias Roro222 et d'autres personnages, je veux faire apparaitre une info-bulle qui disparait lorsque l'on sort de la tête du personnage.

J'ai écrit ce code:

Code:

a< href="http://static.wixstatic.com/media/0197c4_9a440e454c214aa2bf0af53cce247904.gif_srz_p_299_200_75_22_0.50_1.20_0.00_gif_srz"  
onmouseout="couic()"><img src="http://static.wixstatic.com/media/0197c4_558e72f415a04bda81fa452159c7c4ed.gif_srz_p_98_70_75_22_0.50_1.20_0.00_gif_srz" ></a>

href= est l'adresse de l'image ou du commentaire qui doit apparaitre
src= est l'adresse d'une fausse image transparente de mon invention qui me donne la zone de cliquage active
onmouseout="couic()" est l'ordre de substitution d'image.

La bulle apparait bien, mais pas au bon endroit et en miniature avec les curseur à coté
Si l'on clique sur cette mini bulle, elle prend bien sa dimension normale, mais toujours dans sa petite fenêtre.
De plus pour que la bulle disparaisse, il faut changer de page et revenir dessus

Moi, je voudrais çà
Nom : bulle femme riri.png
Affichages : 1300
Taille : 385,1 Ko

Nom : bulle femme riri.png
Affichages : 1300
Taille : 385,1 Ko

Voici le lien de la page en question pour vérifier par vous même la situation.(descendez jusqu’à l'image)
http://riri-linventeur.wix.com/les-d...llards#!/c112v

Si quelqu'un à du code à me soumettre, je l'en remercierais beaucoup

**cherbe** · 23/02/2015, 22h24

Envoyé par roro222

Mon problème est le suivant:
Comment faire apparaitre une info-bulle en cliquant sur une zone précise d'une image et la faire disparaitre lorsque le pointeur de la sourie quitte cette zone ?

bonsoir
Tout d'abord, la version 2 gratuite de Dreamweaver faisait ça mais est-elle encore en ligne ?
Il faut toujours privilégier la solution HTML quand elle existe. Pour ton cas, c'est assez simple à faire. Ca va réagir au survol, sans clic. Il faut compléter la balise <IMG> comme ceci :

Code:

<img src="fichier.gif" usemap="#photo">

(photo peut être remplacé par n'importe quel autre mot sans accent et sans espace)
Il faut et il suffit d'ajouter l'argument usemap="#photo" à la fin de la balise <IMG>

ensuite, insère n'importe où ailleurs dans le code html, entre <BODY> et </BODY> ces balises :

Code:

<map name="photo">
<area shape="rect" coords="255,333,305,400" title="Ton texte surgissant">
</--
toutes les balise <AREA> que tu veux ici 
--> 
</map>

les valeurs (255,333) sont les coordonnées X et Y du coin supérieur gauche du rectangle de la zone réactive
les valeurs (305,400) sont les coordonnées X et Y du coin inférieur droit du rectangle de la zone réactive

Tu peux obtenir ces valeurs en ouvrant l'image avec un logiciel de dessin comme Paint. Tu passe la souris sur chaque coin de la zone et tu lis les valeurs en bas de l'écran.

**roro222** · 24/02/2015, 20h26

Nom : code d integration.png
Affichages : 1324
Taille : 391,6 Ko

Merci de vous préoccuper de mon cas

Malheureusement ce code ne fonctionne pas, ou alors c'est moi qui suis une bille.

Faut savoir que s'est un éditeur en ligne affilier à l’hébergeur du site et totalement graphique.
Donc on a pas accès au code de la page pour le modifier.

Pour mettre du code, il faut faire appel à une application 1 proposé par cet éditeur.

Une fenêtre (un objet) grise s'ouvre 2 que l'on peut positionner et dimensionner
Et on lui applique soit un lien, soit du code 3

Lorsque j'ai rentré votre code, c'est ce code qui s'affichait dans la fenêtre au lieu de l'image-bulle.

Comme si il le considérait comme du texte.

Dans ces conditions que dois-je faire ?

**cherbe** · 24/02/2015, 21h53

Envoyé par roro222

Lorsque j'ai rentré votre code, c'est ce code qui s'affichait dans la fenêtre au lieu de l'image-bulle.
Comme si il le considérait comme du texte.

Curieux en effet.
Il faut supprimer ou ne pas créer la balise affichée <a href=>...</a>
Il faut supprimer : onmouseout='couic'()
Ensuite, il faut ajouter le paramètre usemap dans la balise <img>
et après, ajouter les balises <map> et <area> telles que présentées dans mon dernier message.

C'est le piège avec ces logiciels. Ils sont censés tout faire mais dès qu'on sort des sentiers battus, c'est la panique.
Si tu compte aller plus loin qu'une simple page, tu devrais te mettre au html et css. Ce n'est pas si compliqué et tu serais totalement indépendant.

A voir en vidéo sur Futura · Aujourd'hui

**roro222** · 06/04/2015, 11h18

Bonjour
Après presque une semaine a me débattre avec ce foutu code, je suis enfin arrivé à mes fins
Je vous met le code, si dé-fois une personne était confronté au même problème.

Nom : Bulle.png
Affichages : 1327
Taille : 334,5 Ko

Nom : Bulle.png
Affichages : 1327
Taille : 334,5 Ko

.
http://riri-linventeur.wix.com/les-debrouillards Allez en page "Divers pour voir le résultat

Envoyé par cherbe

Si tu compte aller plus loin qu'une simple page, tu devrais te mettre au html et css. Ce n'est pas si compliqué et tu serais totalement indépendant.

J'en suis à plus de 40 pages et toujours avec cet éditeur.

Mon nouveau problème:

Sur la page "Historique" accessible en page d'accueil en cliquant sur le livre "nouvelle du jour"
Sur le plan du site, selon le navigateur utilisé en tant que simple internaute, j'observe un léger décalage des zones cliquables.
Ce qui fait que si on clique sur un rectangle pour aller à une page, on va sur la page d'à coté.
Chez moi, sous Mozilla, tout est nickel
Sur le portable de mon fils sous Chrome, il y a ce décalage.
J'avais pensé à la résolution d'écran, mais non après des essais ce n'est pas la source du problème.

Si quelqu'un a une idée, je l'en remercierais.

**cherbe** · 06/04/2015, 12h19

Envoyé par roro222

Bonjour
Après presque une semaine a me débattre avec ce foutu code, je suis enfin arrivé à mes fins
Je vous met le code, si dé-fois une personne était confronté au même problème.

Depuis Firefox, je ne vois qu'un simple popup, un texte qui s'affiche au survol. Pas de zone cliquable.
Si c'est le but, il n'y a pas besoin de script. Les balises HTML classiques suffisent.

Mon nouveau problème:
Sur la page "Historique" accessible en page d'accueil en cliquant sur le livre "nouvelle du jour"
Sur le plan du site, selon le navigateur utilisé en tant que simple internaute, j'observe un léger décalage des zones cliquables.

Idem, pas de zone cliquable mais des liens

**roro222** · 06/04/2015, 15h21

Envoyé par cherbe

Depuis Firefox, je ne vois qu'un simple popup, un texte qui s'affiche au survol. Pas de zone cliquable.
Si c'est le but, il n'y a pas besoin de script. Les balises HTML classiques suffisent.

Reprenons
Sur l'image de la famille à Riri, il y a 12 personnages.
5 têtes sont cliquable et renvois vers leur pages respectives.
Les autres têtes sont inactive pour l'instant car elles n'ont pas leur page.
Pour la femme à Riri au centre, lorsque la souris passe sur sa tête, la bulle apparait (comme sur la photo du post N° 1) la tête + le texte dans la bulle au contour rouge et fond bleu
Lorsque la souris quitte la tête (de l'image, pas de la bulle) de la femme à Riri, la bulle disparait.
Tout cela marche très bien sur tout les ordis que j'ai pu tester moi-même et le chez les quelques personnes a qui j'ai demandé de tester le site
Donc ,je pensais le problème résolu. Là, tu me met le doute.

Idem, pas de zone cliquable mais des liens

Sur le vieux livre-plan en page "Historique"
Là, chaque rectangle correspond à une page du site et en cliquant dessus, renvoi vers sa page respective.
Ici aussi tout marche très bien, du moins chez moi et certains autres
Par contre sur le portable de mon fils sous chrome, il y a un décalage de 5mm environ vers la gauche.
Mais rien de visible à l'écran, sauf que vue que les rectangles sont petits et très rapproché, si on clique sur un rectangle, c'est la page du rectangle de sur la droite qui s'ouvre.
Pourtant, chaque rectangle à bien des coordonnées absolues par rapport à la page.
Je me suis amusé à ouvrir l'éditeur avec ce portable et à recaler la zone cliquable de 5mm vers la droite.
Là, tout fonctionne bien avec ce portable, chaque rectangle ouvre bien sa page.
Mais voilà, maintenant c'est sur les autres ordis qu'il y à ce décalage mais dans le sans inverse

Comment faire pour que tout les navigateurs se comporte pareil ?

**roro222** · 31/05/2017, 09h44

Bonjour

Consultant de temps à autre les statistiques de mon site, je m’aperçois qu'il y a pas mal de vues provenant de cette discussion.
Donc le problème doit ce poser à ces dit visiteurs
Ayant résolu depuis longtemps le problème (sans réponse) du post juste ci-dessus, autant que tout le monde en profite.
Donc voici ma solution:

Nom : plan.jpg
Affichages : 1260
Taille : 108,3 Ko

Nom : plan.jpg
Affichages : 1260
Taille : 108,3 Ko

Il suffisait de verrouiller la position des fausses images transparentes par rapport à l'image de fond elle même verouillée
Pour rappel: une image transparente me permet de définir une zone cliquable sans troubler l'image de fond et lui affecter un lien
En l’occurrence ici une autre page du site.

Résumons:

Chaque fois que je veux réactualiser le plan du site car j'ai ajouté une nouvelle page:
-Je récupère mon image de font
-Avec un logiciel de dessin, je rajoute un rectangle avec son intitulé à l’intérieur
-je sauve le tout en respectant bien la taille et résolution
-Dans l'éditeur je remplace l'ancienne par la nouvelle
-Je me positionne sur un rectangle déjà affecté pour récupérer une image transparente
-je copie/colle et positionne sur le nouveau rectangle pas encore affecté
-Éventuellement avec les poignées de dimension je réajuste pour quelle couvre bien le rectangle en question
-Et enfin, je réactualise le lien. Il ne reste plus qu'a enregistrer et publier

Pour ma part sur mes ordis et ordis extérieurs que j'ai testé, tout a l'air ok
Si quelqu'un remarque une anomalie, veuillez m'en faire part
Merci

Lien direct vers ce plan
http://riri-linventeur.wixsite.com/l...rds/historique

Faire apparaitre une info-bulle sur click d'une zone précise d'une image

Faire apparaitre une info-bulle sur click d'une zone précise d'une image

Re : Faire apparaitre une info-bulle sur click d'une zone précise d'une image

Re : Faire apparaitre une info-bulle sur click d'une zone précise d'une image

Re : Faire apparaitre une info-bulle sur click d'une zone précise d'une image

Re : Faire apparaitre une info-bulle sur click d'une zone précise d'une image

Re : Faire apparaitre une info-bulle sur click d'une zone précise d'une image

Re : Faire apparaitre une info-bulle sur click d'une zone précise d'une image

Re : Faire apparaitre une info-bulle sur click d'une zone précise d'une image

Discussions similaires

[Biologie Cellulaire] kit pour faire apparaitre les bacteries sur les mains

comment faire apparaitre une fenêtre avec dreamweaver?

faire apparaitre barre des tâche sur deuxieme ecran

Une info-bulle s'affiche sur Excel ?

image tv très longue à apparaitre après mise en marche