Changer de css au survol de la souris

Jan · 16 Décembre 2005

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.

Jok · 16 Décembre 2005

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.

Modifié 16 Décembre 2005 par Jok

MarvinLeRouge · 17 Décembre 2005

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.

Loupilo · 17 Décembre 2005

Je ne saisis pas ton problème Jan...

Un onmouseout ne suffit-il pas ?

Remi · 17 Décembre 2005

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.

Jan · 17 Décembre 2005

Je ne saisis pas ton problème Jan...
Un onmouseout ne suffit-il pas ?

<{POST_SNAPBACK}>

Peut-être, mais pour l'instant je coince.

Je fais:

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

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

Jan · 17 Décembre 2005

La solution de Jok répond complètement à ma question

Dans le javascript du <head>:

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

Les css:

<link rel="stylesheet" type="text/css" href="style1.css" title="defaut" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="bis" />

Et enfin le div:

<div id="mondiv" onmouseover="setActiveStyleSheet('bis'); return false;" onmouseout="setActiveStyleSheet('defaut'); return false;">

Merci.

Connexion

Changer de css au survol de la souris

Sujets conseillés

Jan

Jok

MarvinLeRouge

Loupilo

Remi

Jan

Jan

Veuillez vous connecter pour commenter

Parcourir

Activité