javascript et css

08 sept. 2005, 17:52

Bonjour,
J'ai fait un style :

<style>
a:link {
color:red;
}
a:visited {
color:red;
}
a:hover {
color:red;
}
</style>

Est ce possible de changer dynamiquement par le javascript ce style ?

08 sept. 2005, 17:59

en faissant un truc du genre:

<style>
a:link {
color:<? echo $bleu ?>;
}
a:visited {
color:<? echo $vert ?>;
}
a:hover {
color:<? echo $rouge ?>;
}
</style>

a toi de récuperé ces variables avant l'affichage de la page

08 sept. 2005, 23:26

Si il fait:

<style>
a:link {
color:<? echo $bleu ?>;
}

c'est pas du javascript c'est du php

en Javascript, ce serait plutôt:

document.write("blue");

Par exemple...

09 sept. 2005, 10:14

Non ce que je voulais dire c'est de créer une fonction qui s'éxecute au click et qui modifie le css

09 sept. 2005, 11:50

Si tu nous illustrais par un exemple un petit peu détaillé ce que tu veux faire ? Il y a déjà pas mal de fonctionnalités disponibles dans le CSS, peut-être l'utilisation de JavaScript en plus n'est pas appropriée ?

09 sept. 2005, 15:35

voilà j'ai le code css :

Code : Tout sélectionner

<style> 
a:link { 
color:red; 
} 
a:visited { 
color:red; 
} 
a:hover { 
color:red; 
} 
</style>

Je voudrais pouvoir créer une fonction en javascript :

Code : Tout sélectionner

function modif(couleur)
{ // code pour modifier la couleur des liens
}

Voilà

09 sept. 2005, 16:13

Ça, j'avais compris, je te remercie, et ça ne répond pas à ma question : pourquoi changer e style CSS au lieu de créer directement le bon style ?

J'entrevois bien une possibilité : appliquer un style différent sur certains liens, mais pas sur tous: pas besoin de JavaScript pour ça, une classe CSS suffit largement. Est-ce que c'est ce que tu veux faire ?

09 sept. 2005, 18:16

Non j'ai besoin de changer au cours de la page, car en fait le visiteur a une liste déroulante pour choisir la couleur des liens, donc il faudrait que ça modifie dynamiquement le css

09 sept. 2005, 18:41

il faudrait que tu puisse faire suivre le choix de l'internaute dans une variable de session alors parce que sinon, l'effet modifié ne fonctionera plus au moindre changement de page

Suggestion (elle vaut ce qu'elle vaut) : proposer plusieurs feuilles de style prédéfinies et ensuite tu utilises une variable de session pour utiliser toujoursla même pour un internaute donné au long de sa navigation

09 sept. 2005, 18:53

Oui ça je sais mais ce que je vais c'est l'aperçu du style en direct, c'est à dire dès qu'on choisi le style a on direct un apercu sur les liens du site

09 sept. 2005, 19:22

Il faudrait que tes liens aient des attributs id et ce serait possible : JavaScript ne pourra pas agr directement sur la feuille de style CSS. Mais avec le DOM, c'est possible avec une instruction du genre:

Code : Tout sélectionner

window.document.getElementById('id_du_lien').style.color = '#cc3333';

Il y a peut-être une autre méthode pour pointer sur les liens,je ne suis pas certain, de mémoire : getElementByTagName('a') mais à vérifier, je ne suis pas un spécialiste du JavaScript.

30 sept. 2005, 16:20

Le probleme c'est qu'on ne peut donner un id à un lien A href...

Ce probleme m'interesse aussi, des que je trouve la solution je l'affiche^^

30 sept. 2005, 17:29

Je me suis crevé mais j'ai trouvé, lol !

<html>
<head>
<style>

a.styleDeux:link{color:red;}
a.styleDeux:visited{color:blue;}
a.styleDeux:hover{color:yellow;} 

a.styleUn:link{color:green;}
a.styleUn:visited{color:pink;}
a.styleUn:hover{color:olive;} 

a.styleTrois:link{color:black;}
a.styleTrois:visited{color:red;}
a.styleTrois:hover{color:blue;}

</style>

<script>
// ================== memoire du style ============
/* mettez içi une commande qui lit le cookie contenant le nom de la classe enregistrée et
qui mettra le nom dans la variable laclasse .*/

//applique le style enregistré dans le cookie^^
lien1.className=laclasse;

// ================== Fin de la memoire de style ========

function changeStyle(laclasse)
{
lien1.className=laclasse;
//içi mettez une commande qui crée un cookie contenant le nom de la classe choisie.
}

</script>

</head>
<body>

<a class="styleUn" name="lien1" href="#">Mon lien peut changer de style</a>


<select name="choix" onchange="changeStyle(choix.value)">
  <option value="styleUn">un premier style</option>
  <option value="styleDeux">un deuxieme style</option>
  <option value="styleTrois">un troisieme style</option>
</select>

</body>
</html>

Si cette methode pose probleme pour garder le style choisi à cause d'une actualisation de la page alors appelez la partie que j'ai nommé "memoire" à partir du Onload du body.

par exemple en créant une fonction memoire :

function memoire()
{
/* mettez içi une commande qui lit le cookie contenant le nom de la classe enregistrée et
qui mettra le nom dans la variable laclasse .*/

//applique le style enregistré dans le cookie^^
lien1.className=laclasse;
}

et en l'appelant avec le body :

<body onload="memoire()">
.............
............
</body>

30 sept. 2005, 17:37

Copiez toute la partie située entre les deux balises <HTML>
et collez-la dans une page vide du bloc-note, enregistrez sous un nom bidon comme teststyle.html, et lancez la page (pas par la fenetre) et voyez le résultat.

Je suis certain que tu pourra adapter le systeme de changement de style à ton cas, sinon ecris-moi.
[email protected]

javascript et css

Qui est en ligne