Image allumée

Bonjour à tous,

sur mon site
http://www.tcv-batiment.com/references001.html
j'aurai aimé que quand on clique sur une image elle reste allumée. j'ai utilisé la méthode des sprites.
avez vous une solution?
merci
Modifié par ouwaich (16 Nov 2010 - 09:58)

Salut,

Tu peux te pencher sur l'astuce Comment appliquer des styles spécifiques à la page en cours dans un menu ?, en adaptant pour ton propre cas.
Modifié par Mikachu (16 Nov 2010 - 10:22)

merci je vais potasser tout ça.

to be continued

Essaye par exemple de mettre une classe couleur à chaque image que tu veux voir en couleur.

Par exemple dans ta page references001.html remplace la ligne :

<div class="img001"> <a href="references001.html"></a></div> <div class="blank"></div>

Par :

<div class="img001"> <a [#red]class="couleur" [/#]href="references001.html"></a></div> <div class="blank"></div>

Pour ta page references002.html tu remplaceras de la même manière la ligne suivante

Il ne reste plus qu’à modifier la css ainsi :

#projectsPanel .img001 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left; border:0;background:url(images/gallerie/img001.jpg) no-repeat}	
#projectsPanel .img001 a:hover,
#projectsPanel .img001 a.couleur{background:url(images/gallerie/img001.jpg) right no-repeat;}	
#projectsPanel .img002 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left; border:0;background:url(images/gallerie/img002.jpg) no-repeat}	
#projectsPanel .img002 a:hover,
#projectsPanel .img002 a.couleur{background:url(images/gallerie/img002.jpg) right no-repeat;}
#projectsPanel .img003 a{width:70px; height:70px; margin:0px 0px 10px 0px; padding:0px;float:left;border:0;background:url(images/gallerie/img003.jpg) no-repeat}
#projectsPanel .img003 a:hover,
#projectsPanel .img003 a.couleur{background:url(images/gallerie/img003.jpg) right no-repeat;}
#projectsPanel .img004 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img004.jpg) no-repeat}
#projectsPanel .img004 a:hover,
#projectsPanel .img004 a.couleur{background:url(images/gallerie/img004.jpg) right no-repeat}
#projectsPanel .img005 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img005.jpg) no-repeat}
#projectsPanel .img005 a:hover,
#projectsPanel .img005 a.couleur{background:url(images/gallerie/img005.jpg) right no-repeat}
#projectsPanel .img006 a{width:70px; height:70px; margin:0px 0px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img006.jpg) no-repeat}
#projectsPanel .img006 a:hover,
#projectsPanel .img006 a.couleur{background:url(images/gallerie/img006.jpg) right no-repeat}	
#projectsPanel .img007 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img007.jpg) no-repeat}
#projectsPanel .img007 a:hover,
#projectsPanel .img007 a.couleur{background:url(images/gallerie/img007.jpg) right no-repeat}
#projectsPanel .img008 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img008.jpg) no-repeat}
#projectsPanel .img008 a:hover,
#projectsPanel .img008 a.couleur{background:url(images/gallerie/img008.jpg) right no-repeat}
#projectsPanel .img009 a{width:70px; height:70px; margin:0px 0px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img009.jpg) no-repeat}
#projectsPanel .img009 a:hover,
#projectsPanel .img009 a.couleur{background:url(images/gallerie/img009.jpg) right no-repeat}	
#projectsPanel .img010 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img010.jpg) no-repeat}
#projectsPanel .img010 a:hover,
#projectsPanel .img010 a.couleur{background:url(images/gallerie/img010.jpg) right no-repeat}
#projectsPanel .img011 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img011.jpg) no-repeat}
#projectsPanel .img011 a:hover,
#projectsPanel .img011 a.couleur{background:url(images/gallerie/img011.jpg) right no-repeat}
#projectsPanel .img012 a{width:70px; height:70px; margin:0px 0px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img012.jpg) no-repeat}
#projectsPanel .img012 a:hover,
#projectsPanel .img012 a.couleur{background:url(images/gallerie/img012.jpg) right no-repeat}	
#projectsPanel .img013 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img013.jpg) no-repeat}
#projectsPanel .img013 a:hover,
#projectsPanel .img013 a.couleur{background:url(images/gallerie/img013.jpg) right no-repeat}
#projectsPanel .img014 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img014.jpg) no-repeat}
#projectsPanel .img014 a:hover,
#projectsPanel .img014 a.couleur{background:url(images/gallerie/img014.jpg) right no-repeat}
#projectsPanel .img015 a{width:70px; height:70px; margin:0px 0px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img015.jpg) no-repeat}
#projectsPanel .img015 a:hover,
#projectsPanel .img015 a.couleur{background:url(images/gallerie/img015.jpg) right no-repeat}	
#projectsPanel .img016 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img016.jpg) no-repeat}
#projectsPanel .img016 a:hover,
#projectsPanel .img016 a.couleur{background:url(images/gallerie/img016.jpg) right no-repeat}
#projectsPanel .img017 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img017.jpg) no-repeat}
#projectsPanel .img017 a:hover,
#projectsPanel .img017 a.couleur{background:url(images/gallerie/img017.jpg) right no-repeat}
#projectsPanel .img018 a{width:70px; height:70px; margin:0px 0px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img018.jpg) no-repeat}
#projectsPanel .img018 a:hover,
#projectsPanel .img018 a.couleur{background:url(images/gallerie/img018.jpg) right no-repeat}	
#projectsPanel .img019 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img019.jpg) no-repeat}
#projectsPanel .img019 a:hover,
#projectsPanel .img019 a.couleur{background:url(images/gallerie/img019.jpg) right no-repeat}
#projectsPanel .img020 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img020.jpg) no-repeat}
#projectsPanel .img020 a:hover,
#projectsPanel .img020 a.couleur{background:url(images/gallerie/img020.jpg) right no-repeat}
#projectsPanel .img021 a{width:70px; height:70px; margin:0px 0px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img021.jpg) no-repeat}
#projectsPanel .img021 a:hover,
#projectsPanel .img021 a.couleur{background:url(images/gallerie/img021.jpg) right no-repeat}	
#projectsPanel .img022 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img022.jpg) no-repeat}
#projectsPanel .img022 a:hover,
#projectsPanel .img022 a.couleur{background:url(images/gallerie/img022.jpg) right no-repeat}
#projectsPanel .img023 a{width:70px; height:70px; margin:0px 10px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img023.jpg) no-repeat}
#projectsPanel .img023 a:hover,
#projectsPanel .img023 a.couleur{background:url(images/gallerie/img023.jpg) right no-repeat}
#projectsPanel .img024 a{width:70px; height:70px; margin:0px 0px 10px 0px; padding:0px; float:left;border:0;background:url(images/gallerie/img024.jpg) no-repeat}
#projectsPanel .img024 a:hover,
#projectsPanel .img024 a.couleur{background:url(images/gallerie/img024.jpg) right no-repeat}	

Euuuh non adrien881, dans ton exemple les liens ne contiennent aucune information, et sont donc parfaitement inaccessibles !!

Je pensais plus à quelque chose du genre

<a href="..."><img src="images/image52[#indigo]<?php if ($pageName == 'nom_de_la_page') { echo 'hover'; } else { echo ''; } ?>[/#].jpg" alt="alternative textuelle" /></a>

Avec après chaque balise ouvrante du body, ceci :

<?php $pageName = "nom_de_la_page";?>

En prenant soin de préciser un nom unique pour chaque page, le petit bout de code php se chargera de vérifier : si le nom de la page correspond, alors le fichier image52.jpg (qui correspond à la miniature sans effet de page active), se verra affublé d'un "hover" dans le nom du fichier, qui deviendra image52hover.jpg. En ayant pris soin d'avoir bien créé les deux images avec ces noms, nom_de_l_image.jpg et nom_de_l_imagehover.jpg, cela devrait fonctionner.
Si le nom ne corrspond pas, alors il ne sera rien rajouté au nom.
Modifié par Mikachu (16 Nov 2010 - 11:24)

Je suis 100% d’accord avec toi mikachu. Il faut toujours mettre de l’information entre les balises <a> et </a> car il faut penser aux personnes qui désactivent la css ou qui n’y ont pas accès.
Ces balises deviennent alors comme des panneaux indicateurs où il n’y aurait rien de marqué ce qui est assez cocasse.

L’accessibilité n’étant pas le sujet de la question, je me suis permis de reprendre tel quel le code de la page d’ouwaich.

On n’a pas l’habitude d’avoir ce type de remarques sur les autres forums et c’est tout à votre honneur.
Modifié par adrien881 (16 Nov 2010 - 11:45)

adrien881 a écrit :
L’accessibilité n’étant pas le sujet de la question, je me suis permis de reprendre tel quel le code de la page d’ouwaich.

Même sans être la question, plus on sensibilise les gens sur ce point, plus le web s'améliorera vite !

adrien881 a écrit :
On n’a pas l’habitude d’avoir ce type de remarques sur les autres forums et c’est tout à votre honneur.

Bah en même temps, si tu lis la petite mention en bas du site tu verras que ce genre de remarques est courant ici !

Je cite :

Alsacréations a écrit :
Alsacréations est une communauté dédiée à la conception de sites web de qualité, notamment grâce aux standards W3C, aux feuilles de styles CSS, aux langages HTML et XHTML, et à l'accessibilité (en savoir plus...)

Modifié par Mikachu (16 Nov 2010 - 11:55)

Je ne connais pas du tout le php. Donc c'est un peu dur pour moi de comprendre tout ça.
mais si je comprends bien mon morceau de code ci-dessous n'est pas tout à fait juste

<div class="img001"> <a href="references001.html"></a></div> <div class="blank"></div>

j'ai utilisé des sprites, donc je n'ai qu'une seule image. Est ce qu'il faut que je revienne à 2 images séparées?

Si tu ne veux pas être obligé de retoucher tes images, la solution la plus simple pour avoir un site accessible par le plus grand nombre serait de remplacer les

<a href="references0??.html"></a>

par

<a href="references0??.html"><span class="pourCssDesactive">Une description de chaque image</span></a>

et de rajouter dans ton fichier css

.pourCssDesactive {display:none}

De plus le lien en bas de ta page vers l’accueil ne marche pas. Je pense qu’il faudrait le faire pointer vers index.html et non accueil.html

Évite aussi d’utiliser la balise h3 pour présenter la date de dernière mise à jour.
Évite de mettre des informations sur la mise en page dans ton .html comme <h3 align="right"> en plus ce n’est pas standard.
La balise br en xhtml s’écrit <br/> donc remplace <br> par <br/> et supprime </br>

Une fois corrigé tu devrais contenter ces deux pages :
http://wave.webaim.org/report?url=http%3A%2F%2Fwww.tcv-batiment.com%2Freferences001.html&js=2
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tcv-batiment.com%2Fprestations.html&charset=(detect+automatically)&doctype=Inline&group=0

Dans ta page prestation.html, je mettrais un trait d’union à chauffe-eau et court-circuit. Je pense qu’il faut mettre un s à toilette dans accessoire de toilettes (du moins si tu parles de cuvette et non de fond de teint)