Affichage d'une image au passage de la souris sur une image mappée

Bonjour à toutes et tous,

Je travaille sur un site et je me trouve confrontée à un problème qui peut être résolu par du JavaScript, je pense.

Voici ce que je dois faire.

J'ai le plan d'une école. Je dois proposer les détails et la photo de chaque local aux visiteurs.

Je pensais donc
- mapper le plan;
- faire en sorte qu'au passage de la souris sur un "local", le n° du local et sa fonction apparaisse sous forme d'une infobulle;
- faire en sorte qu'au clic de la souris sur un "local", une photo du dit "local" apparaisse dans un cadre se trouvant à côté du plan.

Pensez-vous que cela soit faisable?

Mapper, je peux faire.
Les infobulles ne devraient pas me poser de problème.
Pour le reste, je n'y arriverai pas seule.

D'avance un très grand merci!

Ah oui, je dois préciser qu'on m'a demandé de refaire ce site en passant par Joomla!

ou c'est totu à fait realisable

il sufftio de mettre en title de l'area le texte que tu souhiate voir apparaitre en survol et pour ce qui est de l'image, sur le onclick de l'area tu declenches une fonction avec en paramètre l'id de l'image voulue

Code:

---

<area href="/images/salle1.gif" onclick="show(this.href);return false;" shape="...

---

unes image:

Code:

---

<img src="default.gif" id="imagesalle" ... />

---

et dans le fonction show:

Code:

---

1 2 3

function show(salle){ doucment.getElementById('imagesalle').src=salle;}

---

Merci SpaceFrog...
mais!

j'ai oublié de préciser que je n'ai jamais utilisé de JavaScript... et donc tout ça est très "flou".

Pourrais-tu me donner un cours express? :lol:

Heu ben ...
tout est au dessus ...
y'a rien de plus à faire, le code est fourni

Salut,

Citation:

---

Pourrais-tu me donner un cours express?

---

:arrow: http://javascript.developpez.com/cours/

Ah...
Bon ben j'vais tenter de comprendre!
Merci 8O

le dernier morceau de code de Space c'est le code javascript, donc à mettre entre les balise HEAD de ta page

Merci pour votre aide.

Bon, voilà où j'en suis :

- J'ai mon plan;
- J'ai réussi placer l'infobulle (qui ne s'affiche pas sous firefox);
- J'ai aussi réussi à placer un texte explicatif sous le plan au passage de la souris sur une salle.

Exemple ici : http://astro-free.com/page.html (salle 13)

Finalement, je pense qu'il serait plus pratique que la photo s'affiche sous le plan (avec le texte), mais sans devoir cliquer.

Qu'en pensez-vous?

Me reste à placer la photo sous ce texte. Et là, je bloque. Je ne sais pas où placer le code :?

onmouseover au lieu d'onclick

ajoute juste un style="cursor:pointer" sur les areas ..

Donc,

Ceci

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<script type="text/javascript"> function writeText(txt) { document.getElementById("desc").innerHTML=txt; } </script>   <script> function show(salle){ document.getElementById('imagesalle').src=salle;} </script>

---

entre head et /head

Ceci

Code:

---

1 2 3 4 5 6

<map name="Rdc-414"> <area onclick="show(this.href);return false;" shape ="rect" coords ="429,280,464,324" style="cursor:pointer" onMouseOver="writeText('La salle 13 est la salle polyvalente du Collège');" alt="Salle 13" onMouseOver="show(this.href);return false;"/>   <area onclick="show(this.href);return false;" shape ="rect" coords ="399,214,419,252" style="cursor:pointer" onMouseOver="writeText('La salle 15 est une des salles informatique');" alt="Salle 15" onMouseOver="show(this.href);return false;"/> </map>

---

entre body et /body

ceci

Code:

---

<p id="desc"></p>

---

où je veux voir la description s'afficher

Je ne sais où placer ceci

Code:

---

<img src="default.gif" id="imagesalle" ... />

---

a part le onclick que je preconisais de remplacer par onmousover .

je pensais que tu voulais afficher une image et donc il suffit de placer une image en dessous du plan et d'en modifier le src sur le onmouseover des areas

Bon et bien, j'ai réussi!

Je vous remercie pour votre aide...

C'est en bidouillant qu'on devient bidouilleur.

:resolu:

alors selon toi il valait mieux te donner le poisson ou t'apprendre à pécher ?

:ccool:

Ouiiii je saiiis. Mais parfois, on est pressés par le temps :roll:
Merci encore!