Astuce pour faire une image réactive en CSS

posté par m1ro, le 26 janvier 2008 à 16:00

Il existe différentes méthodes pour mettre en place une image qui change lorsqu'elle est suvolée.
Ce n'est pas bien difficile à réaliser en JavaScript mais cela pose un problème d'accessibilité. En effet, ce dernier n'est pas activé sur toutes les machines.

Il est donc préférable d'utiliser les CSS en mettant les images en background. Cependant l'image survolée n'est chargée qu'au moment du survole. La réaction n'est alors pas toujours instantanée.

Pour pallier à ce problème, j'ai trouvé une solution simple grâce à un tutoriel sur le site Alsacréations.com.
La méthode consiste simplement à mettre les deux images sur la même image. Lorsque l'image est survolée, on ne change plus l'image de fond, mais la position de celle-ci :

.bouton { background: url(images/bouton_survole.png) no-repeat 0 0; }

.bouton:hover { background-position: 0 -30px; }

exemple

Remarque : afin de rester accessible, il ne faut pas placer le texte directement sur l'image, mais dans le code XHTML.

Web developer, une extension Firefox bien pratique !

posté par m1ro, le 25 janvier 2008 à 22:45

Webdeveloper est une barre d'outils intégrée à Firefox qui permet d'accéder rapidement à de nombreuses fonctionnalités afin de tester vos pages web.

Vous pourrez par exemple désactiver ou modifier les CSS, vérifier la validité du code, faire apparaître la structure de la page ou encore afficher de nombreuses informations (poids de la page, taille des blocs, couleurs...).

La liste est encore longue, je vous conseille plutôt d'aller l'essayer.
Pour celà, il suffit de cliquer sur ce lien : Web Developer 1.1.4 fr
L'installation démarrera automatiquement.

Si vous utilisez encore Internet Explorer, c'est l'occasion d'installer Mozilla Firefox.

Festi-ciné Meaux : 1, 2 et 3 février 2008

posté par m1ro, le 24 janvier 2008 à 23:18

Un petit coup de pub pour le Festi-ciné Meaux, organisé par le Ciné Meaux Club les 1er, 2 et 3 février 2008.

Au programme : diffusion de 14 films, tables rondes, exposition... en présence des réalisateurs Bertrand Tavernier (parrain de l'association) et Claude Miller.

Le festival aura lieu au cinéma Majestic et au centre culturel Luxembourg, à Meaux, en Seine-et-Marne (77).

Pour plus d'informations, allez faire un tour sur le site officiel : cinemeauxclub.fr.

CSS 2 : pratique du design web

posté par m1ro, le 17 octobre 2007 à 22:55

Je vous recommande fortement ce livre écrit par Raphaël Goetter, un des rédacteurs du site Alsacreations.

Il y explique comment concevoir proprement un site web en XHTML et CSS, respectant les normes du W3C et accessible à tous.

Un livre complet et pédagogique fournissant de bons conseils pour les webdesigners.


Raphaël GOETTER
CSS 2 : Pratique du design web
éditions Eyrolles, 2005