11550 sujets

JavaScript, DOM et API Web HTML5

Demande d'aide pour exo de JavaScript !

Bonjour à tous,

Voilà j'ai quatre images, que je dois afficher les unes après les autres grâce à un rollover.

Donc j'ai pensé à onMouseOver/Out, mais pour le dernier je ne sais pas... OnClick peut-être ?

Enfin bref', si déjà je pouvais afficher la deuxième images ca sera bien, en effet, je n'y arrive pas. Je suis débutant alors pardonnez mes erreurs grotesques...


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Troisième page avec JS !</title>
    <script type="text/javascript" src="Exercice3.js"></script>

</head>
<body>
    <script type="text/javascript">exercice3();</script>
    <script type="text/javascript">etat1();</script>
    <script type="text/javascript">etat2();</script>
    <script type="text/javascript">etat3();</script>
    <script type="text/javascript">etat4();</script>

<!-- Images -->
<img src="web.jpg" alt="Sale bebette poilue pas belle, beurk !" onmouseover="etat2(b)" name="bebete" height='100px' width='100px' /></a>

</body>
</html>




function exercice3()
{
    // ****************** [langue] 
    document.bgColor = '#DEDEDE' ;
}

function etat1()
{
    //Démarre TOUJOURS à 0 /!\
    a=document.images[0].src="web.jpg" ;
	

}

function etat2()

{
    b=document.images[1].src="papillon.jpg" ;
}

function etat3()
{
    c=document.images[2].src="down.jpg" ;
}

function etat4()
{
    d=document.images[3].src="up.jpg" ;
}



Je préfèrerai que vous me mettiez sur la voix plutôt que de me donner la solution si possible. Smiley lol

Merci d'avance pour votre aide !
Modifié par SedeL (05 Jan 2011 - 00:05)
[EDIT]

Bonsoir, ne lis pas le commentaire suivant si tu ne veux pas une solution plus détaillé, je viens de voir ce que tu avais écris au sujet de "Je préfèrerai que vous me mettiez sur la voix plutôt que de me donner la solution si possible.".


Je verrais : 1. une seule fonction, 2. pense que les fonctions peuvent être accompagnés de paramètre(s) avec des valeurs d'entrés, les fonctions peuvent aussi retourner des valeurs. 3. tu peux mettre des variables entre des balises JavaScript exemple: <script type="text/javascript">var compteur=1;</script>

J'en dis pas plus !
cdlt
Modifié par Su4p (05 Jan 2011 - 00:40)
yep,
en 4 étapes :
1. Il te faudra une balise html <img/> avec un id et la source de ta première image.
2. tu créeras une variable JavaScript qui sera un "compteur" initialiser à 1, remis à 0 tous les 3 cliques.
3. tu feras une fonction JavaScript que tu appelleras changeImgSrc() et qui prendras en paramètre la variable "compteur" sur l'événement onClick="changeImgSrc()".
4. A l’intérieur de cette fonction il y aura un tableau contenant les emplacements de tes 3 photos tab[0]="img/photo1.jpg" et aussi un getElementById("idDeMonImage").src=tab[ p_compteur ];

Je pense que ça devrais être suffisent, Amuse toi bien.
Modifié par Su4p (05 Jan 2011 - 00:32)
Salut,

Merci pour ton aide. En fait il faut que j'utilise pour le premier changement, onmouseover, pour le deuxième onmouseout, et pour le troisième onClick, je n'ai donc pas bien compris l'histoire du compteur et je ne pense pas que je saurais faire ça pour l'instant malheureusement. Smiley decu

Il faut que lorsque je passe la souris sur la première image, la deux se mette en place, quand je sors que ce soit la trois, et quand je clique, la quatrième. Seulement je n'y arrive pas...

Je vais essayer de suivre tes instructions, mais ce soir, là je suis parti pour un cours de 8h de javascript... Smiley lol

En tout cas, encore merci !

Ps : je suis obligé d'utiliser document.images[]src dans mon code...
Modifié par SedeL (05 Jan 2011 - 07:36)
Bonjour SedeL,

Moi honnêtement je vois pas exactement ce que tu veux faire. Pour que ce soit plus clair, pourrais tu faire une petit schéma expliquant les états que tu es censé avoir ?

On ne comprend pas bien où se situe les images dans ta page et comment elles doivent se comporter.
Enfin moi je vois pas ^^'
PS : getElementById("idDeMonImage").src ou document.images[]src ça a le même effet c'est juste 2 manieres d'appeler le même objet et d'accéder à sa source (src).
Merci pour votre aide, le hic c'est que mon proff veut qu'on utilise document.images[]src alors si je fais autre chose je sais pas comment il va le prendre malgré qu'il soit sympa... Smiley rolleyes


En fait, je dois créer une page js, jusque là pas de problème, je dois ensuite appeler une image de 100x100 (n'importe où sur la page on s'en fiche), créer quatre fonction pour chaque etat, donc l'etat1 pour la premiere image, l'etat2 pour la deuxième et ainsi de suite. Et je dois faire apparaitre les images une par une en passant la souris sur l'image, en sortant de l'image (la 2), et enfin en cliquant (la 3).

Je sais pas si je suis très clair... Désolé. En tout cas merci pour votre aide ! Smiley biggrin
c'est bizarre de faire 3 fonctions qui font exactement la même chose, tu comprends ?
Bon, j'ai réfléchis a ton exo mais le premier problème c'est que je comprends toujours pas ce que tu dois faire exactement !
Il ne doit y avoir qu'une image ? plusieurs ? enfin c'est flou ce que tu dis.

