Rollover en changeant la classe CSS

Caroline -  
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

J'essaie de faire un rollover en javascript en allant chercher une classe dans mon fichier CSS. J'ai donc les classe vignetteDivOut et vignetteDivHover qui me serviront à faire mon rollover sur mes images.

Pour cela, j'utilise une fonction avec des paramètres, que voici :

function afficherVignettesDe(pTypeVignettes, pEmplacementPhysique, pNombrePhotos)

{

if (pTypeVignettes == "personnes")
// cacher la galerie et afficher les vignettes
cacherGalerie();
afficherVignettes();

if (pTypeVignettes == "animaux")
afficherVignettes();

if (pTypeVignettes == "batiments")
afficherVignettes();

var mesVignettes = document.getElementById("vignettes");
// effacer tous les enfants de l'élément.
while (mesVignettes.firstChild)
mesVignettes.removeChild(mesVignettes.firstChild);
// ajouter les 5 images de personnes à vignettes
for (var i=1 ; i<pNombrePhotos+1; i++)
{
var divi = document.createElement("div");
divi.setAttribute("id", "img" +i );
divi.setAttribute("class", "vignetteDivOut");
divi.setAttribute("onclick", "changerGrandeImage('"+pEmplacementPhysique+"', "+ i +");")
divi.setAttribute("onmouseover", + faireRollover)
divi.setAttribute("onmouseout", + pTypeVignettes)
mesVignettes.appendChild(divi);

var imgi = document.createElement("img");
imgi.setAttribute("src", "images/vignette/"+ pEmplacementPhysique + i + ".jpg");
divi.appendChild(imgi);

}

}

Et j'ai créé plus bas une fonction pour faire mon rollover, comme ceci :

function faireRollover(pNoImage, pClass){

document.getElementById(pNoImage).setAttribute("class", "pClass");

Donc dans ma fonction afficherVignettesDe, tout fonctionne, sauf quand je fait mes "setAttribute" pour assigner les paramètres onmouseover et onmouseout à mes images:

divi.setAttribute("onmouseover", + faireRollover)
divi.setAttribute("onmouseout", + pTypeVignettes)

Et je ne sais pas pourquoi... Quelqu'un pourrait-il m'aider????

Merci!

1 réponse

avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
Bonjour,

pour faire un rollover en Javascript il y a beaucoup plus simple et toujours avec des classes :
<div class="vignetteDivOut" onmouseover="this.className='vignetteDivHover';" onmouseout="this.className='vignetteDivOut'">Le contenu</div>

Sinon tu peux toujours utiliser :hover dans le CSS :
.vignetteDiv {
 // Le Css quand c'est en état normal
}
.vignetteDiv:hover {
 // Le style quand la souris est dessus
}
0