Problème visionneuse d'images html, javascript, dreamweaver
Résolu/Fermé
tipau35
Messages postés
290
Date d'inscription
vendredi 17 avril 2009
Statut
Membre
Dernière intervention
9 décembre 2023
-
Modifié par tipau35 le 27/04/2013 à 14:51
tipau35 Messages postés 290 Date d'inscription vendredi 17 avril 2009 Statut Membre Dernière intervention 9 décembre 2023 - 28 avril 2013 à 14:35
tipau35 Messages postés 290 Date d'inscription vendredi 17 avril 2009 Statut Membre Dernière intervention 9 décembre 2023 - 28 avril 2013 à 14:35
A voir également:
- Problème visionneuse d'images html, javascript, dreamweaver
- Visionneuse powerpoint - Télécharger - Présentation
- Telecharger javascript - Télécharger - Langages
- Editeur html - Télécharger - HTML
- Visionneuse photo windows 7 - Télécharger - Visionnage & Diaporama
- Visionneuse excel - Télécharger - Tableur
1 réponse
Salut,
>Je suis ultra novice en html etc...
euh etc c'et javascript et Dreamweaver?
ça n'a rien à voir mais ça peut être complémentaire.
HTML langage de balisage indispensable, sert à faire la mise en page et l'affichage c'est la base de la page web(aussi appellée souvent page html, l'extension du fichier sauf langage serveur mais c'est autre chose-par exemple page.php est une page HTML écrite en php ou mélant les 2).
Javascript: Langage de programmation permettant pas mal de chose et souvent utilisé pour la programmation événementielle; cad: il se passe quelque chose lors d'une action ou d'un événement(un clic, une heure précise, le chargement de la page...) Dans votre cas c'est tout à fait adapté puisque vous voulez lorsque appuyer sur un bouton(qui est une image mais le terme bouton est plus générique) afficher en grand la miniature.
Dreamweaver: Si vous utilisez vous même HTML et javascript laissez tombez Dreamweaver car vous ferez mieux que lui (DW) et il ne vous servira à rien , DW est un WYSIWYG ce qui signifie qu'il sert à écrire de façon automatique le html et certaines autres fonctionnalités(css ou la programmation comme javascript et PHP) mais il le fait de telle façon que c'est confus, pas aux normes, risques d'erreurs et impossible à reprendre par l'intelligence/compréhension humaine. Vous pouvez passer à Notepad++ qui est totalement gratuit si vous voulez un éditeur de texte complet pour la programmation(quoique celui de DW est pas si mal aussi mais bon vu la lourdeur du programme).
Décomposons un peu votre programme:
Tout d'abord la fonction(vous la mettez à la fin mais c'est la partie principale du programme):
<script><!-- attention indiqué bien de quel script il s'agit; <script type='javascript'> c'est déjà mieux.
function afficherphoto(nomphoto)
{
document.getElementById("grandephoto").src=nomphoto;
}
</script>
Ce qui signifie qu'il u=y a une fonction nommée afficherphoto(nomphoto)
Le mot entre parenthèse est une variable ou plutôt un argument, ce qui revient au même l'argument est une variable interne à la fonction.
Ce contenu peut et doit changer suivant l'utilisation que vous voulez de la fonction(qui fera toujours la même chose).
Voyons le contenu (entre accolade) de cette fonction(bout de programme):
document.getElementById("grandephoto").src=nomphoto;
Est une notation objet typique(je détalerais pas ce que signifiie objet mais son sens):
pour un le document(document=la page en cours) vous prenez l'élément identifié par grandephoto (getElementById('grandephoto') et regarde son attribut src(pour source en anglais) et lui attribuez une nouvelle valeur(symbole == qui est nomphoto(donc l'argument que vous indiquez).
Maintenant que nous savons ce que fait la fonction
Voyons comment elle est utilisée:
<img src="Images Index/stage1petit.gif" name="vignette1" width="50" height="50" id="vignette1" onclick="afficherphoto('Images Index/stage1grand.gif')"/>
C'est le onclick=... qui est important.
Cela veut dire que lors du clic la fonction afficherphoto('ImagesIndex/stage1grand.gif') est utilisée(le terme exact est appellée plutôt qu'utiliser).
Donc si vous faites afficherphoto('tartempion.jpg') cela veut dire que l'image tartempion.jpg va s'afficher dans l'élément désigné par l'id grandephoto.
Si vous voulez afficher ailleurs il y a plusieurs solutions:
la plus évidente et simple(mais pas la plus pratique) est de créer une nouvelle fonction qui permet d'afficher dans le cadre grandephoto2:
par exemple:
<script type='text/javascript' langage='javascript'>
function afficherphoto(nomphoto)
{
document.getElementById("grandephoto").src=nomphoto;
}
/* une nouvelle fonction identique mais pas complétement*/
function afficherphoto2(nomphoto)
{
document.getElementById("grandephoto2").src=nomphoto;
}
</script>
afficherphoto et afficherphoto2 sont identiques sauf que l'une change l'image du cadre grandephoto et l'autre l'image du cadre grandephoto2
Vous utiolisez dans le onclick l'un ou l'autre suivant où vous voulez afficher l'image(grandephoto ou grandephoto2)
Mais si j'en ai 100 des affichages d'images je vais faire 100 fonctions où le nom et le lieu d'affichage change? Avec cette méthode oui mais l'informatique c'est fait pour se simplifier la vie et la programmation c'est de l'automatisation(ou du recyclage si vous préférez):
Une autre solution est d'utiliser le nom de l'élément ciblé par getElementById en argument de fonction:
<script type='text/javascript' langage='javascript'>
function afficherphoto(nomphoto,zoneaffichage)
{
document.getElementById(zoneaffichage).src=nomphoto;
}
Repérez comme l'ajout du paramètre avec l'argument zoneaffichage va nous simplifier la tâche grandement:
Pour l'attribut onclick vous aurez donc:
onclick="afficherphoto('Images Index/stage1grand.gif',granphoto2'') qui affichera 'image stage1grand.gif dans le div identifié(attribut id) par
<div id ='grandephoto2'>
et ainsi de suite; pour la 100ème image du 100ème cadre vous aurez donc:
onclick="afficherphoto('Images Index/photo100.gif',granphoto100'')
pour le div qui s'écrit ainsi:
<div id='grandephoto100'>
<!--pas oublier fermer la balise bien sûr -->
</div>
Des explications plus complètes ici:
http://www.commentcamarche.net/contents/javascript/jsfonc.php3
Ou alors allez voir toujavascript.com mais vous devez impérativement maîtriser la mise en page HTML avant tout et les bases de la programmation(que vous n'aurez pas avec HTML puisqu'il s'agit des même fonctionnalités que d'un logiciel comme word mais en écrivant vous même la mise en page par l'utilisation des balises(M dans HTML pour Mark up en anglais, littéralement marquage).
Ces bases sont:
variable, opérateurs logique, comparaisons/test conditionnels, chemin d'accès, encapsulage objet...
ça peut faire peur les termes mais c'est (très) logique et assez simple dans le principe(autant que l'arithmétique de base addition, soustraction, multiplication, division qui vous seront aussi utiles).
>Je suis ultra novice en html etc...
euh etc c'et javascript et Dreamweaver?
ça n'a rien à voir mais ça peut être complémentaire.
HTML langage de balisage indispensable, sert à faire la mise en page et l'affichage c'est la base de la page web(aussi appellée souvent page html, l'extension du fichier sauf langage serveur mais c'est autre chose-par exemple page.php est une page HTML écrite en php ou mélant les 2).
Javascript: Langage de programmation permettant pas mal de chose et souvent utilisé pour la programmation événementielle; cad: il se passe quelque chose lors d'une action ou d'un événement(un clic, une heure précise, le chargement de la page...) Dans votre cas c'est tout à fait adapté puisque vous voulez lorsque appuyer sur un bouton(qui est une image mais le terme bouton est plus générique) afficher en grand la miniature.
Dreamweaver: Si vous utilisez vous même HTML et javascript laissez tombez Dreamweaver car vous ferez mieux que lui (DW) et il ne vous servira à rien , DW est un WYSIWYG ce qui signifie qu'il sert à écrire de façon automatique le html et certaines autres fonctionnalités(css ou la programmation comme javascript et PHP) mais il le fait de telle façon que c'est confus, pas aux normes, risques d'erreurs et impossible à reprendre par l'intelligence/compréhension humaine. Vous pouvez passer à Notepad++ qui est totalement gratuit si vous voulez un éditeur de texte complet pour la programmation(quoique celui de DW est pas si mal aussi mais bon vu la lourdeur du programme).
Décomposons un peu votre programme:
Tout d'abord la fonction(vous la mettez à la fin mais c'est la partie principale du programme):
<script><!-- attention indiqué bien de quel script il s'agit; <script type='javascript'> c'est déjà mieux.
function afficherphoto(nomphoto)
{
document.getElementById("grandephoto").src=nomphoto;
}
</script>
Ce qui signifie qu'il u=y a une fonction nommée afficherphoto(nomphoto)
Le mot entre parenthèse est une variable ou plutôt un argument, ce qui revient au même l'argument est une variable interne à la fonction.
Ce contenu peut et doit changer suivant l'utilisation que vous voulez de la fonction(qui fera toujours la même chose).
Voyons le contenu (entre accolade) de cette fonction(bout de programme):
document.getElementById("grandephoto").src=nomphoto;
Est une notation objet typique(je détalerais pas ce que signifiie objet mais son sens):
pour un le document(document=la page en cours) vous prenez l'élément identifié par grandephoto (getElementById('grandephoto') et regarde son attribut src(pour source en anglais) et lui attribuez une nouvelle valeur(symbole == qui est nomphoto(donc l'argument que vous indiquez).
Maintenant que nous savons ce que fait la fonction
Voyons comment elle est utilisée:
<img src="Images Index/stage1petit.gif" name="vignette1" width="50" height="50" id="vignette1" onclick="afficherphoto('Images Index/stage1grand.gif')"/>
C'est le onclick=... qui est important.
Cela veut dire que lors du clic la fonction afficherphoto('ImagesIndex/stage1grand.gif') est utilisée(le terme exact est appellée plutôt qu'utiliser).
Donc si vous faites afficherphoto('tartempion.jpg') cela veut dire que l'image tartempion.jpg va s'afficher dans l'élément désigné par l'id grandephoto.
Si vous voulez afficher ailleurs il y a plusieurs solutions:
la plus évidente et simple(mais pas la plus pratique) est de créer une nouvelle fonction qui permet d'afficher dans le cadre grandephoto2:
par exemple:
<script type='text/javascript' langage='javascript'>
function afficherphoto(nomphoto)
{
document.getElementById("grandephoto").src=nomphoto;
}
/* une nouvelle fonction identique mais pas complétement*/
function afficherphoto2(nomphoto)
{
document.getElementById("grandephoto2").src=nomphoto;
}
</script>
afficherphoto et afficherphoto2 sont identiques sauf que l'une change l'image du cadre grandephoto et l'autre l'image du cadre grandephoto2
Vous utiolisez dans le onclick l'un ou l'autre suivant où vous voulez afficher l'image(grandephoto ou grandephoto2)
Mais si j'en ai 100 des affichages d'images je vais faire 100 fonctions où le nom et le lieu d'affichage change? Avec cette méthode oui mais l'informatique c'est fait pour se simplifier la vie et la programmation c'est de l'automatisation(ou du recyclage si vous préférez):
Une autre solution est d'utiliser le nom de l'élément ciblé par getElementById en argument de fonction:
<script type='text/javascript' langage='javascript'>
function afficherphoto(nomphoto,zoneaffichage)
{
document.getElementById(zoneaffichage).src=nomphoto;
}
Repérez comme l'ajout du paramètre avec l'argument zoneaffichage va nous simplifier la tâche grandement:
Pour l'attribut onclick vous aurez donc:
onclick="afficherphoto('Images Index/stage1grand.gif',granphoto2'') qui affichera 'image stage1grand.gif dans le div identifié(attribut id) par
<div id ='grandephoto2'>
et ainsi de suite; pour la 100ème image du 100ème cadre vous aurez donc:
onclick="afficherphoto('Images Index/photo100.gif',granphoto100'')
pour le div qui s'écrit ainsi:
<div id='grandephoto100'>
<!--pas oublier fermer la balise bien sûr -->
</div>
Des explications plus complètes ici:
http://www.commentcamarche.net/contents/javascript/jsfonc.php3
Ou alors allez voir toujavascript.com mais vous devez impérativement maîtriser la mise en page HTML avant tout et les bases de la programmation(que vous n'aurez pas avec HTML puisqu'il s'agit des même fonctionnalités que d'un logiciel comme word mais en écrivant vous même la mise en page par l'utilisation des balises(M dans HTML pour Mark up en anglais, littéralement marquage).
Ces bases sont:
variable, opérateurs logique, comparaisons/test conditionnels, chemin d'accès, encapsulage objet...
ça peut faire peur les termes mais c'est (très) logique et assez simple dans le principe(autant que l'arithmétique de base addition, soustraction, multiplication, division qui vous seront aussi utiles).
Modifié par tipau35 le 27/04/2013 à 22:14
j'avais ça :
<head>
<script>
function afficherphoto(nomphoto)
{
document.getElementById("grandephoto").src=nomphoto;
}
</script>
</head>
</div>
<div id="projets">
<div id="projet1">
<div id="grandephoto1">
<img src="Images Index/nomade1grand.gif" name="grandephoto" width="500" height="353" id="grandephoto" />
</div>
<div id="petitephoto1">
<img src="Images Index/nomade1petit.gif" name="vignette1" width="50" height="50" id="vignette1" onclick="afficherphoto('Images Index/nomade1grand.gif')"/>
<img src="Images Index/nomade2petit.gif" name="vignette2" width="50" height="50" id="vignette2" onclick="afficherphoto('Images Index/nomade2grand.gif')"/>
<img src="Images Index/nomade3petit.gif" name="vignette3" width="50" height="50" id="vignette3" onclick="afficherphoto('Images Index/nomade3grand.gif')"/>
</div>
</div>
<div id="projet2">
<div id="grandephoto2">
<img src="Images Index/stage1grand.gif" name="grandephoto" width="500" height="353" id="grandephoto" />
</div>
<div id="petitephoto2">
<img src="Images Index/stage1petit.gif" name="vignette1" width="50" height="50" id="vignette1" onclick="afficherphoto('Images Index/stage1grand.gif')"/>
<img src="Images Index/stage2petit.gif" name="vignette2" width="50" height="50" id="vignette2" onclick="afficherphoto('Images Index/stage2grand.gif')"/>
<img src="Images Index/stage3petit.gif" name="vignette3" width="50" height="50" id="vignette3" onclick="afficherphoto('Images Index/stage3grand.gif')"/>
</div>
</div>
...
Si j'ajoute une seconde fonction pour la seconde visionneuse j'ai :
<head>
<script type='text/javascript' langage='javascript'>
function afficherphoto(nomphoto)
{
document.getElementById("grandephoto").src=nomphoto;
}
function afficherphoto2(nomphoto)
{
document.getElementById("grandephoto2").src=nomphoto;
}
</script>
</head>
</div>
<div id="projets">
<div id="projet1">
<div id="grandephoto1">
<img src="Images Index/nomade1grand.gif" name="grandephoto" width="500" height="353" id="grandephoto" />
</div>
<div id="petitephoto1">
<img src="Images Index/nomade1petit.gif" name="vignette1" width="50" height="50" id="vignette1" onclick="afficherphoto('Images Index/nomade1grand.gif')"/>
<img src="Images Index/nomade2petit.gif" name="vignette2" width="50" height="50" id="vignette2" onclick="afficherphoto('Images Index/nomade2grand.gif')"/>
<img src="Images Index/nomade3petit.gif" name="vignette3" width="50" height="50" id="vignette3" onclick="afficherphoto('Images Index/nomade3grand.gif')"/>
</div>
</div>
<div id="projet2">
<div id="grandephoto2">
<img src="Images Index/stage1grand.gif" name="grandephoto2" width="500" height="353" id="grandephoto2" />
</div>
<div id="petitephoto2">
<img src="Images Index/stage1petit.gif" name="vignette1" width="50" height="50" id="vignette1" onclick="afficherphoto('Images Index/stage1grand.gif')"/>
<img src="Images Index/stage2petit.gif" name="vignette2" width="50" height="50" id="vignette2" onclick="afficherphoto('Images Index/stage2grand.gif')"/>
<img src="Images Index/stage3petit.gif" name="vignette3" width="50" height="50" id="vignette3" onclick="afficherphoto('Images Index/stage3grand.gif')"/>
</div>
</div>
De cette façon, j'ai changé l'id et le name dans projet2 mais cela ne change rien, cela me crée un décalage de ma grandephoto2 et les vignettes après clic font toujours afficher la grande photo dans la 1ère visionneuse...
Pourquoi ?
28 avril 2013 à 14:35