Bonjour,
J'ai 2 feuilles de style: style1.css et style2.css.
Dans ma page, je cherche à appliquer style1.css par défaut, et style2.css au survol d'un div par la souris (puis retour à style1.css onmouseout).
Merci.
Version complète: sur le forum Webmaster Hub : Changer de css au survol de la souris
Salut Jan
Inspire toi de ce <a href='http://www.wikistuce.info/doku.php?id=java script: switcher_entre_les_css_sans_refresh' target='_blank'>style switcher</a> qui te permet de changer de feuille de style en cliquant sur un lien (via du javascript et sans rafraichissement de la page évidemment). Il suffit de le modifier un peu pour que cela ce fasse sur le onmouseover et onmouseout.
Inspire toi de ce <a href='http://www.wikistuce.info/doku.php?id=java script: switcher_entre_les_css_sans_refresh' target='_blank'>style switcher</a> qui te permet de changer de feuille de style en cliquant sur un lien (via du javascript et sans rafraichissement de la page évidemment). Il suffit de le modifier un peu pour que cela ce fasse sur le onmouseover et onmouseout.
Salut,
Oui, je pense aussi qu'un style switcher avec une brindille d'adaptation pour le mettre sur le onmouseover/out du div au lieu du onchange d'un select devrait faire l'affaire.
Oui, je pense aussi qu'un style switcher avec une brindille d'adaptation pour le mettre sur le onmouseover/out du div au lieu du onchange d'un select devrait faire l'affaire.
Je ne saisis pas ton problème Jan...
Un onmouseout ne suffit-il pas ?
Un onmouseout ne suffit-il pas ?
Etonnant ce script indiqué par Jok...
Et ça marche effectivement avec un onmouseover, il suffit de stocker le 'title' du css dans une variable pour éviter que la routine ne tourne en permanence quand on reste sur le lien. On peut aussi enlever le 'return false' qui ne sert pas, et tout le truc sur le 'onload' qui amha ne sert pas non plus.
Et ça marche effectivement avec un onmouseover, il suffit de stocker le 'title' du css dans une variable pour éviter que la routine ne tourne en permanence quand on reste sur le lien. On peut aussi enlever le 'return false' qui ne sert pas, et tout le truc sur le 'onload' qui amha ne sert pas non plus.
CITATION(Loupilo @ samedi 17 décembre 2005, 17h07)
Je ne saisis pas ton problème Jan...
Un onmouseout ne suffit-il pas ?
Un onmouseout ne suffit-il pas ?
Peut-être, mais pour l'instant je coince.
Je fais:
CODE
<div id="mondiv" onmouseover="this.style.background='white';" onmouseout="this.style.background='grey';">
Quand je survole le div avec la souris le fond du div devient blanc, et onmouseout, il devient gris. Ca marche bien, en effet.
Mais ça ne répond pas à ce que je cherche à faire pour 2 raisons:
1- la modification de style ne porte que sur le div "mondiv", pas sur la page entière
2- je ne peux modifier qu'un ou plusieurs attributs (ici background) en les décrivant dans les onmouseover et onmouseout, alors que j'aimerais appliquer une feuille de style complètement différente sans avoir à la décrire complètement dans le onmouseover
En fait j'aimerais faire quelque chose comme:
CODE
<div id="mondiv" onmouseover="appliquer style2.css à la page" onmouseout="appliquer style1.css à la page">
C'est peut-être très simple, mais je ne sais pas le faire
Je regarde la solution proposée par Jok.
La solution de Jok répond complètement à ma question 
Dans le javascript du <head>:
Les css:
Et enfin le div:
Merci.
Dans le javascript du <head>:
CODE
function setActiveStyleSheet(title) {
/*
On passe un a un les balise <link>,
Pour chaque balise dont
1- l'attribut "rel" contient le mot "style"
2- l'attribut "title" existe
on active la balise link et, si le parametre "title" est égal a la variable title, on désactive la balise.
*/
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
/*
On passe un a un les balise <link>,
Pour LA balise dont
1- l'attribut "rel" contient le mot "style"
2- l'attribut "title" existe
3- Qui n'est pas désactivé
on renvoie le title de cette balise.
Si pas de coorespondance, on renvoie null
*/
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
/*
On passe un a un les balise <link>,
Pour LA balise dont
1- l'attribut "rel" contient le mot "style"
2-l'attribut "rel" ne contient pas le mot "alt"
2- l'attribut "title" existe
on renvoie le title de cette balise,
si pas de corespondance, on renvoie null
*/
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
window.onload = function(e) {
/*
A la fin du chargement de la page, récupere le CSS par defaut et l'active.
Si ce css était mémorisé par cookie, cela permetrait de rétablir le style choisie en derneir par l'internaute
*/
var title = getPreferredStyleSheet();
setActiveStyleSheet(title);
}
/*
Au chargement de la page, récupere le CSS par defaut et l'active.
Si ce css était mémorisé par cookie, cela permetrait de rétablir le style choisie en derneir par l'internaute
*/
var title = getPreferredStyleSheet();
setActiveStyleSheet(title);
/*
On passe un a un les balise <link>,
Pour chaque balise dont
1- l'attribut "rel" contient le mot "style"
2- l'attribut "title" existe
on active la balise link et, si le parametre "title" est égal a la variable title, on désactive la balise.
*/
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
/*
On passe un a un les balise <link>,
Pour LA balise dont
1- l'attribut "rel" contient le mot "style"
2- l'attribut "title" existe
3- Qui n'est pas désactivé
on renvoie le title de cette balise.
Si pas de coorespondance, on renvoie null
*/
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
/*
On passe un a un les balise <link>,
Pour LA balise dont
1- l'attribut "rel" contient le mot "style"
2-l'attribut "rel" ne contient pas le mot "alt"
2- l'attribut "title" existe
on renvoie le title de cette balise,
si pas de corespondance, on renvoie null
*/
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
window.onload = function(e) {
/*
A la fin du chargement de la page, récupere le CSS par defaut et l'active.
Si ce css était mémorisé par cookie, cela permetrait de rétablir le style choisie en derneir par l'internaute
*/
var title = getPreferredStyleSheet();
setActiveStyleSheet(title);
}
/*
Au chargement de la page, récupere le CSS par defaut et l'active.
Si ce css était mémorisé par cookie, cela permetrait de rétablir le style choisie en derneir par l'internaute
*/
var title = getPreferredStyleSheet();
setActiveStyleSheet(title);
Les css:
CODE
<link rel="stylesheet" type="text/css" href="style1.css" title="defaut" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="bis" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="bis" />
Et enfin le div:
CODE
<div id="mondiv" onmouseover="setActiveStyleSheet('bis'); return false;" onmouseout="setActiveStyleSheet('defaut'); return false;">
Merci.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.