Rechercher : dans
Par :

Bouton-image en javascript

Dernière réponse le 19 fév 2008 à 17:56:03 hack_net, le 19 fév 2008 à 14:01:41 
 Signaler ce message aux modérateurs

Bonjour,

Je souhaiterais faire un lien en img (pas de probléme particulier jusqu'ici) mais j'aimerais que cette image change au passage de la souris. J'ai tout naturellement eut le reflex "Javascript". Le seul PB c'est que je ne connait pas ce language (oui je sais, il faut que je m'y mette, mais j'ai pas trop le temps en ce moment !).

Le lien se situ comme ceci:
<li><a href="accueil.html" target="corps"><img height="48" width="162" src="images/accueil_norm.png" alt="Accueil" border="0" onMouseUp="" /></a></li>

Question: Quesque je dois mettre dan ce onMouseUp="" ???

Merci de vos réponses...

Configuration: Windows XP
Firefox 2.0.0.11

Meilleures réponses pour « Bouton image en javascript » dans :
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Javascript - les boîtes de dialogue VoirQu'est-ce qu'une boîte de dialogue? Une boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à un événement, et qui permet Soit d'avertir l'utilisateur Soit le confronter à un choix Soit lui demander de compléter un champ pour...

1

OrionS, le 19 fév 2008 à 14:13:11

Bonjour,

ci-dessous le code JS pour changer une image :

<script>
	function change()
	{
		document.images["img1"].src = "http://www.itligentia.com/wp-content/images/firefox.jpg";
	}
	function dechange()
	{
		document.images["img1"].src = "http://www.google.fr/intl/fr_fr/images/logo.gif";
	}
</script>

<a href="" onMouseOver="change()" onMouseOut="dechange()"><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" name="img1"></a>

Répondre à OrionS

2

Enax, le 19 fév 2008 à 14:21:44

C'est plus simple de passer par du CSS :

<li><a href="accueil.html" target="corps" class="bouton"></a></li>

.bouton
{
	display: block;
	width: 162px;
	height: 48px;
	background-image: url("image1.png");
}

.bouton:hover
{
	background-image: url("image2.png");
}

Répondre à Enax

3

 hack_net, le 19 fév 2008 à 17:56:03

Merci a tout les deux!

Je vais prendre les 2 méthodes !!!

A+

Répondre à hack_net