HTML : changer une image lors d'un clic

Fermé

Lainoux Messages postés 30 Date d'inscription vendredi 19 août 2005 Statut Membre Dernière intervention 11 mars 2010 - 20 mars 2009 à 09:41
toto - 25 mars 2009 à 11:19

Bonjour,

C'est un peu compliqué ce que je voudrais faire .

J'ai créé un menu avec des images (car la police n'est pas connu par tous les logiciels).
Je voudrais que lorsque l'utilisateur clique dessus, l'image change, mais si l'on clique sur le 2ème élément du dessous, il faut que le premier redevienne comme au début et que le second change.

Par exemple, Accueil est de couleur blanc si l'on clique sur Présentation , Accueil redevient vert et Présentation devient blanc.

Merci

A voir également:

Changer d'image en cliquant javascript
Editeur html - Télécharger - HTML
Html download - Télécharger - HTML
/Var/www/html/index.html ✓ - Forum Linux / Unix
&Nbsp html ✓ - Forum Webmastering
[HTML] -   á et les autres - Forum HTML

5 réponses

Réponse 1 / 5

Lainoux
25 mars 2009 à 11:14

oui c'est exactement ça que je voudrais faire.

Je veux bien le script
Merci

toto
25 mars 2009 à 11:19

voila, suit bien toutes les instructions qui y sont notées. tes images doivente avoir un nom spécifique et etre dans un repertoire image...
bonne continuation et dis moi si tu as un problème pour le faire fonctionner

/**************************************************
---------------------------------------------------
ROLLOVER_DE_NAVIGATION : V 0.5 |
|
PC : IE6:ok / Mozilla-FireFox 0.8:ok |
Mozilla 5.0:ok / Opera:ok |
|
Mac (Os9): Netscape:ok / IE:ok |
Mac (OsX) : IE(OsX):ok / Safari:ok |
|
Par Eric Delapierre 20/02/2004 MAJ:23/02/2004 |
magoo@robot-droid.com |
---------------------------------------------------
Cette version a été completement retravaillée.
Elle permet de ne plus toucher au code. Elle
detecte automatiquement le nombre de liens ajoutés
et fabrique aussitôt les variables necessaires au
fonctionnement du script pour nommer les images et
les variables qui seront passées par url.

Les pages HTML qui integreront ce script
devront placer le fichier rollover_de_navigation_v0-5.js
et la fonction d'affichage affiche().
Pour commencer il suffit de placer les scripts
suivants :
1-
<script src="rollover_de_navigation_v0-5.js"
type="text/javascript"></script>

entre les balises <HEAD> </HEAD> de chaque page.

2-
<SCRIPT LANGUAGE = "JavaScript">

</SCRIPT>

Entre les balises <BODY> </BODY> de chaque page
à l'endroit ou l'on veut que le menu s'affiche.

Vous pouvez avec l'encart PARAMETRAGE UTILISATEUR
entrer le nom de chaque page HTML qui utilisera ce
script et regler la presentation des images en
ligne ou en colonne.
En outre il est possible de placer un espace entre
chaque image et de regler la taille de cet espace.

---------------------------------------------------
-Script complet, fichiers d'accompagnement et |
archives des anciennes versions telechargeables |
sur http://www.javascriptfr.com |
------- |
Si vous envisagez de vous servir de ce script ou |
de le transformer, soyez sympa, laissez cet encart |
ça me fera enooormement plaisir ;-) |
---------------------------------------------------
***************************************************/

//************************ PARAMETRAGES UTILISATEUR **************************************+
//-----------------------------------------------------------------------------------------//+
// Entrer ici le nom de chaque page HTML qui utilisera ce script en les separant d'un espace +
// et sans mettre l'extension .html +
// On peut mettre autant de liens que l'on desire :) +
//-----------------------------------------------------------------------------------------//+

tous_les_liens = "vendanges liens accueil coupdecoeur filemaker";

var images_en_ligne = "oui"; /* mettre oui ou non pour avoir un retour charriot.
si oui les images sont presentées en ligne
si non les images sont presentées en colonne */

var espace_entre_image="non"; /* mettre oui ou non pour avoir un espace entre les images.*/

