Comment remplacer une image par une autre lorsqu'elle a été cliquée?

Bonjour,

Je debute (precision qui a son importance ^^)

J'ai cree des boutons sur Photoshop que j'ai integre dans mon site. Ceux-ci renvoient tous vers un autre site dans une nouvelle fenêtre.

Cependant les boutons initiaux et ceux qui doivent apparaitre lorsque l'on a cliqué dessus ne sont pas les memes. Je dois donc remplacer l'image bouton 1 par l'image bouton 2 dans le cas ou l'on a cliqué dessus. (je parviens a changer la couleur, mais pas à inserer une nvelle image pour ce cas)

Quelle est la technique la plus appropriée?
J'espere avoir ete assez claire et compte sur votre aide précieuse, ce travail devant être réalisé très rapidement.

Merci d'avance!

Salut manjtou et bienvenue,

si les images de tes boutons sont en background (le texte étant dans le code html) tu peux te baser sur Créer des menus simples en CSS.

S'il s'agit d'images contenant le libellé (éléments IMG) il va falloir passer par du JavaScript et donc trouver un script sur le Web (rollover JavaScript).

Merci bcp de ta réponse plus que rapide!

Je dois aller surveiller un devoir mais je regarde dès que je peux.. En tous cas, mes boutons sont en mode "img" dans le html et non en background.. mais javascript je n'y connais rien du tout (et je reconnais que cela me fait un peu peur...) alors peut-être vaudrait-il mieux que je les repasse en background d'abord..
le souci c'est qu'il y a pas mal d'options a ces boutons comme le lien dans une nouvelle fenetre ou encore une appelation class...
Cela ne va-t-il pas me poser trop de problèmes avec les extensions si je passe les images en background?

Mercii!! et encore Merciii!!!

une derniere petite question oubliée:

Comment fais-je pour attribuer le code css dit dans votre lien (en y incorporant l'image par background) pour une seule des images du bloc? Dois-je réliser plusieurs blocs, un par image?
Car il y a le bouton 1 non cliké et le bouton 1bis cliké
le bouton 2 non cliké et le bouton 2bis cliké
le bouton 3 non cliké et le bouton 3bis cliké.. ect

desolee mais j'avoue etre un peu perdue dans le fait dincorporer une image par le css.. meme avec le tuto ^^

MErci

manjtou a écrit :
le souci c'est qu'il y a pas mal d'options a ces boutons comme le lien dans une nouvelle fenetre ou encore une appelation class...

Eh bien dans un cas comme dans l'autre tu auras un lien donc les mêmes options :

<a href="monlien.html" target="_blank" class="maclasse">Mon lien</a>

ou

<a href="monlien.html" target="_blank" class="maclasse"><img src="monimage.jpg" alt="Mon lien" width="100" height="50" /></a>

A noter qu'à priori tu n'as pas besoin de classe au niveau du lien mais juste d'attribuer un id ou une classe à l'élément UL (voir le tuto que je citais plus haut) et que pour pouvoir utiliser l'attribut target et que ton code reste valide il faudra utiliser un doctype transitional.

manjtou a écrit :
desolee mais j'avoue etre un peu perdue dans le fait dincorporer une image par le css.. meme avec le tuto

Ben en même temps je ne vois pas comment je pourrais faire mieux que le tuto qui a été rédigé spécialement pour être clair et simple.


Edit: bien sûr cela nécessite de connaître les bases de html et css.
Modifié par Heyoan (23 Dec 2009 - 14:02)

salut

javascript serait plus simple pour ce type d'usage. exemple avec jquery

$(document).ready(function() { 
	$('.newWindow').click(function(){ 
		$('.newWindow').attr({ target: '_blank' 
		}); 
	}); 
}); 

pour la nouvelle fenêtre et au moins çà passe avec tout les doctypes

il suffit d'écrire une classe css dans le lien, içi, newWindow, rien de plus. toujours avec jquery pour les rollovers d'images, input, etc. un Ko de code à charger et une classe css dans le lien et on à de jolis rollover sans connaitre une once de javascript. difficile de faire plus simple. même un débutant sans sort

le site du plugin jquery pour les rollovers

le site de jquery

et qu'est-ce qu'on dit? merci jquery! alors oui, javascript peut être désactivé...hà ben oui! mais qui désactive javascript aujourd'hui? et puis la balise noscript est là pour pallier.

Il faut mieux utiliser une image. Si tu utilises un "div" pour faire des boutons, sans même parler de l'aspect sémantique, si l'image est introuvable rien ne s'affichera. La propriété CSS background-image doit être utiliser avant tout pour des images de fonds, et pas des images cliquables ("bouton").
L'utilisation du javascript est en effet une bonne solution. Sinon, il existe des sites internet permettant de générer ce genre de code automatiquement, mais c'est pas toujours terrible.