Agrandir une image au survol

Blog de sagan33 :Site Clair_Obscur, Agrandir une image au survol

Image Animés animé tourner rotation Aujourd'hui, inutile de se vanter de piquer, c'est du libre-service !Image Animés animé tourner rotation


 

 

Dans le 6ème article de ma page d'accueil, vous pouvez voir une photographie agrandie au survol de la souris. Si cette petite fonction vous plaît, vous pouvez la reproduire de la manière suivante :

S'enregistrer chez un hébergeur d'images. En tout premier lieu, je ne le dirai jamais assez, il vous faut un hébergeur d'image. Blogspace ne suffit pas. L'hébergeur est incontournable lorsqu'on veut faire des créations de design. Il permet de revenir sur les codes, de redimensionner les photos, d'héberger des photographies grand format. Enfin de nombreuses possibilités annexes à celles de la plate-forme. Celui que je vous conseille est Archiv Host. Il existe les offres payantes mais, à l'origine, lorsque je m'étais inscrite chez eux, je suis restée longtemps en offre gratuite avec un nombre de Go  limité.

 Faire un copié-collé du code :

"

 <p style="text-align: justify;">&nbsp;</p>
<p style="text-align: center;">
    <span style="font-size: 8pt;">(agrandir la photo au survol de l'image)</span><img src="adresse de l'image petite" onmouseout="javascript:this.src='adresse de la petite image' " onmouseover="javascript:this.src='adresse de la grande image' " class="CtreTexte" />
  </p>
<p style="text-align: center;">
    &nbsp;&nbsp;
  </p>
<p>&nbsp;</p>

  "   

 Marche à suivre :

- ATTENTION aux ' et ".  Vous voyez que pour la 2ème et 3ème adresse, il y a au début une apostrophe ', une autre à la fin qui ferme ', ensuite un guillemet ". Bien respecter cette ponctuation, s'il manque un caractère,  ça ne marche pas !

 - Vous hébergez votre image chez l'hébergeur.

- Vous ouvrez l'html dans le texte de votre article et vous faîtes un copié collé intégral du code ci-dessus.

- A l'intérieur du code vous remplacez l'adresse de l'image petite (vert) par l'url (style http://sagan33estlareinedesc.jpg ) de votre petite image. (2 fois).

- A l'intérieur du code vous remplacez l'adresse de l'image grande (rose) par l'url de votre image grande taille.

- Tout dépend de la taille d'origine de votre grande image. Le rapport 1000px pour la grande/250px pour la petite est bon.

- Vous pouvez enlever la ligne <span style="font-size: 8pt;">(agrandir la photo au survol de l'image)</span> si vous ne voulez pas voir apparaître "agrandir la photo".

Et voilà ! c'est tout simple pour obtenir le résultat de l'article suivant,  avec des images de votre choix

mercredi 19 octobre 2011 14:52 , dans Astuces pour embellir son blog



2 Fans


2 commentaire(s)

  • sagan33 mar. 04 oct. 2011 14:11
    J'essaie de t'envoyer un message en privé...
  • christal mar. 04 oct. 2011 14:07
    Re coucou ... au vu du nombre de coms la Blogosphère doit rencontrer un immense Pb.
    Depuis 3 à 4 jours il n'y a que très peu de parutions, les photos sont introuvables, il est également impossible d'envoyer un message privé.
    Bref, il semble que personne n'ai la moindre info ni réponse. Seulement 4 ou 5 blogs amis ne sont pas concernés.
    Finalement la pose forcée permet de faire un tas de choses toujours reportées au lendemain !!!
    A bientôt Geneviève


Votre commentaire :

(facultatif)

(facultatif)

error

Attention, les propos injurieux, racistes, etc. sont interdits sur ce site.Si une personne porte plainte, nous utiliserons votre adresse internet (54.196.196.62) pour vous identifier.     


ouvrir la barre
fermer la barre

Vous devez être connecté pour écrire un message à sagan33

Vous devez être connecté pour ajouter sagan33 à vos amis

 
Créer un blog