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

  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 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

  4. #4
    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

  5. #5
    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.)

  6. #6
    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>

  7. #7
    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...

  8. #8
    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
    la solution css, n'est pas forcement evidente a mettre en place au niveau du positionnement de l'image dans le fond de la balise a. Mais ca doit etre jouable vue que tu as des tailles fixes pour tes divs.
    L'image sera le background de la balise a, on met un padding-right a la balise a et une valeur right dans la propriete background au moment du survol de a pour qu'il n'y ai pas supperposition du texte et de l'image.

    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
    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;
    	}
     
     
    	a.zone_image, a.zone_image:link, a.zone_image:visited {
    	background: none;
    	padding-right: 150px;/*largeur de l'image*/
    	height: 113px; /*hauteur de l'image*/
    	width: 420px;
    	display:block;
    	}
    	a.zone_image:hover {
    		background: url(images/divers/image.jpg) no-repeat right;
    	}
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    	<div class="zone_news">44
    	   <div id='zone_newstexte'><a href="#" class="zone_image">mon texte qui va declancher image</a></div>
    	</div>

  9. #9
    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
    ça ne marche pas mieux...
    et surtout le survol ne fait pas afficher l'image dans le caisson beu clair que j'ai mis en guise de test..
    j'ai mis la page en ligne sur http://oeildecale.fr
    le problème est visible quand on clique sur réalisations...

  10. #10
    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
    je ne comprends pas trop non plus le padding-right car vu que le texte s'affiche ds un div et l'image dans un autre div, il n'y aucun risque de superposition...

    et de + je pense que c'est ce padding qui me déparamètre le div d'écriture du texte...

  11. #11
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Citation Envoyé par mussara
    bonjour à tous
    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...
    Tu souhaites simplement que ton image s'affiche à un endroit précis, c'est ça ?

    Citation Envoyé par mussara
    faut-il que j'attribue à span la class zone_affichage_image ?
    La balise span n'est pas vraiment utile, par contre tu vas devoir attribuer le contenu de ta class à l'élément que tu veux faire afficher à cette position-là, soit ton image.

    Citation Envoyé par mussara
    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...
    En fait, le truc est de mettre dans ton html ton image à l'intérieur du lien qui doit l'activer. Dans un premier temps elle ne doit pas être visible et sur le :hover, elle s'affiche à la position souhaitée.

    En version très simplifiée, ça donne ça:

    html:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <body>
       <a href="#" class="zone_texte">mon texte qui va faire apparaitre l'image<img src="/images/divers/image.jpg" alt=" " /></a>
    </body>
    css:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    a.zone_texte img { 
       width:0; height:0; border-width:0;
    }
    a.zone_texte:hover { background:none;}
    a.zone_texte:hover img { 
       position:absolute;
       top: 420px;
       left:620px;	 
       width:120px;
       height:120px; 
    }
    2 remarques:

    - Plutôt que le display:none, les dimensions de l'image sont réduites à 0; plus d'info ici

    - On attribue une propriété au a:hover à cause d'un bug d'IE, plus d'infos ici
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  12. #12
    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
    le problème c'est qu'avec cette méthode, ça affiche l'image dans le div de départ...

  13. #13
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Citation Envoyé par mussara
    ça affiche l'image dans le div de départ...
    qu'entends-tu par là ?

    Dans mon exemple je ne vois pas un seul div...
    L'image s'affiche où on veut à l'écran indépendament de là où elle se trouve dans le code puisqu'elle est en absolu. Il n'y a pas besoin de "div de destination" pour la positionner (juste voir quelle référence on veut donner pour le positionnement absolu). Le problème que je vois pourrait être une superposition avec un autre bout de code mais règlable avec le z-index.
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  14. #14
    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
    oui je suis d'accord avec toi
    mais quand j'applique syntaxiquement ton code, l'image vient s'afficher dans le div dans lequel le survol a été provoqué...
    en gros j'ai une zone de texte qui est dimensionnée et je souhaiterai que lorsqu'on passe la souris sur ce texte, ça affiche l'image sur un autre div...

  15. #15
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Mais pourquoi "sur an autre div" ? IL y a une raison particuliaire pour que tu veuilles absolument que ça s'affiche sur un div différent (à cause d'un javascript,... ) ? Auquel cas je pense que ce n'est pas fesable en css mais en JS.

    Maintenant si je prends le lien que tu as montré plus haut je ne comprends pas en quoi la méthode que je t'ai proposée ne te satisfait pas, si le but est juste de faire apparaître une image dans le carré vert en bas à droite lors du survol du menu en haut ? C'est à cause du contenu qui peut avoir une taille variable et donc ton carré qui peut bouger ?

    edit: ah non vu les arrondis sur les côtés je suppose que le carré a une position fixe
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  16. #16
    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
    oui c'est exactement ça

    j'ai un div de récupération de textes qui s'affichent en fonction du menu et dans cette zone de texte j'ai des appels qui vont (enfin que je voudrais qu'ils aillent!!!) vers un autre div qui est à lui seul un div particulier...

    le carré a en effet une position fixe (il n'est là pour l'instant que pour montrer l'emplacement)

    je pense que je vais me retourner vers le javascript ou alors changer totalement ma procédure...

  17. #17
    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
    bien joue Candygirl, ca semble bien fonctionner ^^

    je n'avais pas pensé a cette solution pensant que IE ne comprendrai pas ce selecteur a.zone_texte:hover img mais force est de constaté que ca marche je croi que je vais pouvoir remplacer certains de mes js par du css
    merci donc

    Comme Candygirl, je ne comprend pas pourquoi tu ne peu pas utiliser ce code.

  18. #18
    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
    je pense que j'ai une erreur de conception avant tout dans ce que je veux faire...

    mais sinon j'ai mis en ligne le code de CandyGirl mais sous IE ça ne fonctionne pas(en tout cas lorsqu'on est dans un div donné, ou + spécialement dans mon div, car j'ai peut être encore un truc qui merdouille dedans...), la liste des liens se bloque sur la dernière ligne survolée pour faire afficher une image...

  19. #19
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Merci, masu

    Mussara, il se peut qu'il y ait un problème avec IE si ton lien d'appel est sur une image (il me semble avoir rencontré ce problème une fois dans un contexte légérement différent). Pour le contourner il suffit de mettre l'image comme image de fond de ton lien.
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  20. #20
    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
    hou la!!!
    je n'ai pas saisi...

    il faut que j'attribue une propriété de background image à ma classe? c'est bien ça?
    mais à ce moment la, il me faut autant de classes différentes que j'ai de liens? non?

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