Bonjour à tous,

Je cherche une solution à mon problème depuis plusieurs heures, et comme je commence à ne plus avoir les idées très claires, je me tourne vers ce forum...

Je développe un site avec Joomla (éditeur JCE), et je cherche à masquer/afficher un élément avec jQuery.
Le principe : au passage de la souris sur l'image d'un projet, un diaporama apparaît avec du texte et d'autres images. Un clic sur ce paragraphe permet de le fermer.

Le site n'est pas encore en ligne, voilà le code correspondant :

function montrer (e) {
jQuery("body").show(jQuery(".diaporama tr td ul").css("background-color", "yellow")					.css("display", "block")
);
}

function masquer (e) {
jQuery("ul").hide().mouseover(".img_projet").append(jQuery(".diaporama tr td ul").css("background-color", "yellow")
.css("display", "block")
);
}

L'action afficher/masquer fonctionne, le problème c'est que cette action m'affiche tous les diaporamas lorsque je frôle n'importe quelle image projet.
J'aimerais qu'en frôlant l'image projet 1, on affiche le diaporama 1, l'image projet 2, le diaporama 2, etc.

J'ai essayé de remplacer les classes par des ids, mais mon éditeur (JCE) semble ne pas reconnaître les id...
Difficulté supplémentaire, le site sera ensuite géré par des personnes qui n'ont aucune connaissance en HTML, CSS ou javascript.

Merci d'avance à tous ceux qui pourraient me proposer une solution !

On peut voir le HTML qui va avec ?

Ouuups, désolée, voilà le code HTML associé :

<tr>
            <td>
                <p><img class="img_projet" src="images/stories/theme1.jpg" border="0" />espace d'accueil</p>
                <ul>
                    <li>Espace d'accueil<br />
<img alt="clock" class="diapo" src="images/stories/clock.jpg" height="112" width="150" />
<img alt="articles" class="diapo" src="images/stories/articles.jpg" height="96" width="128" />
<img alt="fermer" class="fermer" src="images/stories/fermer.png" height="340" width="454" /></li>
                </ul>
            </td>
        </tr>

Je ne mets que la première ligne du tableau, le reste reprend ce modèle.

Je précise que j'ai mis des tableaux car ça me semblait le plus simple pour les personnes qui auront à gérer le site plus tard...

Merci d'avance !

Si j'ai bien compris, au survol de la ligne 3, le ul suivant doit s'ouvrir ? Ensuite au clic sur la ligne 3 ça se ferme ?

Bonjour !

Oui, c'est ça !

Par défaut, le ul (diaporama)est masqué, et s'affiche au survol de la souris sur l'image projet. Un clic sur "fermer" masque le diaporama.

Pour l'instant, comme j'ai utilisé des classes, tous les ul s'ouvrent ou se ferment en même temps...

Ceci doit faire l'affaire :

$(document).ready(function() {
	var $liste = $('#tab > tbody > tr > td > ul').hide();
	
	$('#tab > tbody > tr > td > p').mouseover(function() {
		$(this).next('ul').slideDown();
	}).click(function() {
		$(this).next('ul').slideUp();
	});
});

Merci Desolation, ça fonctionne !

Pour ma culture personnelle, peux-tu simplement m'expliquer cette ligne de code ? Je devine que tout vient de là :

jQuery(this).next('ul')

Tout simplement le $(this) fait référence au sélecteur sur lequel l'événement intervient donc ici $('#tab > tbody > tr > td > p'), à partir de cet objet jQuery on lui dit : "Tu séléctionnes le <ul> qui suit (faut qu'il soit frère dans l'arborescence du DOM) puis tu appliques la méthode."
Ici j'aurais pu mettre .show() mais pour avoir un petit effet slide j'ai mis .slideDown().

Ok, j'ai compris
Merci pour ton aide !