Rollover en changeant la classe CSS
Caroline
-
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention -
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!
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!
A voir également:
- Rollover en changeant la classe CSS
- Changer clavier qwerty en azerty - Guide
- Changer la police sur facebook - Guide
- Changer la couleur de la barre des taches - Guide
- Changer la lettre d'un disque dur - Guide
- Comment changer la langue sur facebook - Guide
1 réponse
Bonjour,
pour faire un rollover en Javascript il y a beaucoup plus simple et toujours avec des classes :
Sinon tu peux toujours utiliser :hover dans le CSS :
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 }