IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[css] afficher image sur div différent


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de mussara
    Inscrit en
    Novembre 2004
    Messages
    442
    Détails du profil
    Informations personnelles :
    Âge : 57

    Informations forums :
    Inscription : Novembre 2004
    Messages : 442
    Par défaut [css] afficher image sur div différent
    bonjour à tous

    j'essaie, en vain, de faire afficher une image dans un div donné depuis un lien qui se trouve sur un autre div...
    donc en gros en passant la souris sur un texte placé dans un div je souhaiterai que ça m'affiche une image sur un autre div...

    mon css est composé de la sorte:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .zone_affichage_image {
       position:absolute;
       top: 420px;
       width:120px;
       height:120px;
       margin-left:620px;
       display: block;
    }
     
    .zone_affichage_image a {
       text-decoration: none; 
    }
    .zone_affichage_image a span { 
       display: none;
    }
    .zone_affichage_image a:hover span { 
       display: inline;
       position: absolute;
       top: 620px;
       margin-left: 600px;
       width: 120px;
       height: 120px;
    }
    et mon code d'appel:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <div class="zone_texte">
       <a href="">mon texte qui va faire apparaitre l'image<span><img src="/images/divers/image.jpg"></span></a>
    </div>
    faut-il que j'attribue à span la class zone_affichage_image ? si oui, comment lui spécifier car le texte je souhaite qu'il dépende de ma classe zone_texte mais qu'au survol de celui-ci , il fasse afficher une image dans zone_affichage_image...

    merci de votre aide

  2. #2
    Membre confirmé
    Inscrit en
    Juin 2005
    Messages
    120
    Détails du profil
    Informations forums :
    Inscription : Juin 2005
    Messages : 120
    Par défaut Une solution différente
    Je ne sais pas si tu fais ou non parti de ces personnes qui sont totalement Anti-Javascript, mais je connais une solution à ton problème en javascript.

    Si elle t'intéresse, fait moi signe

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    20
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 20
    Par défaut
    +1 masu

  4. #4
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    8
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2006
    Messages : 8
    Par défaut
    Utilise l'attribut display ...

    Voila un exemple :
    http://www.peutetreunereponse.net/article-1528160.html

    (Je ne suis pas sur que c'est ce que tu cherches .... car je n'ai pas très bien compris ton problème.)

  5. #5
    Membre chevronné Avatar de masu
    Inscrit en
    Février 2004
    Messages
    428
    Détails du profil
    Informations forums :
    Inscription : Février 2004
    Messages : 428
    Par défaut
    voici vite fait une petit solution js
    le css pour que l'image ne s'affiche pas au depart
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #test_image {
    visibility: hidden;
    }
    le html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
       <a href="" onmouseover="showImg(1);" onmouseout="showImg(0);">mon texte qui va faire apparaitre l'image<img id="test_image" src="image.jpg" width="50" height="30" /></a>
    la fonction js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function showImg(show) {
    var obj = document.getElementById('test_image');
    if (show==1)
    obj.style.visibility = 'visible';
    if (show==0)
    obj.style.visibility = 'hidden';
    }
    sinon pour du css
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    .zone_texte a, a:link, a:visited {
    background: none;
    padding-right: 50px;/*largeur de l'image*/
    height: 30px; /*hauteur de l'image*/
    }
    .zone_texte a:hover {
    	background: url(image.jpg) no-repeat right;
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div class="zone_texte">
    	 <a href="">mon texte qui va faire apparaitre l'image</a>
    </div>

  6. #6
    Membre éclairé Avatar de mussara
    Inscrit en
    Novembre 2004
    Messages
    442
    Détails du profil
    Informations personnelles :
    Âge : 57

    Informations forums :
    Inscription : Novembre 2004
    Messages : 442
    Par défaut
    merci pour vos aides respectives

    j'ai essayé la solution de Masu en css mais je n'arrive pas à voir l'image apparaître en passant la souris sur le texte...

    j'ai mon texte qui est affiché dans le div zone_news

    et en ajoutant le code (et en le modifiant un peu car le code initial ne marchait pas mieux) j'en suis arrivé là:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
     
    .zone_news { /* zone de texte pour afficher les news */
    	position:absolute;
    	font-size: 12px;
    	color: #000000;
    	text-align: justify;
    	padding:10px;
    /*	background-color: #CCFFCC;*/
    	overflow:auto;
            margin-left: 180px;
    	top: 158px;
    	width:350px;
    	height:364px;
    }
    .zone_image { /* zone d'affichage de l'image*/
    	position:absolute;
    	top: 420px;
    	width:120px;
    	height:120px;
    	margin-left:620px;
    	display: block;
    	background-color:#DDFFFF;
    	}
     
    .zone_image a, a:link, a:visited {
    background: none;
    width: 150px;/*largeur de l'image*/
    height: 113px; /*hauteur de l'image*/
    }
    .zone_image a:hover {
    	background: url(images/divers/image.jpg) no-repeat;
    }
    et l'appel est fait via:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <div class="zone_news">
       <div id='zone_newstexte'><a href="#">mon texte qui va declancher image</a></div>
    </div>
    et là je sèche...

    je pense que ça vient de l'écriture de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id='zone_newstexte'><a href="#">mon texte qui va declancher image</a></div>
    où rien ne lui est spécifié pour aller s'afficher dans la div zone_image???

    j'ai essayé aussi avec le script js, mais l'image ne s'affiche que dans le div courant et non pas dans le div de destination...

  7. #7
    Membre chevronné Avatar de masu
    Inscrit en
    Février 2004
    Messages
    428
    Détails du profil
    Informations forums :
    Inscription : Février 2004
    Messages : 428
    Par défaut
    alors tu a deux possibilitées soit utiliser du javascript, soit jouer le background de ta balise a

Discussions similaires

  1. Image survolée qui s'affiche dans 2 div différentes
    Par cruchovic dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 10/12/2009, 11h54
  2. afficher image sur une case survolée
    Par womannosky dans le forum 2D
    Réponses: 10
    Dernier message: 22/07/2008, 20h57
  3. background-image sur div largeur 100%
    Par mrmaxpower dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 13/04/2008, 17h08
  4. [CSS] background-image et classes différentes
    Par Istrella dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 15/09/2006, 18h44
  5. Afficher image sur formulaire
    Par Pfeffer dans le forum 4D
    Réponses: 3
    Dernier message: 24/07/2006, 10h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo