Discussion :

[cruchovic]

Tout d'abord bonjour à tout le monde
Alors, je suis en train de refondre un petit site et je bloque sur la façon de mettre en oeuvre la chose suivante :
ma page est grossièrement constituée de deux parties gauche et droite...
En partie de gauche il y a tout un ensemble de petites div qui contiennent chacune une image survolée... jusqu'ici pas de soucis le survol fonctionne correctement...
Par contre ce que je j'aimerais faire, c'est afficher un contenu (texte, image,...) descriptif de l'image qui est survolé (en partie gauche) dans la grande div qui se trouve à droite de ma page... en gros à chaque fois que l'on survolerais une div qui se trouve sur la partie de gauche de ma page, j'aimerais qu'elle change au survol (ça c'est fait) mais aussi qu'un contenu se charge dans une autre div qui se trouve sur la partie de droite de ma page. (bien sûr chaque image (div de gauche) aurait un contenu différent qui s'afficherait à droite)
J'en appelle donc à votre solidarité pour m'aider
merci d'avance

[E.Bzz]

Bonjour et bienvenue sur Developpez.com

J'en appelle donc à votre solidarité pour m'aider

Nous en appelons à ton code existant (JS + HTML concerné) pour pouvoir t'aider

On peut le voir ?

A+

[cruchovic]

Voici le début de mon code... (soyez tolérant, je ne suis qu'un simple graphiste avec deux trois notions de bases...)
je joints également une image de l'aperçu... dans l'absolu j'aimerais pouvoir affiché pour chaque image survolée (ce sont les carrés de couleur dans la partie de gauche) une image de fond (différente pour chaque "bouton") ainsi que du texte (différent aussi) dans la div de droite (le grand rectangle de droite)...

A défaut de ne pas pouvoir faire apparaitre tout cela (texte différent + images de fond différente...), je me contenterais d'une seule image (différente pour chaque "bouton"(div de gauche) qui s'afficherait dans la div de droite.
ouf c'est pas simple à expliquer à l'écrit

[E.Bzz]

Arf !

Il sait pas faire ça, Dreamweaver ?

A+

[E.Bzz]

Bref, dans l'absolu :
il faut que tu crées tous les éléments (textes + images) dans le div de droite, mais masqués dans un 1° temps (avec CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

display:none;

).
Le mieux est de créer un div pour chacun, qui contiendra le texte+image, en lui donnant un id dont le n° correspondra au n° de la vignette.
Ex : "detail_C1" correspondra à la vignette "C1"

Ainsi, après la fonction de survol, il faudra appeler ta nouvelle fonction qui devra :

1. masquer tous les div "detail_*"
2. afficher le div du survol en cours

Ca devrait donner quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function AffDetail(id_detail) {
var les_details = document.getElementById("droite").getElementsByTagName("div");  // Récupère la liste des div "detail"
var nb_details = les_details.length;   // Nb. De details
for (var i=0; i<nb_details; i++)
  les_details[i].style.display = "none";
document.getElementById(id_detail).style.display = "block";
}

Tu l'appellera donc dans le onmouseover de chaque vignette (ici pour la 1°) :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bouton1','','images/C1BON.gif',1);AffDetail('detail_C1');">

A+