Souci image avec css

math -  
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

J'aimerais savoir comment changer une image au survole de la souris sur une première div et que cette image apparais dans une autre div. 


<div id="image1">ici la div 1</div>

<div id="image2">je voudrais que l'image apparaisse ici quand je passe la souris sur la div1</div>

Je ne sais pas si vous voyez ce que je veux dire?

on peut y voir un exemple congrès sur le site de funradio je ne veux pas de slider moi ce qui c'est juste de faire l'évènement en utilisant css ou javascript
A voir également:

4 réponses

Réponse 1 / 4
Rakholnikov
 
Salut,

Avec javascript(CSS utilise les pseudo classes et fait cela pour les liens), vous pouvez trouver des exemples ici:

https://www.google.fr/search?q=changer+une+image+avec+javascript


Ou en vous renseignant sur le DOM javascript, nootament l'utilisation de innerHTML.
0
Réponse 2 / 4
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Bonjour

voici un exemple

avec javascript

<script language="JavaScript" type="text/javascript">
function AFFICHE(mon_texte){
document.getElementById('resultat').innerHTML ="<img src='" + mon_texte + "'/>";
}
function CACHE(){
document.getElementById('resultat').innerHTML ="";
}
</script>

<div><a href="" onmouseover="javascript:AFFICHE('image1.jpg');" onmouseout="javascript:CACHE();"><img src="image1.jpg" /></a></div>
<div id="resultat"></div>

avec css
attention #resultat doit être le frère immédiatement suivant de #image

le html

<div id="image"><img src="image1.jpg" /></div>
<div id="resultat"><img src="image1.jpg" /></div>

le css

#image {
width:150px; /**taille d'affichage de l'image**/
}
#image img {
width:100%;
}
#image:hover + #resultat {
display:block;
}
#resultat {
display:none;
}

voila


Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
0
math
 
j'ai test ton code et adapter suivant ma config mais ça ne marche pas :

voilà comment j'ai fais :

Cotés CSS: 


/* Image 1 */
#slider_img1 {
width:180px;
height:170px;
background-image: url(../images/slider/centrale1.jpg);
}
#slider_img1 img {
width:100%;
}
#slider_img1:hover + #slider_img_centrale {
display:block;
background-image: url(../images/slider/vignette_centrale1.jpg);
}
#slider_img_centrale {
display:none;
width:500px;
height:300px;
} 


/* Image 2 */
#slider_img2 {
width:180px;
height:170px;
background-image: url(../images/slider/centrale2.jpg);
}
#slider_img2 img {
width:100%;
}
#slider_img1:hover + #slider_img_centrale {
display:block;
background-image: url(../images/slider/vignette_centrale2.jpg);
}
#slider_img_centrale {
display:none;
width:500px;
height:300px;
} 

/* Image 3 */
#slider_img3 {
width:180px;
height:170px;
background-image: url(../images/slider/centrale3.jpg);
}
#slider_img3 img {
width:100%;
}
#slider_img3:hover + #slider_img_centrale {
display:block;
background-image: url(../images/slider/vignette_centrale3.jpg);
}
#slider_img_centrale {
display:none;
width:500px;
height:300px;
} 

/* Image 4 */
#slider_img4 {
width:180px;
height:170px;
background-image: url(../images/slider/centrale4.jpg);
}
#slider_img4 img {
width:100%;
}
#slider_img1:hover + #slider_img_centrale {
display:block;
background-image: url(../images/slider/vignette_centrale4.jpg);
}
#slider_img_centrale {
display:none;
width:500px;
height:300px;
}


Maintenant dans mon code html: 

<table>
  <tr>
    <td width="180" height="170"><div id="slider_img1"></div></td>
    <td  rowspan="2" width="500" height="300"><div id="slider_img_centrale"><div></td>
    <td width="180" height="170"><div id="slider_img2"><div></td>
  </tr>
  <tr>
    <td width="180" height="170"><div id="slider_img3"><div></td>
    <td width="180" height="170"><div id="slider_img4"><div></td>
  </tr>
</table>


Ce que je cherche à faire et que chaque vignette apparaisse dans une div générale
appeler slider_img_centrale qui est le centre du slider une vignette serait = à sont image mais en plus grande.
0
Réponse 3 / 4
math
 
merci beaucoup !!

je vais pouvoir me pencher dessus, merci .
0
Réponse 4 / 4
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Ca ne marche pas parce que tu as mis tes div dans une balise table

d'ailleurs table sert a afficher des données tabulaire, pas a faire du positionnement

positionne tes div image avec float:left; ou display:inline-block;

de plus j'avais précisé que la div d'affichage doit être le frère suivant de la div d'origine donc avec plusieurs div ca ne va pas marcher et encore moins dans un table

donc ce que tu dois faire
ne pas utiliser de table et que le div d'affichage soit en dernier comme cela

<div id="image1"></div>
<div id="image2"></div>
<div id="resultat"></div>

puis la pseudo classe :hover comme cela

#image1:hover ~ #resultat { ... }

#image2:hover ~ #resultat {...}

petit précision sur les pseudo classe hover


#image:hover #resultat (si #resultat est descendant de #image)

#image:hover > #resultat (si #resultat est fils de #image)

#image:hover + #resultat (si #resultat est frère directement suivant de #image)

#image:hover ~ #resultat (si #resultat est un frère suivant de #image)

dans les autre cas il faut passer par du js

sinon avec js tu as ca

le html

<script language="JavaScript" type="text/javascript">
function AFFICHE(mon_texte){
document.getElementById('resultat').innerHTML ="<img src='" + mon_texte + "'/>";
}
</script>

<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('image1.jpg');" onmouseout="javascript:AFFICHE('image1.jpg');"><img src="image1.jpg" /></a></div>
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('image2.jpg');" onmouseout="javascript:AFFICHE('image2.jpg');"><img src="image2.jpg" /></a></div>
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('image3.jpg');" onmouseout="javascript:AFFICHE('image3.jpg');"><img src="image3.jpg" /></a></div>

<div id="resultat"></div>

le CSS

.vignette {
margin: 0;
width:100px;
display:inline-block;
}

.vignette img {
width: 100%;
}

#resultat {
margin: 20px auto;
width:auto;
height: auto;
}


voila
0
math
 
OK merci donc a travers un tableau ce n'est pas possible ...
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
non pas avec css et les tableaux ne sont pas fait pour le positionnement mais pour afficher des données tabulaires
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse