Clic sur texte = Apparition image

Résolu
NickoX9 Messages postés 50 Statut Membre -  
NickoX9 Messages postés 50 Statut Membre -
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
Configuration: Windows XP
Firefox 3.0.3

5 réponses

  1.
    macgawel Messages postés 676 Statut Membre 89
     
    Bonjour.

    Quel langage de programmation ?
    -1
  2. NickoX9 Messages postés 50 Statut Membre 12
     
    C'est pour un site web...
    -1
    1. macgawel Messages postés 676 Statut Membre 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
  3. NickoX9 Messages postés 50 Statut Membre 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
    1. macgawel Messages postés 676 Statut Membre 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
  4. NickoX9 Messages postés 50 Statut Membre 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
    1. macgawel Messages postés 676 Statut Membre 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

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

    Posez votre question
  6. NickoX9 Messages postés 50 Statut Membre 12
     
    Ca le fait ! Merci beaucoup !

    X9 :: Bye
    -1

Discussions similaires

Retrouver l'image originale d'une photo modifiée
Raven -
Asta972155 -

10 réponses
Clic gauche fonctionne très mal
bru561 -
bru561 -

5 réponses
Equivalent "clique droit" sur clavier
timmyyy -
leo -

15 réponses