Néanmoins je te propose un exemple qui pourrait peut être t'aider...
Voici la page html :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Troisième page avec JS !</title>
        <style type="text/css">
            div.imageConteneur {
                width: 150px;
                height: 200px;
            }
        </style>
        <script type="text/javascript" src="Exercice3.js"></script>
    </head>
    <body>
        <!-- Images -->
        <div class="imageConteneur"><img src="Image1.png" alt="image1" onMouseOver="afficheImage2();" name="image1" style=""/></div>
        <div class="imageConteneur"><img src="Image2.png" alt="image2" onMouseOver="afficheImage3();" name="image2" style="display:none"/></div>
        <div class="imageConteneur"><img src="Image3.png" alt="image3" onMouseOver="afficheImage4();" name="image3" style="display:none"/></div>
        <div class="imageConteneur"><img src="Image4.png" alt="image4" onClick="afficheImage1();" name="image4" style="display:none"/></div>
    </body>
</html>


Quelques explications :
- dans le body ne met pas de javascript comme tu l'as fait (les balises scripts)
- j'ai mis 4 images dont 3 directement caché grace au display:none que j'ai ajouté
- Ces images sont dans des div avec un style particulier afin de garder de l'espace même lorsque les images sont caché (éviter que l'image 2 une fois apparente prenne la place de l'image 1 qui vient de "disparaitre")
- dans chacune des images tu vois les fonctions javascript qui doivent être appelé lors de divers évènement, pour l'image 1 à 3 ce sont des évènements onMouseOver qui permettent d'exécuter les dites fonctions lors du passage de la souris sur l'image en question et l'image 4 a un évènement onClick.

J'ai déjà mis les noms des fonctions qui sont relativement explicite et qui corresponde à ce que tu appel état 1, état 2 ... etc

Je n'en dirais pas plus pour le moment afin de te laisser chercher. Tu n'as plus qu'a coder les fonctions écrite plus haut dans ton fichier Exercice3.js ... Smiley cligne

Pour ce que dis Su4p, c'est sur que c'est évident pour quelqu'un habituer a faire du web et du script que l'on peut regrouper ces 3-4 fonctions mais je pense que c'est un exercice pour débutant et qu'il est nécessaire qu'il comprenne bien ce qu'il doit faire avant d'aller plus loin.
Merci pour ton aide,

Effectivement je suis débutant, normalement j'arrive assez vite à terminer les exercices en js mais là je dois avouer que je galère complètement... et pourtant il a l'air tout bête cet exercice...Enfin bref

Je vais essayer ce que tu m'as dit, je vais chercher de mon côté et je vous tiens au courant.

En tout cas merci du fond du coeur pour votre aide ! Smiley biggrin



EDIT : en essayant sans relache, j'ai réussi à faire passer la première image à la deuxième mais pas à la troisième. J'ai demandé à mon prof il m'a dit que pour changer les images je devais utiliser, onmouseover - cliqueappuyé et cliquerelaché (je ne connais pas les commandes pour ces deux derniers).

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
        <title>Troisième page avec JS !</title> 
        <style type="text/css"> 
        </style> 
        <script type="text/javascript" src="Exercice3.js"></script> 
    </head> 
    <body> 
        <!-- Images --> 
            <img src="web.jpg" alt="image1" onMouseOver="etat2()"  name="image1" width="100" height="100"/>

    </body> 
</html>



 
function etat1() { }

function etat2() {
document.images[0].src="papillon.jpg"	
}

function etat3() {
document.images[1].src="down.jpg"	
}

function etat4() {
document.images[2].src="up.jpg"	
}


Avec ce code là j'arrive à passer de la première à la deuxième image donc, mais quand je fais un test avec un onmouseout, cela ne fonctionne pas... Alors j'imagine qu'avec les deux cités au dessus non plus.

Merci pour votre aide en tout cas.
Modifié par SedeL (06 Jan 2011 - 23:33)
Exercice n°3 : Faire un rollover 4 états
Image à l’état normal Fichier web.jpg
Image survolée à la souris Fichier papillon.jpg
Image bouton appuyé Fichier down.jpg
Image bouton relaché Fichier up.jpg

Indications

* On dimensionnera l’image à 100px en largeur et hauteur.
* L’image par défaut est web.jpg.
* On créera une fonction par type d’état.
* On utilisera la syntaxe suivante pour changer l’image document.images[0].src="leNomDeLImage";


Voilà le sujet les images en moins mais ca c'est pas important. Merci pour le site, direction favoris Smiley lol
ha ba voila! Avec un énoncé clair je comprend mieux Smiley smile

Voici ma solution, après à toi de mettre ça comme toi tu le voudrais :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Troisième page avec JS !</title>
    <script type="text/javascript" src="Exercice3.js"></script>
</head>
<body>
<!-- Images : Etat 1 -->
<img src="image1.png" alt="imagessssS!" onmouseover="javascript:afficheImage2();" onmousedown="javascript:afficheImage3();" onmouseup="javascript:afficheImage4();" name="images !" height='100px' width='100px' /></a>
</body>
</html>


Avec la source javascript :
function afficheImage2() {
        //Etat 2
	document.images[0].src = "image2.png";
}

function afficheImage3() {
        //Etat 3
	document.images[0].src = "image3.png";
}

function afficheImage4() {
        //Etat 4
	document.images[0].src = "image4.png";
}


Si tu veux des explications ...
J'ai juste utilisé les évènements qui vont bien (onmouseover, onmousedown et onmouseup) et changé la source de l'image affiché.

KalNex
C'est à peu près ce que j'avais fait mais en mieux !

Je te remercie en tout cas, je vais tester tout ça ce soir dès que je serai rentré ! Smiley smile

Merci encore !
Sujet clos
Aller à