Date de publication : Dim. 07 10 18
Objet : Présentation du site
La directrice du primaire informe les parents
Malheureusement, cet exemple ne fonctionne pas toujours avec le navigateur Opera et pour une raison bien étrange : ce dernier ne prend pas encore correctement en charge les transitions de la propriété background-position... Gageons que cette erreur soit corrigée lors de la prochaine mise à jour du navigateur ! En attendant, il est toujours possible de ruser en changeant la façon de penser le système : on peut par exemple ajouter une balise <div> contenant notre fond, la placer en position « absolue » et la déplacer en jouant avec ses propriétés top et left.
Notre JavaScript modifie donc la position de l'arrière-plan selon les flèches survolées. Grâce à notre code CSS, le changement se fera progressivement, donnant ainsi l'illusion de
Malheureusement, cet exemple ne fonctionne pas toujours avec le navigateur Opera et pour une raison bien étrange : ce dernier ne prend pas encore correctement en charge les transitions de la propriété background-position... Gageons que cette erreur soit corrigée lors de la prochaine mise à jour du navigateur ! En attendant, il est toujours possible de ruser en changeant la façon de penser le système : on peut par exemple ajouter une balise <div> contenant notre fond, la placer en position « absolue » et la déplacer en jouant avec ses propriétés top et left.
Notre JavaScript modifie donc la position de l'arrière-plan selon les flèches survolées. Grâce à notre code CSS, le changement se fera progressivement, donnant ainsi l'illusion de
Les flèches pour le tableau de bord, de ma conception également
Et le fond marin (en lien parce que trop grand !).
Venant de Linternaute.com, mais vous l'aviez deviné
Voici donc ce que je vous propose de faire. Notre page contiendra deux <div>. La première aura pour fond notre océan et contiendra une image : le hublot.
La seconde <div> en contiendra huit autres : une pour chaque flèche de notre tableau de bord.
Ce dernier se comportera de cette façon : quand la souris passera sur une flèche, la vue que nous aurons de l'océan à travers le hublot se déplacera dans la direction indiquée.
Ça peut vous paraître flou pour l'instant, mais je vous assure que c'est très simple.
Les codes HTML et CSS
Vous ne devriez pas avoir de mal à comprendre le code HTML de ce mini projet :
<h1>Passez la souris sur les flèches !</h1>
</body>
</html>
Tous les éléments de notre page sont mis en place, il ne nous reste qu'à styliser tout ça.
Nous ne nous occuperons du code JavaScript qu'à la fin, une fois que tout sera bien fixé dans notre code CSS.
Commençons donc par traiter ce qu'il y a de plus facile : je propose déjà de colorer le fond de notre page en gris, parce que le blanc est un peu agressif. Centrons également l'instruction « Passez la souris sur les flèches ! » pour faire plus propre.
Bon, passons aux choses sérieuses avec l'océan à proprement parler.
Nous devons le mettre aux mêmes dimensions que l'image du hublot. Pour que ce soit plus joli, nous pouvons également le centrer et lui ajouter une petite bordure. N'oublions également pas de lui appliquer notre image de fond que nous allons d'ailleurs centrer.
Rappelons-nous le but de l'exercice tout de même : utiliser les transitions. Pour simuler l'exploration des fonds marins, nous modifierons la position de l'arrière-plan, tout simplement !
Malheureusement, cet exemple ne fonctionne pas toujours avec le navigateur Opera et pour une raison bien étrange : ce dernier ne prend pas encore correctement en charge les transitions de la propriété background-position... Gageons que cette erreur soit corrigée lors de la prochaine mise à jour du navigateur ! En attendant, il est toujours possible de ruser en changeant la façon de penser le système : on peut par exemple ajouter une balise <div> contenant notre fond, la placer en position « absolue » et la déplacer en jouant avec ses propriétés top et left.
Notre JavaScript modifie donc la position de l'arrière-plan selon les flèches survolées. Grâce à notre code CSS, le changement se fera progressivement, donnant ainsi l'illusion de
Malheureusement, cet exemple ne fonctionne pas toujours avec le navigateur Opera et pour une raison bien étrange : ce dernier ne prend pas encore correctement en charge les transitions de la propriété background-position... Gageons que cette erreur soit corrigée lors de la prochaine mise à jour du navigateur ! En attendant, il est toujours possible de ruser en changeant la façon de penser le système : on peut par exemple ajouter une balise <div> contenant notre fond, la placer en position « absolue » et la déplacer en jouant avec ses propriétés top et left.
Notre JavaScript modifie donc la position de l'arrière-plan selon les flèches survolées. Grâce à notre code CSS, le changement se fera progressivement, donnant ainsi l'illusion de
Les flèches pour le tableau de bord, de ma conception également
Et le fond marin (en lien parce que trop grand !).
Venant de Linternaute.com, mais vous l'aviez deviné
Voici donc ce que je vous propose de faire. Notre page contiendra deux <div>. La première aura pour fond notre océan et contiendra une image : le hublot.
La seconde <div> en contiendra huit autres : une pour chaque flèche de notre tableau de bord.
Ce dernier se comportera de cette façon : quand la souris passera sur une flèche, la vue que nous aurons de l'océan à travers le hublot se déplacera dans la direction indiquée.
Ça peut vous paraître flou pour l'instant, mais je vous assure que c'est très simple.
Les codes HTML et CSS
Vous ne devriez pas avoir de mal à comprendre le code HTML de ce mini projet :
<h1>Passez la souris sur les flèches !</h1>
</body>
</html>
Tous les éléments de notre page sont mis en place, il ne nous reste qu'à styliser tout ça.
Nous ne nous occuperons du code JavaScript qu'à la fin, une fois que tout sera bien fixé dans notre code CSS.
Commençons donc par traiter ce qu'il y a de plus facile : je propose déjà de colorer le fond de notre page en gris, parce que le blanc est un peu agressif. Centrons également l'instruction « Passez la souris sur les flèches ! » pour faire plus propre.
Bon, passons aux choses sérieuses avec l'océan à proprement parler.
Nous devons le mettre aux mêmes dimensions que l'image du hublot. Pour que ce soit plus joli, nous pouvons également le centrer et lui ajouter une petite bordure. N'oublions également pas de lui appliquer notre image de fond que nous allons d'ailleurs centrer.
Rappelons-nous le but de l'exercice tout de même : utiliser les transitions. Pour simuler l'exploration des fonds marins, nous modifierons la position de l'arrière-plan, tout simplement !