Page 1 sur 2
Zoom en survolant une image de page Web et diaporama
Publié : 21 juil. 2005 18:43
par Tom
Bonjour,
Je vous fait partager une rencontre sympa sur la toile :
- Comment zoomer une image dans une page html
- des boutons animés au passage de la souris
Des exercices courts et assez simple à mettre en oeuvre dans une feuille de style CSS.
http://mammouthland.free.fr/cours/css/cours8.php
Pour voir quelques exemples j'en ai placés trois dans la deuxième partie de ma page d'accueil, et ils fonctionnent aussi bien avec IE qu'avec Mozilla :
http://jptom.free.fr/
Visionneuse d'images par survol de la souris
Publié : 24 juil. 2005 22:42
par Tom
Encore un petit bijou d'animation de page web.
Un petit javascript à insérer dans la page html et en passant la souris au dessus d'une image, la visionneuse se met en marche.
Elle s'arrête dès que l'on retire la souris de l'image.
Consultation du script complet :
http://www.jejavascript.net/rollov_3bis.php
Consultation de deux exemples :
http://jptom.free.fr/GaleriePublique/NavPub.html
Le code a été simplifié et adapté à la possibilité d'intégrer plusieurs visionneuses dans la même page.
Pour voir le code :
- sous IE : menu Affichage/Source
- sous Mozilla : menu Affichage/Code source de la page
Publié : 25 juil. 2005 6:00
par John Lee
Pour le zoom, si tu parles des trois photos du bas (les deux bebes et la page) ca ne marche pas sous firefox (mais je crois que c'est un pur rejet firefox, j'avais fait un essais une foi et je ne l'avais pas garder a cause de ce probleme)
Pour la petite visionneuse, evidement, pas de probleme sous firefox
Publié : 25 juil. 2005 9:20
par Tom
Bonjour John,
Merci pour le test.
J'ai reformulé mon message car ce ne sont pas les dernières du bas, mais une carte avec Blair, les roses trémières et la carte avec Marilyn.
Mais de toute façons si ça ne marche pas avec ton Firefox, tu n'as donc pas pu les voir. Pourtant sur le site donné en lien pour le CSS, Firefox fait partie des navigateurs compatibles.
Fonctionne avec :
* FireFox
* NS 6/7
* Mozilla 1.x
* MSIE 6+
* Opéra 7
* Safari
Je suppose que tu as désactivé le verrouillage des popups pour tester ?
Sur une de mes bécanes, j'ai eu un blocage sur les petites visionneuses avec IE, car la protection des popups était activée.
Publié : 25 juil. 2005 10:19
par John Lee
si c'est les cartes tony blair, rose and miss marilyn,je viens de refaire un essais sous firefox pas de probleme, j'ais bien en effet zoom sur la rose, pour marilyn je la vois de dos (ca me rapelle une pub demain j'enleve le bas)

et pour mister blair , je le vois bien en fetard
Publié : 25 juil. 2005 10:28
par John Lee
pas de probleme avec firefox et mozilla sous linux
La vie est donc belle

Publié : 25 juil. 2005 11:09
par Tom
Oui John,
Merci pour les tests.
Moralité avec un peu de javascript et de css (en copier coller, rien de bien sorcier) on arrive à obtenir de effets plutôt sympas.
J'aime bien aussi cet effet de curseur :
http://www.editeurjavascript.com/script ... s_1_66.php
Publié : 25 juil. 2005 11:24
par John Lee
l'effet est sympathique, mais je me demande si au bout d'un moment ca ne fatigue pas le visiteur ?
(je suis linux et firefox et il marche, c'est deja ca). J'avais fait un essais au debut avec une horloge qui suivait le curseur, tres rapidement je l'ais vire, ca donner un leger mal de mer
Le javascript c'est vraiment sympa et ca permet de faire pas mal d'effet qui donne vie a une page
Publié : 25 juil. 2005 11:39
par Coraliecaramel
Merci Tom,
J'essaierai aussi.
Publié : 25 juil. 2005 18:01
par John Lee
puisqu'on en est au effet javascript, un systeme que j'aime bien, c'est la gestion des onglets en Javascript
Par exemple dans ma page liens, je ne voulais qu'une page, mais differencier mes liens NYC, Photofiltre et mes bannieres
Voir ici :
http://perrin.olivier.free.fr/partenaire/index.html
Ca marche sous firefox et Ie (sous linux et windows)
J'ais trouve la base ic : i
http://www.javascriptfr.com/code.aspx?ID=16288
Publié : 25 juil. 2005 19:28
par Tom
Oui John,
Sympa la gestion des onglets, je vais creuser un peu et voir si je peux intégrer ça sans tout casser.
A propos, merci d'avoir inscrit mon site dans tes liens, avec copie d'écran c'est assez parlant.
D'accord avec toi pour le curseur, d'autant qu'il faudrait modifier quelques réglage pour le ramener plus facilement en mode normal par le double click.
C'était juste pour le fun.
Autre découverte aménagée au cours de la journée en javascript : un diaporama paramétrable en durée d'intervalle. Consultable à partir de cette page :
http://jptom.free.fr/GaleriePublique/NavPub.html
Si j'ai un peu de temps dans les jours à venir, je regarderai si je peux l'intégrer dans un frameset avec un index pour pointer sur la bonne image avant le lancement du diaporama.
A+
Publié : 25 juil. 2005 19:47
par John Lee
Le diaporama programmable c'est pas mal, il rend bien
J'attends avec impatience de voir ce que cela va donner en final

Publié : 25 juil. 2005 23:19
par Tom
Merci John,
Je viens d'y rajouter un compteur de vues.
Il n'est pas dit que je pourrai passer un paramètre d'un cadre à l'autre. Je débarque complétement dans le javascript. Mais petit à petit ...
Publié : 25 juil. 2005 23:24
par John Lee
Tom a écrit :Merci John,
Je viens d'y rajouter un compteur de vues.
Il n'est pas dit que je pourrai passer un paramètre d'un cadre à l'autre. Je débarque complétement dans le javascript. Mais petit à petit ...
d'apres moi, pour ca il faudra que tu passes par un coockies, j'ais regarde c'est comme ca que marche une bonne partie des diaporamas de Jalbum, sauf si tu fais un diaporama avec une seule fenetre
pour l'utilisation des coockies, je te conseille ce lien
http://www.actulab.com/les-cookies-en-javascript.php
Il explique tout et donne des exemples d'une simplicitees
Je debute aussi et si on peut s'aider, ce sera avec plaisir
Publié : 25 juil. 2005 23:36
par Tom
Impeccable,
Merci pour le lien, je vais continuer à creuser.