Javascript
kat'
-
Bobinours Messages postés 2903 Statut Membre -
Bobinours Messages postés 2903 Statut Membre -
Je ne connais pas le javascript
J'aimerais avoir un srcipt permettant de realiser la chose suivante :
Sur une page html, j'ai une liste de choix contenant les noms de plusieurs personnes et un emplacement pour une photo.
Lorsque l'utilisateur selectionne un nom dans cette liste, j'aimerais que sa photo apparaisse dans l'emplacement photo.
Est ce possible
Merci beaucoup
Kat'
J'aimerais avoir un srcipt permettant de realiser la chose suivante :
Sur une page html, j'ai une liste de choix contenant les noms de plusieurs personnes et un emplacement pour une photo.
Lorsque l'utilisateur selectionne un nom dans cette liste, j'aimerais que sa photo apparaisse dans l'emplacement photo.
Est ce possible
Merci beaucoup
Kat'
3 réponses
salut Kat' !
je pense que pour ce que tu veux faire, tu n'as pas besoin de JavaScript, le DHTML suffit
(géré à partir de IE4 et Netscape version je ne sais plus ).
voilà le ptit bout de code que tu peux insérer entre les balises body de ta page HTML :
***************************************************
<a href="#" onclick="window.document.maphoto.src='photo1.jpg'">titi</a>
<a href="#" onclick="window.document.maphoto.src='photo2.jpg'">toto</a>
<a href="#" onclick="window.document.maphoto.src='photo3.jpg'">tata</a>
<img name="maphoto" src="image_d_accueil.gif" width="50" height="50"></img>
******************************************************
explication du code et conseils :
1) dans mon exemple, je suppose que les photos sont dans
le meme repertoire que la page HTML, si ce n'est pas le cas, mets
le chemin où se trouvent les photos ex:
<a href="#" onclick="window.document.maphoto.src='photo1.jpg'">titi</a>
devient
<a href="#" onclick="window.document.maphoto.src='monrepertoire/photo1.jpg'">titi</a>
2) dans la balise <image> j'ai mis l'attribut name="maphoto" qui se retrouve plus
haut dans le code : onclick="window.document.maphoto.src ..."
3) toujours dans la balise <image>, j'ai figé la
taille par les attributs width et height afin
que le cadre de la photo ne deforme pas ta page html.
change ces attributs comme il te conviendra.
4) y a plein de petites variantes pour rendre
la présentation plus conviviale (couleur des liens,
utilisation des balises <table> ...)
ce ptit code permet de comprendre le mécanisme des onclick .
je te laisse le soin de decorer ton site comme bon te semble ;)
5) si tu as des problemes à ce sujet, n'hesite pas, si je peux t'aider c de bon coeur.
ps: je l'ai testé sous IE5 et Netscape communicator 4.7 :o)
Frank
je pense que pour ce que tu veux faire, tu n'as pas besoin de JavaScript, le DHTML suffit
(géré à partir de IE4 et Netscape version je ne sais plus ).
voilà le ptit bout de code que tu peux insérer entre les balises body de ta page HTML :
***************************************************
<a href="#" onclick="window.document.maphoto.src='photo1.jpg'">titi</a>
<a href="#" onclick="window.document.maphoto.src='photo2.jpg'">toto</a>
<a href="#" onclick="window.document.maphoto.src='photo3.jpg'">tata</a>
<img name="maphoto" src="image_d_accueil.gif" width="50" height="50"></img>
******************************************************
explication du code et conseils :
1) dans mon exemple, je suppose que les photos sont dans
le meme repertoire que la page HTML, si ce n'est pas le cas, mets
le chemin où se trouvent les photos ex:
<a href="#" onclick="window.document.maphoto.src='photo1.jpg'">titi</a>
devient
<a href="#" onclick="window.document.maphoto.src='monrepertoire/photo1.jpg'">titi</a>
2) dans la balise <image> j'ai mis l'attribut name="maphoto" qui se retrouve plus
haut dans le code : onclick="window.document.maphoto.src ..."
3) toujours dans la balise <image>, j'ai figé la
taille par les attributs width et height afin
que le cadre de la photo ne deforme pas ta page html.
change ces attributs comme il te conviendra.
4) y a plein de petites variantes pour rendre
la présentation plus conviviale (couleur des liens,
utilisation des balises <table> ...)
ce ptit code permet de comprendre le mécanisme des onclick .
je te laisse le soin de decorer ton site comme bon te semble ;)
5) si tu as des problemes à ce sujet, n'hesite pas, si je peux t'aider c de bon coeur.
ps: je l'ai testé sous IE5 et Netscape communicator 4.7 :o)
Frank
Mais en fait, cette methode fonctione effectivement, mais ce n'est pas tout a fait ce que je veux.
Dans votre solution, ce sont des liens de plusieurs noms qui modifient la photo.
Moi, j'ai une liste deroulante de noms, et j'aimerais que le fait de selectionner un nom dans cette liste affiche la photo adequate, et la, et bee ca ne marche plus ...
Merci vous 2
Dans votre solution, ce sont des liens de plusieurs noms qui modifient la photo.
Moi, j'ai une liste deroulante de noms, et j'aimerais que le fait de selectionner un nom dans cette liste affiche la photo adequate, et la, et bee ca ne marche plus ...
Merci vous 2
c'est ce que je me suis dit après coup aussi en
relisant ta question :p
donc, ce que tu veux c'est un menu déroulant...
en effet, dans ce cas c'est un
peu plus complexe et ... c'est possible :o)
voici ce que tu peux faire :
entre les balises <head> tu mets ce script
*******************************************
<script>
<!--
function MenuDeroulant(objet)
{
with (objet)
{
// recupère l'objet.value sélectionné du menu déroulant dans la variable laphoto
laphoto = options[selectedIndex].value;
// on change la photo par l' élement choisi dans le menu deroulant
window.document.maphoto.src = laphoto;
}
}
-->
</script>
******************************************
entre les balises <body> tu mets ceci
*****************************************
<img name="maphoto" src="photopardefaut.gif" width="100" height="100"></img>
<form>
<select onChange="MenuDeroulant(this)">
<option value="photopardefaut.gif">choisir la photo</option>
<option value="photo1.gif">Kat</option>
<option value="photo2.gif">Frank</option>
<option value="photo3.gif">Bobinours</option>
</select>
</form>
****************************************
je l'ai testé sous IE4 et Netscape 4.7
j'ai commenté le script mais si il y a des choses que tu ne comprends pas,
t'hésite pas ;)
au fait, pourrais-tu me montrer ton site quand tu l'auras fait ?
c'est que je suis curieux :p
voilà, c'est tout, tiens moi au courant, c'est quasiment la première fois que
j'aide quelqu'un sur un forum (whouaaa :)
bon courage ;)
Frank
relisant ta question :p
donc, ce que tu veux c'est un menu déroulant...
en effet, dans ce cas c'est un
peu plus complexe et ... c'est possible :o)
voici ce que tu peux faire :
entre les balises <head> tu mets ce script
*******************************************
<script>
<!--
function MenuDeroulant(objet)
{
with (objet)
{
// recupère l'objet.value sélectionné du menu déroulant dans la variable laphoto
laphoto = options[selectedIndex].value;
// on change la photo par l' élement choisi dans le menu deroulant
window.document.maphoto.src = laphoto;
}
}
-->
</script>
******************************************
entre les balises <body> tu mets ceci
*****************************************
<img name="maphoto" src="photopardefaut.gif" width="100" height="100"></img>
<form>
<select onChange="MenuDeroulant(this)">
<option value="photopardefaut.gif">choisir la photo</option>
<option value="photo1.gif">Kat</option>
<option value="photo2.gif">Frank</option>
<option value="photo3.gif">Bobinours</option>
</select>
</form>
****************************************
je l'ai testé sous IE4 et Netscape 4.7
j'ai commenté le script mais si il y a des choses que tu ne comprends pas,
t'hésite pas ;)
au fait, pourrais-tu me montrer ton site quand tu l'auras fait ?
c'est que je suis curieux :p
voilà, c'est tout, tiens moi au courant, c'est quasiment la première fois que
j'aide quelqu'un sur un forum (whouaaa :)
bon courage ;)
Frank
C'est effectivement du DHTML MAIS avec du JAVASCRIPT...
En effet, l'acces a la variable "window.document.maphoto.src" est en Javascript...
Kat' n'avait pas tout à fait tord :o)
-= Bobinours =-
Frank
ps : ce forum a l'air bien reactif par rapport à ceux que je connaissais, j'aime bien, j'y ferais un tour plus souvent :)
-= Bobinours =-