Masquer/afficher div en cliquant sur une image

Bonjour à tous,

cela fait plusieurs jours que je cherche, j'ai 5 images et un cadre vierge en dessous.
J'aimerai que quand on clique sur une image, un texte apparaisse dans le cadre du dessous.
chaque image a un texte différent.
Quand on ne clique pas sur une image, il apparait dans le cadre un texte qui dit "cliquer sur une image pour voir la description"

Ne parvenant pas à le faire cela en pur css, je me contente d'un hover (et non un click) ce n'est pas grave.

Mais je ne sais pas comment m'y prendre, avec liste, sans liste, avec lien, sans lien? pourriez vous me donner des pistes svp?

Voilà qui devrait t'aider

<ul id="maListeImage">
	<li class="item">
		<img src="../path/img/tonimage.jpg" alt="Ton image" title="Ton image" />
		<span style="display:none;">Mon texte</span>
	</li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script>
$("img").click(function () {
$("span").toggle("slow");
});    
</script>

Oui mais là, on va relancer le débat sur l’intérêt d'importer jquery pour quelque chose d'aussi simple...

alors !
en prenant quelque chose de très simple, tu peux essayer quelque chose comme :

<div>
	<img src="..."/>
	<p id="text">ton text d'accueil</p>
	<p id="description">ta description</p>


</div>

 
p#description{
display:none;

}
	div:hover p#text{
		display: none;

	}
	div:hover p#description{
		display: block;

	}

 

Mais tu vois que tu es obligé d'avoir ton :hover sur un parent qui contiendra les 2!
Modifié par saajuck (13 Jul 2012 - 12:37)

Hello, tu peux tout faire en html/css en bidouillant rapidement (la structure html restant simple !)

<ul>
			<li><a href="#" title="img1"><img src="..." alt="img1" /></a></li>
			<li><a href="#" title="img2"><img src="..." alt="img2" /></a></li>
			<li><a href="#" title="img3"><img src="..." alt="img3" /></a></li>
			<li><a href="#" title="img4"><img src="..." alt="img4" /></a></li>
			<li><a href="#" title="img5"><img src="..." alt="img5" /></a></li>
			<li>Cliquer sur une image pour voir la description</li>
		</ul>

ul {
				position: relative;
				display: inline-block;
				margin: 0;
				padding: 0;
			}
			li {
				display: inline;
			}
			li:last-child {
				display: block;
				width: 200px;
				height: 200px;
				margin: 0 auto;
				background: #ccc;
				border: 1px solid #000;
			}
			li:hover a:after {
				content: attr(title);
				position: absolute;
				width: 200px;
				height: 200px;
				left: 50%;
				margin-left: -100px;
				bottom: 0;
			}
			li:hover ~ li:last-child {
				color: transparent;
			}

Modifié par psykhe (13 Jul 2012 - 15:28)

oooooh okay
je me penche là dessus lundi!!
bon weekend à tous et merci encore, je vous posterai pour dire ce que ça donne

pas mal !
j'avais oublié le ~!
merci !

ouh aille,
ça devient compliqué pour ma petite tête!

il se trouve que actuellement les images sont dans un tableau, avec une div en dessous. j'ai tenté plusieurs choses pour la mise en page (des div, des "definition list"...) mais je n'ai pas réussi à placer mes éléments correctement... (je vous ai joint une image du résultat)


je sais c'est super archaïque et pas recommandé, mais si vous avez des idées pour éviter le tableau, elles sont les bienvenues, sachant que je dois mettre cette histoire de survol, avec du texte qui s'affiche dans l'espace jaune sous les pastilles bleues. Je voudrais que le survol se fasse autant sur la pastille, que sur le titre bleu que sur l'horaire. (quel casse tête!)

en attendant je vais tester ta technique, psykhe, pour essayer de comprendre comment ça marche avec une simple image.
Modifié par pimperenelle (16 Jul 2012 - 14:34)

concernant la technique que tu as donné psykhe, voici mon retour :

à première vue ça fonctionne très bien, j'ai rencontré quelques petits soucis qui me bloquent :
- le texte, comme c'est celui de la balise "title" du coup quand on passe la souris sur le img, on voit le texte en infobulle :s
- du coup j'ai changé le nom de l'attribut, mais du coup le texte qui est assez long et qui était formaté, ne prends plus en compte les balises et du coup je me retrouve avec un texte qui a des balises à l'intérieur :s

je ne vois pas comment faire :s

Bonjour,

Sans nullement vouloir faire de la pub, voici une page de mon site qui fait à peu près ce que tu cherches.
http://fetes-isledenoe.franceserv.fr/Site/Historique.html
Si ça correspond à ce que tu veux, en regardant le code source, tu devrais pouvoir en sortir le script qui est relativement simple.

Je crois même avoir un script dans mes archives encore plus simple. Mais là je suis au boulot...
...Je peux regarder ça ce soir si tu veux.

@+
Modifié par Jason (16 Jul 2012 - 14:20)

Merci Jason j'ai été voir ta page, en effet cela ressemble à part que j'ai des images et des éléments stylisés mais le fonctionnement c'est exactement ça

penses tu que c'est possible sans javascript?

Bonjour,

Sur la page, j'ai utilisé des dates ou l'on clique pour avoir les infos...
Mais les dates peuvent être remplacé par des images sans problème.
(Je crois même qu'au départ, j'avais prévu ce script pour donner un descriptif simple à des images en miniature)

Je regarde le script de base en rentrant chez moi après le boulot...

@+

Salut,

Bon voilà le script de base :

// Script changement Texte en rollover Jason2000
// Ne copiez ce code qu'une seule fois dans le HEAD de la page
<script language="JavaScript"><!--
function ChangeMessage(message,champ)  {
  if(document.getElementById)
    document.getElementById(champ).innerHTML = message;  }
//--></script>
// Fin du script Rollover Texte pour le HEAD

Utilisation par clic de la souris :

<a href="javascript:void(0)" class="datisto" 
onclick="ChangeMessage('Le texte est ici... Avec Style possible','ejs_texte')">1980</a>

Ou par survol de la souris :

<a href="javascript:void(0)" class="datisto" 
onMouseOver="ChangeMessage('','ejs_texte')" 
onMouseOut="ChangeMessage('','ejs_texte')"></a>

Et l'endroit ou doit s'afficher le texte :

<div class="affichage" id="ejs_texte"><div class="histo1">Cliquez sur une année...</div>/div>

Et tu appliques le style que tu veux au texte qui doit s'afficher...

Voilà, si ça peut te rendre service...
Par contre, je ne connais qu'avec du JavaScript...

@+
Modifié par Jason (16 Jul 2012 - 16:53)