var taille_de_l_espace = 1; /* mettez ici un chiffre qui reglera la taille de l'espace
entre les images*/

//-----------------------------------------------------------------------------------------//+
// Vous n'avez plus à vous occuper du reste ;-) pensez juste a lire l'encart Ajout V 0.4 //+
// situé plus bas pour la nomenclature de vos images. //+
//-----------------------------------------------------------------------------------------//+
//********************** FIN DE PARAMETRAGES UTILISATEUR ******************************+

//-------------------------------------------------------------------
/* On veut recuperer le parametre de l'url "www.mondomaine.com/index.html?lien=lien1 */

var url=location.search; //url="?lien=lien1"

var params = url.substring(1); // params = "lien=lien1" <-- sans le ?

var tab = params.split("="); /*tab est un tableau généré par split().
par ex :On obtient tab[0] = "lien" et tab[1]="lien1" */
lien=tab[1]; // on donne à la variable "lien" la valeur de tab[1]

/* search -propriété de l'objet location. Permet de connaitre les paramêtres envoyé dans une url
substring - méthode de l'objet String. Extrait une sous-chaine de la chaîne de caractères,
à partir du 1er indice indiqué.
split - méthode de l'objet String.Découpe une chaîne de caractères suivant le séparateur indiqué
en argument. Retourne un tableau contenant les sous-chaînes résultantes.*/
//--------------------------------------------------------------------

// *** Ajout V 0.4 ***
//-----------------------------------------------------------------
/* ce script automatise la nomenclature des liens et des images,
Ce qui évite des manipulations du script et des sources d'erreurs.
Il suffit de mettre dans la variable tous_les_liens (plus haut) le nom de
chaque page HTML du site, séparé par un espace.
Le script automatisera les nomenclatures qui servent par la suite.
*** IMPORTANT ***
Les images doivent IMPERATIVEMENT porter leur nom sous cette forme:
lien1B.gif et lien1R.gif --> pour l'image bleu et l'image rouge du premier lien
lien2B.gif et lien2R.gif --> pour l'image bleu et l'image rouge du second lien
lien3B.gif et lien3R.gif --> pour l'image bleu et l'image rouge du troisieme lien
etc...
Ces images doivent être stockées dans un repertoire nommé "images" */

var rep = "images/"; // on defini un repertoire pour les images
function survol(Objet,Fichier) {
if (!document.images) {} /*permet de ne rien faire, pour les navigateurs ne supportant
pas les objets images.*/
document.images[Objet].src = rep + Fichier; /*document.images est la collection des images
de la page*/
}

var tab_url = tous_les_liens.split(" "); //on recupere dans un tableau chaque chaine
//separé par un espace
function affiche()
{ // debut fonction
for (i=0;i<tab_url.length;i++)
{ // debut boucle for1

for(i = 0 ; i < tab_url.length ; i++) //on parcourt le tableau de chaine en chaine jusqu'a la fin
{ //debut boucle for2
tab_image_bleu=new Array; // declaration de nouveaux tableaux
tab_lien=new Array;
tab_image_rouge=new Array;
tab_image=new Array;
tab_image_def=new Array;
tab_image_def2=new Array;
img=new Array;

tab_image_bleu[i] ="lien"+(i+1)+"B.gif"; // On ajoute a l'element la nomenclature et le numero
tab_image_rouge[i] ="lien"+(i+1)+"R.gif"; // de l'image
tab_lien[i] =tab_url[i]+".html?lien=lien"+(i+1); // On ajoute le couple variable numeroté qui est passé ds l'url
tab_image[i] ="image"+(i+1); // on numerote l'ojet image
tab_image_def="images/"+tab_image_bleu[i]; // on numerote l'image par defaut
tab_image_def2="images/"+tab_image_rouge[i];

if (tab[1]=="lien"+(i+1)) // compare la valeur passée en url
{
/* met tous les boutons en rouge */
img =new Array(tab_image_rouge[i],tab_image_rouge[i],tab_image_def2,tab_image[i]);
}
else {
/* met tous les boutons par defaut en rollover classique*/
img =new Array(tab_image_rouge[i],tab_image_bleu[i],tab_image_def,tab_image[i]);
}
//-----------------------------------------------------------------------

// *** Ajout V 0.5 ***
//-----------------------------------------------------------------------
// gere les retours charriot ou les espaces entre chaque image.

if (images_en_ligne =="oui") // en ligne
{
// gere l'espace entre les images
if (espace_entre_image=="oui") // si espace on fait une boucle
{
retourcharriot="";
espace1=" "; // est espace en HTML
espace="";
for (j=0;j< taille_de_l_espace;j++)
{
espace=espace1+espace;
}
}
else // si pas espace on fait pas de boucle
{
espace="";
retourcharriot="";
}
}
else
{ // en colonne
// gere l'espace entre les images
if (espace_entre_image=="oui") // si espace on fait une boucle
{
espace="";
retourcharriot1="<BR>";
retourcharriot="";
for (j=-1;j<taille_de_l_espace ;j++)
{
retourcharriot=retourcharriot1+retourcharriot;
}
}
else // si pas espace on fait pas de boucle
{
retourcharriot="<BR>";
espace="";
}
}
//-----------------------------------------------------------------

document.write('<a href="'+tab_lien[i]+'"'); // affichage des boutons
document.write('onMouseOver="survol(\''+img[3]+'\',\''+img[0]+'\')"');
document.write('onMouseOut="survol(\''+img[3]+'\',\''+img[1]+'\')">');
document.write('<img name=\"'+img[3]+'\" border="0" src="'+img[2]+'"></a>');
document.write (retourcharriot);
document.write (espace);

} // fin boucle for1
} // fin fonction for2

} //fin fonction affiche
//-----------------------------------------------------------------

