begin process at 2012 05 28 13:59:35
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS

MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS


 Information sur la source

Note :
7 / 10 - par 1 personne
7,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :mooLoupe, effet, image, mootools, loupe Niveau :Débutant Date de création :11/02/2010 Date de mise à jour :16/02/2010 11:02:00 Vu / téléchargé :5 005 / 504
Auteur : Miky76

Ecrire un message privé
Site perso
Commentaire sur cette source (3)
Ajouter un commentaire et/ou une note

 Description

Effet de loupe (zoom + déplacement sur l'image en fonction de la position du curseur) sur une image lors du survol de la souris, avec un cadre en fondu.

Pour utiliser l'objet MooLoupe il faut inclure dans sa page la bibliothèque mooTools (version actuelle 1.2.4) et le présent script. Ensuite, dans votre page web, il faut instancier sur un élément cible l'objet mooTooltip via l'évènement domready.

Voici la liste exhaustive des options possibles :

- width: Largeur de la zone affichée,
- height: Hauteur de la zone affichée,
- iniLeft: Position initiale de l'image dans la zone affichée (margin-top),
- iniTop: Position initiale de l'image dans la zone affichée (margin-left),
- zoom: Valeur du zoom lorsque la souris entre dans la zone affichée.

Attention ! La taille de l'image utilisée sera celle définie en HTML. Le zoom est défini par rapport à cette taille initiale.

Je mets en source uniquement l'appel à la classe, plus d'infos, ainsi qu'un exemple qui tourne, sur http://sources.mightyprods.com/index.php?id=3

Source

  • <script type="text/javascript" src="mooTools.js"></script>
  • <script type="text/javascript" src="mooLoupe.js"></script>
  • <script type="text/javascript">
  • window.addEvent('domready', function() {
  • new MooLoupe($('photo'), { width: 750, zoom: 2.5 });
  • });
  • </script>
  • <img id="photo" src="rep/photo.jpg" style="height: 422px; width: 750px;" alt="photo" />
<script type="text/javascript" src="mooTools.js"></script>
<script type="text/javascript" src="mooLoupe.js"></script>

<script type="text/javascript">
window.addEvent('domready', function() {
  new MooLoupe($('photo'), { width: 750, zoom: 2.5 });
});
</script>

<img id="photo" src="rep/photo.jpg" style="height: 422px; width: 750px;" alt="photo" />

 Conclusion

mooTools, c'est bien ;-)

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

11 février 2010 15:08:40 :
Mise à jour code source (j'avais oublié de le remplir...)
11 février 2010 15:10:09 :
Correction fautes
16 février 2010 11:02:00 :
Modif de la classe : - Le zoom se fait désormais à l'endroit ou la souris entre dans la zone de zoom. - Raccourcissement de la durée du zoom.

 Sources du même auteur

Source avec Zip MOOTOOLTIP
Source avec Zip MOOTABLEAU
Toutes les sources de Miky76

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture [ZI] ZOOM (LOUPE) SUR IMAGE par Bul3
Source avec Zip Source avec une capture AFFICHAGE D'IMAGE par kazma
Source avec Zip MOOTOOLS FUNCTION par BEDA91IT
Source avec Zip Source avec une capture LOUPE SUR IMAGE AU PASSAGE DE LA SOURIS ! par adelami
Source avec Zip Source avec une capture EFFET D'EXPLOSION SUR TEXTE ET/OU IMAGE par PetoleTeam

Commentaires et avis

Commentaire de hectordom le 15/02/2010 12:38:21

Bonjour,
Très sympa, un regret la saute à la fin du zoom dès que l'on bouge le pointeur.
N'étant pas pas très développeur je ne peux pas proposer de solutions.
J'attend la suite avec impatience!
D

Commentaire de Miky76 le 16/02/2010 11:06:49

Salut et merci pour le commentaire.

J'ai un peu amélioré le truc, désormais lorsqu'on place la souris sur la zone qui affiche l'image, le zoom se fait en tenant compte de la position de la souris (auparavant le script centrait l'image) et j'ai raccourci la durée du zoom (200ms actuellement contre 500ms avant).

Du coup cela devrait un peu moins sauter qu'avant, mais malgré tout si on bouge rapidement la souris le zoom se cale par rapport à la position en entrée de la souris et si 200ms la souris est très éloignée de ce point, cela va sauter...

Commentaire de hectordom le 18/02/2010 01:03:47 7/10

Je comprends maintenant la difficulté de gérer l'effet visuel, à mon sens c'est maintenant plus logique dans le fonctionnement.
Je vais de voir ce que celà donne en production.
Je voudrais juste signaler pour ceux qui ne la connaissent  et pour le plaisir une très belle source pour un effet de loupe: http://demos.dojotoolkit.org/demos/cropper/

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Recherche Animation d'image-effet brouillard [ par fogco ] Je recherche un script &#224; int&#233;grer dans une page html pour donner une impression (anim&#233;e) de brouillard ou brumisation&nbsp;sur une phot effet en image [ par astuces_jeux ] salut les mecs,Je cherche comment on fait que qand on met le curseur sur une image c'est une autre image qui apparetcomment on fait ???merci de m'aide effet drapeau [ par mojchris ] J'ais récupérer le script effet drapeau de PetoleTeam par contre sur lapage d'exemple il faut cliquer sur un lien pour que l'image apparaisse alors qu effet ajax puis changer image puis effet ajaxy [ par Annadrill ] bonjour,voilà, j'ai une div avec une image dedans et j'aimerais que lorsque je clique sur un lien, la div se ferme (effect.Fade), puis une fois fermée Defilement d'image horizontal [ par toons43 ] Bonjour à tous, Je recherche désespérement un script comme celui-ci http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htmqui permet de faire Effet d'image survolée [ par JoJo738 ] Zoom genre loupe sur image [ par Annadrill ] Bonjour, voilà, j'essaie de réaliser quelque chose de ce genre http://www.magictoolbox.com/magicmagnify/ mais je ne sais pas par ou commencer, m'y co Ouvrir une image à partir d'une zone cliquable avec un effet de zoom? [ par bahh66 ] Bonjour, je pose cette question ici mais je ne suis pas sur d'être au bon endroit... Je dois réaliser un cd-rom pour une présentation de musée. J'ai Effet loupe popup au passage de la souris [ par tendres ] Bonjour, J'aimerai utiliser un système de zoom dans une popup au passage de la souris sur une image/photo dans n'importe quel format (portrait /paysa pb sur l'utilisation d'un script zoom+loupe sur image [ par ScriWeb ] Bonjour à tous, Je ne connais pas la javascript et j'ai tenté d'utilisé un script pour avoir un effet loupe sur une image : http://www.javascriptfr.c


Nos sponsors


Sondage...

Comparez les prix


Samsung Galaxy Tab (GT-P1000) Tablet PC
Entre 699€ et 699€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 6,287 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)