Clic sur texte = Apparition image

Résolu
NickoX9 Messages postés 47 Date d'inscription   Statut Membre Dernière intervention   -  
NickoX9 Messages postés 47 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

En fait, j'ai un texte du type :
- Plantes
- Arbres
- Feuilles
- etc...

...et j'aimerais savoir s'il est possible d'afficher une image lors du clic sur l'un de ces textes en sachant que le texte d'en dessous doit se décaler vers le bas...

J'espère que vous m'aurez compris ... :)

Merci :: X9

5 réponses

Réponse 1 / 5
macgawel Messages postés 664 Date d'inscription   Statut Membre Dernière intervention   89
 
Bonjour.

Quel langage de programmation ?
-1
Réponse 2 / 5
NickoX9 Messages postés 47 Date d'inscription   Statut Membre Dernière intervention   12
 
C'est pour un site web...
-1
macgawel Messages postés 664 Date d'inscription   Statut Membre Dernière intervention   89
 
... Et on ppourrait voir le code ?

Tu utilises des CSS ?

Une solution (relativement) simpleà mettre en oeuvre, avec du CSS :
- Tu mets une balise lien (a). A l'intérieur tu mets ton texte.
- A l'intérieur, toujours, tu mets la balise image.
<code<p class="cliquer"><p class="cliquer><a href="">Mon texte<img src="test.jpg" alt="une image" title="une image" /></a></p></code>
Dans le CSS, tu définis le span comme invisible, et le span quand on survole comme visible... 
.cliquer a img {display:none;}
.cliquer a:hover img {display:block;}


Il y a des améliorations à faire, mais ça te fais une base correcte...

Sinon, voire du côté du Javascript, mais j'aime moins :-(
-1
Réponse 3 / 5
NickoX9 Messages postés 47 Date d'inscription   Statut Membre Dernière intervention   12
 
Merci beaucoup... c'est exactement ce que je voulais ...

J'ai trouvé une autre solution aussi avec une infobulle contenant une image...

Je récupépéte les 2 solutions:

1er solution : L'image apparait lors du passage sur le texte et le texte en dessous se décale

index.html 
 <p class="cliquer">
      <a href="lien_vers_une_page">
          Afficher l'image<img src="adresse_de_l'image" alt="image" title="image" />
      </a>
 </p>


style.css 
.cliquer a img {display:none;}
.cliquer a:hover img {display:block;}



2e solution : l'info-bulle qui contient une image (l'info-bulle passe au dessus du texte)

index.html 
  <a id="info_bulle" class="info_bulle" href="#">
    Voir l'infobulle image
  <span class="info_bulle"><span class="header"></span></span>
</a>


style.css 
a.info_bulle span.info_bulle
{								   
  display          : none; /* Rend invisible tout notre bloc span */
} 
 
a.info_bulle
{				
  color           : #000000;
  
  text-decoration : none; 
  
  padding         : 2px 16px 2px 2px; /*Définition des marges intérieures de notre lien */
  
  /* Définition de l'arrière plan de notre lien */
  background      : transparent url('comment.gif') no-repeat right center;
  
  position        : relative; /* Indispensable pour le bon positionnement de l'info-bulle */ 
}  
 
a.info_bulle:hover 
{
  border          : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
} 

a.info_bulle:hover span.info_bulle
{				
  display        :  block;    /* Rend visible notre bloc span */
  position       :  absolute; /* Sort notre bloc de son conteneur afin de le positionner */
  
  font-size      : 12px;
  
  width          : 220px;     /* On fixe une largeur par défaut */
  
  color          : #000;      /* Réinitialisation de la couleur du texte */
  
  text-align     : justify;   /* Justification du texte */	
  
  cursor         : default;   /* Réinitialisation de notre curseur, sinon par défaut on a le même que notre lien */
  
  /* Positionnement de notre info-bulle */
  top            : 1.8em;     
  left           : 1px;
  
  z-index        : 1000; /* Positionne au premier plan l'info-bulle en cas de chevauchement */
}  

span.header
{
   display          : block; 
   width           : 300px;  /* Largeur correspondant à celle de notre image */
   height          : 225px;  /* Hauteur correspondant à celle de notre image */
   line-height     : 220%;  /* Propriété qui centrera le texte verticalement */
   text-align      : center;
   background   : transparent url('./image.jpg') no-repeat 0 0; 
   font-size       : 15px; 
   font-weight     : bold;
}


Voila !

Bye :: X9
-1
macgawel Messages postés 664 Date d'inscription   Statut Membre Dernière intervention   89
 
A priori, les deux se valent...

si tu veux pousser un peu le sujet, je te conseille ce site, c'est une mine pour jouer avec les CSS...
-1
Réponse 4 / 5
NickoX9 Messages postés 47 Date d'inscription   Statut Membre Dernière intervention   12
 
aHHH autre question ... est il possible de laisser l'image sur la page quand on clic et de l'enlever quand on reclic?

X9
-1
macgawel Messages postés 664 Date d'inscription   Statut Membre Dernière intervention   89
 
Là, je ne connais pas de solution en CSS...

Il faudrait passer par du JS : 
// La fonction de base pour modifier le style d'affichage d'un élément
function Affiche(id,type) {
	try	{
	document.getElementById(id).style.display = type;
	}
	catch (err) {
		if (err.message != 'document.getElementById(id) has no properties') {
			throw err;
		}
	}
}
// Fonction pour "switcher" entre Afficher/Cacher
function Switcher(id, type) {
switch (document.getElementById(id).style.display) {
	case type:
		Affiche(id, 'none');
	break;
	default :
		Affiche(id,type);
	break;
	}
}

Le HTML : 
<a onclick='Switcher("image1", "block")'>Mon texte</a>
<img src="monimage.jpg" id="image1" class="cache" />

Et le CSS : 
.cache {display:none;}

Ca devrait le faire...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
NickoX9 Messages postés 47 Date d'inscription   Statut Membre Dernière intervention   12
 
Ca le fait ! Merci beaucoup !

X9 :: Bye
-1

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
Retrouver l'image originale après avoir fait des modifications ?
Raven -
Asta972155 -

10 réponses