/* Ne pas oublier de mettre les images dans le repertoire image si on ajoute des liens :)) */

Réponse 2 / 5

Yaninho Messages postés 484 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 30 août 2010 63
20 mars 2009 à 09:42

Bonjour,

Tu veux que seul ton menu "actif" soit d'une autre couleur ?

Réponse 3 / 5

Lainoux Messages postés 30 Date d'inscription vendredi 19 août 2005 Statut Membre Dernière intervention 11 mars 2010
20 mars 2009 à 11:23

Oui juste le menu actif, avec les textes c'est simple mais les avec les images je ne sais pas trop.
C'est un menu composé d'images et non de texte.

Réponse 4 / 5

Yaninho Messages postés 484 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 30 août 2010 63
20 mars 2009 à 11:25

Je pense que tu dois déjà créer tes images en doubles (une avec le fond vert et une en blanc).

Ensuite tu devrait définir une class pour ton menu genre class="active" et dans active définir que c'est l'image blanche.

Je ne sais pas exactement comment faire, mais l'idée doit pas être loin de ça.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Lainoux Messages postés 30 Date d'inscription vendredi 19 août 2005 Statut Membre Dernière intervention 11 mars 2010
25 mars 2009 à 10:12

J'ai pu coder les images avec du javascript mais je ne peux afficher au passage de la souris une nouvelle image.
Je voudrais que lorsqu'on clique une autre image apparaisse, pouvez vous m'aider??

voici le code que j'ai écris :
<script language="javascript">
<!--begin
bouton=new Image();
bouton.src="images/site/accueilB.jpg";
--end>
</script>

<a href="#" onmouseover="bouton.src='images/site/accueilB.jpg';" onmouseout="bouton.src='images/site/accueilV.jpg';">
<img src="images/site/accueilV.jpg" border=0 name="bouton">
</a>

toto
25 mars 2009 à 10:25

salut

j'ai eu exactement le meme problème il y a quelques jour. j'ai beaucoup beaucoup cherché et j'ai trouvé un script qui permet de faire cela.

lorsque tu clic sur un lien du menu, il change de couleur, tant que tu ne clic pas sur un autre lien du menu, ça ne change pas et lorsque tu clic sur un autre lien du menu, ce 2eme lien change de couleur et le lien précédent retrouve sa couleur initiale.

c'est bien ça que tu veux?

j'avais essayé l'utilisation des class et de mettre la class a "selected" ou a "normal" en fonction du clic mais ça n'a pas aboutit. je peux te donner le script si tu veux

cordialement

Discussions similaires

&nbsp ; Quelle Fonction ?

Espace en HTML

la balise <br> ou <br />

Image cliquable dans html

Discussions similaires

Newsletters