[Aide] Prob avec Javascrip et style CSS ...

[GregK84]

Salut,

voila mon probleme en deux mots.
j'ai un calendrier sur mon site, je lui ai appliqué un style par defaut, et quand on survole un jour un evenement se produit. cet evenement est réalisé en javascript.

un lien est present sur certain jour, pour differencier ces jours, je leur applique un autre styles.

cela fonctionne sauf quand je passe dessus, c'est mon style par defaut se ré affiche, pas tres pratique ...

l'exemple : http://www.pspliberte.com/greg/site_sdav/index.php

code javascript :

Code : Tout sélectionner

<td onmouseover=\"this.className='day_activate';\" onmouseout=\"this.className='day_default';\">".$day."</td>

code css :

Code : Tout sélectionner

.calendar td, .day_default {
 font-size: 85%;
 cursor: pointer;
 width: 20px;
 height: 20px;
 text-align: center;
 background-repeat: no-repeat;
 background-image: url(../img/calendar_background.png);
}

.calendar .day_activate { 
 font-size: 110%;
 font-weight: bold;
 background-repeat: no-repeat;
 background-image: url(../img/calendar_select.png);
}

/* Définition du style des liens */

.calendar td.linked-day {
 background-image: url(../img/calendar_background_link.png);
}

.calendar td.linked-day a {
 color: #000000;
 font-weight: bold;
 text-decoration: underline;
}

.calendar td.linked-day:hover {
 background-image: url(../img/calendar_select_link.png);
}

voila,
Merci,
Gregk84

[Blustuff]

Il faut sauvegarder quelque part l'état initinal, d'une manière ou d'une autre. Plusieures solutions :

• Modifier l'élement onmouseover dynamiquement au survol ou déjà à la base définir onmouseover différement. (la seconde solution est la plus simple de toutes)
• Tester la présence de lien dans la case
• Utiliser deux noms de classe différents pour un test simple.
• etc.

'fin, y'a l'embarras quoi...

[GregK84]

et le plus simple serait de le faire en php ou javascript ?

[Blustuff]

php :

plutôt que de générer ça :

Code : Tout sélectionner

<td onmouseover="this.className='day_activate';" onmouseout="this.className='day_default';" class="linked-day">

génrez ça :

Code : Tout sélectionner

<td onmouseover="this.className='day_activate';" onmouseout="this.className='linked-day';" class="linked-day">

[Blustuff]

D'ailleurs, si je peux me permettre, le plus simple et direct serait de changer l'attribut style et non l'attribut class.

[calimo]

Et pourquoi pas simplement une pseudoclasse :hover

D'ailleurs, si je peux me permettre, le plus simple et direct serait de changer l'attribut style et non l'attribut class.

S'il y a plusieurs styles qui sont changés ce n'est pas plus simple. C'est le principe de la séparation du style, c'est beaucoup plus facile à gérer/mettre à jour/modifier, il n'y a qu'à changer la css, pas directement le code html (ou php) ce qui est beaucoup plus fastidieux

[GregK84]

je vais essaye ca ...
bien que le javascript n'est pas mon fort ...

[GregK84]

j'ai essaye de modifier mon code comme tu l'avais marqué, mais cela ne fonctionne pas.

les jours sans liens :
ils ont un style par defaut et quand je les survole, l'image de survole s'affiche. le jour reviens a son état initial quand je ne le survole plus. (ca c ok)

les jours avec liens : (qui pointe vers une des news)
ils ont un style différent des jours sans liens (pour qu'ils soient correctement différenciable) et quand je les survole, l'image de survole (pour le moment, la meme que les jours sans liens) s'affiche.
mais ces jours reprennent l'état par defaut des jours sans liens. (ce n'est pas ok)

[Blustuff]

C'est le principe de la séparation du style, c'est beaucoup plus facile à gérer/mettre à jour/modifier, il n'y a qu'à changer la css, pas directement le code html (ou php) ce qui est beaucoup plus fastidieux

Eh bien, il ne nous reste plus qu'à attendre que l'on puisse définir plusieures classes de style.

[Blustuff]

j'ai essaye de modifier mon code comme tu l'avais marqué, mais cela ne fonctionne pas.

Vous avez une version finale ? Je ne vois pas vraiment comment ça pourrait devenir quelque chose qui n'est pas mentionné Oo

[calimo]

Eh bien, il ne nous reste plus qu'à attendre que l'on puisse définir plusieures classes de style.

C'est à dire ?

Je ne sais pas si j'ai bien compris mais on peut définir class="style1 style2 style3", ça donne 3 classes sur un même objet... c'est ça qu'il te faut ?

[Benoit]

Tu peux passer plusieurs classes en paramètre à "className". Évidemment pour cela tu dois savoir ce qui était appliqué avant.

j'essaierais quelque chose comme

Code : Tout sélectionner

this.className=this.className.replace('day_default', 'day_activate')

comme ça tu remplaces juste la partie qu'il faut mais tu gardes aussi l'autre classe appliquée (linked_day). Il faut aussi qu'au départ tes liens aient les deux classes à la fois sinon ça marchera pas.

[Invité]

pourquoi ne pas faire comme calimo t'as suggéré :
(tu enlèves ce qui est en rouge et tu rajoutes ce qui est en vert)

.calendar td, .day_default {
font-size: 85%;
cursor: pointer;
width: 20px;
height: 20px;
text-align: center;
background-repeat: no-repeat;
background-image: url(../img/calendar_background.png);
}

.calendar td:hover .day_activate {
font-size: 110%;
font-weight: bold;
background-repeat: no-repeat;
background-image: url(../img/calendar_select.png);
}


et tu vires tous les onmouseover="this.className='day_activate';" onmouseout="this.className='day_default';" de tes <td> de ton code html

je te signale au passage que le fichier calendar_select_link.png n'est pas présent sur le serveur où se trouve l'exemple

[GregK84]

pourquoi ne pas faire comme calimo t'as suggéré :
(tu enlèves ce qui est en rouge et tu rajoutes ce qui est en vert)

Il s'agit de la méthode que j'avais utilisé au départ, mais étant donné que ie ne gere pas l'attribut css :hover j'ai chercher une solution alternative. et calimo m'avait conseiller d'utiliser le javascript (sur ce post) d'ou mon choix d'avoir réalisé mon "rollover" e javascript ...

je te signale au passage que le fichier calendar_select_link.png n'est pas présent sur le serveur où se trouve l'exemple

merci pour l'info j'v corriger ca :d

[Invité]

Il s'agit de la méthode que j'avais utilisé au départ, mais étant donné que ie ne gere pas l'attribut css :hover j'ai chercher une solution alternative. et calimo m'avait conseiller d'utiliser le javascript (sur ce post) d'ou mon choix d'avoir réalisé mon "rollover" e javascript ...

Si IE le gère mais pour les ancres (<a>) seulement ... donc désolé, c'est vrai que ça marche pas pour ton cas

Nouveau problème, tjrs au passage, tu ne switch pas les bonnes classes pour les td linked-day => ils deviennent tous des jours "normaux" après un passage de souris => mettre les bonnes classes dans les onmouseover et onmouseout