Aller au contenu

Changer de css au survol de la souris

Jan

Par Jan
dans (X)HTML et CSS

 Partager

Sujets conseillés

Jan

Jan

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Jok

Jok

Posté
Posté (modifié)

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é par Jok
Lien vers le commentaire
Partager sur d’autres sites
Remi

Remi

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Jan

Jan

Posté
  • Auteur
Posté
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.

Lien vers le commentaire
Partager sur d’autres sites
Jan

Jan

Posté
  • Auteur
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...