Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Mar 29 Nov 2011 - 16:27
coucou .

Nous allons faire apparaitre au survol d'une petite image, sa grande sœur au format réel.
Tout d'abord il va falloir créer deux scripts Jquery.

Pour cela, rendez vous dans votre P.A:
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Puis créer un nouveau Javascript

Titre: Image_gallerie
Placement: Sur les sujets
Spoiler:
Code:
/*
 * Image preview script
 * powered by jQuery (http://www.jquery.com)
 *
 * written by Alen Grakalic (http://cssglobe.com)
 *
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 
this.imagePreview = function(){   
   /* CONFIG */
      
      xOffset = 10;
      yOffset = 30;
      
      // these 2 variable determine popup's distance from the cursor
      // you might want to adjust to get the right result
      
   /* END CONFIG */
   $("a.preview").hover(function(e){
      this.t = this.title;
      this.title = "";   
      var c = (this.t != "") ? "<br/>" + this.t : "";
      $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                        
      $("#preview")
         .css("top",(e.pageY - xOffset) + "px")
         .css("left",(e.pageX + yOffset) + "px")
         .fadeIn("fast");                  
    },
   function(){
      this.title = this.t;   
      $("#preview").remove();
    });   
   $("a.preview").mousemove(function(e){
      $("#preview")
         .css("top",(e.pageY - xOffset) + "px")
         .css("left",(e.pageX + yOffset) + "px");
   });         
};


// starting the script on page load
$(document).ready(function(){
   imagePreview();
});




Puis le deuxième:


Titre: Jquery
Placement: Sur les sujets

Téléchargement en fichier joint en bas du tuto clin oeil



Passons au C.S.S,
il ne faut pas grand chose et je vous ai mis le strict minimum hinhin
Affichage/Images et Couleurs/Couleurs/Feuille de style

Code:
#preview
{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
 text-align:center;
 -webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}


Pensez à


Le code HTML:

Code:
<a href="LIEN DE L IMAGE DANS L INFOBULLE"title="L AUTEUR" class="preview">
<img src="LIEN DE LA PETITE IMAGE"/></a><br>


Résultat :





Il vous faut pour réaliser cet effet la même image avec deux tailles différentes:

Bon c'est vrai que nous n'avons pas toujours la même image avec deux tailles différentes,
bon aller je vous donne l’astuce moqueur .


Il va falloir tricher sur la petite image
Pour l'exemple je vais prendre la bannière
http://milouze14.fr/log2013.png

Elle fait 700px de large sur 200px de hauteur.
Je vais donc modifier pour la diminuer sa valeur par 10 hinhin

elle ne fera plus que 70px par 20 px.

Rappel sur le code:
Code:

<a href="LIEN DE L IMAGE DANS L INFOBULLE"title="L AUTEUR" class="preview">
C'est cette partie qui va nous intéresser
<img src="LIEN DE LA PETITE IMAGE"width=" la taille de la largeur en px"height="la taille de la hauteur en px" /></a><br>
Le code complet:
Code:

<a href="http://milouze14.fr/log2013.png"title="L AUTEUR" class="preview">
<img src="http://milouze14.fr/log2013.png"width="70"height="20"  /></a><br>


Et le rendu:




tape la voilà les ami(e)s super clin oeil
Fichiers joints
Jquery.txt
Jquery
Vous n'avez pas la permission de télécharger les fichiers joints.
(6 Ko) Téléchargé 5 fois



Dernière édition par Milouze14 le Mer 30 Nov 2011 - 4:15, édité 1 fois





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Lun 25 Mar 2013 - 19:36
coucou mise a jour du tutoriel concernant le Jquery hinhin





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 
  • © PunBB | Signaler un abus