Agrandir une photo au survol de la souris

 
1. Agrandir une photo au survol de la souris

Pour voir la démonstration, passer votre souris au dessus de l'image du pub irlandais en haut de cet article.

---

 
2. Comment agrandir une photo au survol de la souris

2.1 Enregistrer votre photo

* Enregistrer votre photo dans votre administration (ou sur un site de sauvegarde et noter son adresse URL), à un format "grand".

Inutile de dépasser les 600 pixels de large, nettement suffisant pour un article.

* Enregistrer la même photo à un format petit. Classiquement, le format vignette fait 75 x 100 pixels et noter son adresse URL.

 
2.2 Code HTML pour agrandir la photo au survol de la souris

Aller en mode HTML (en édition avancée) et ajouter le code suivant :

<img src="http://adresse image petit.jpg"
onmouseout="javascript:this.src='http://adresse image petit.jpg'"
onmouseover="javascript:this.src='http://adresse image grand.jpg'" class="CtreTexte" />

avec l'adresse url de l'image en format "petit" aux 2 premières lignes, et l'adresse de la grande image pour "OnmouseOver".
 

---

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

Comments

[claire]

Merci pour cette aide.
Claire

[tiot le chti et bunny le chti]

salut


ca c'est super


je vais certainement l'utiliser pour agrandir les belles photos


bonne soirée

[Relics]

Slt ! Je voulais te demander comment on faisait pr enregistrer une image dans l'administration (je sais faire) mais l'enregistrer en "grand" ou en "petit" ?


Je ne vois pas comment on fait.


Merci bc !

[Aurelie]

Il faut que tu ais lap hotos en 2 exemplaires, une grande et une petite (avec un logiel photo ou dessin)

[Nadège/LadyScar]

Bon, j'ai trouvé pourquoi mes photos "tressautaient": c'est par rapport à l'endroit où s'aggrandi la photo. Il faut que la souris reste dessus.


Du coup, si on a plusieurs petites photos, quand elles s'agrendissent, certaines n'ont pas la place et se décale un peu, du coup, comme la souris n'est plus sur la photo, celle-ci passe de petit
à grand arrêt...


Moralité: laisser de la place entre les photos (^_^)

[Nadège/LadyScar]

Coucou Aurélie,


Grâce à ton code, j'utilise presque toutes mes photos ainsi, c'est bien plus pratique: ça prend moins de place!


Mais là, j'ai un soucis: quand on passe la souris sur la photo, celle-ci "tremble"


J'ai essayé en tout effaçant et en remettant, mais rien à faire. Ce qui est bizarre, c'est que ça ne me le fais pas sur toutes les photos!


Tu peux tester là: Books@Lot


As-tu déjà eu ce problème?


Bises

[Nadège]

Aj, je crois savoir où je me suis trompée: c'est peut-être en enlevant le "center", j'ai peut-être enlevé un sigle de trop...


Dis-moi, si je veux pas centrer ma photo, qu'est-ce que je dois enlever exactement au code?


Merci

[Aurelie]

Difficile sans voir tout ton code. Remplace le "center" par "left", par exemple et ne touche à rien d'autre. tu as du effacer un point ou un tout petit signe...

[Nadège]

Recoucou! Encore moi


Alors, j'ai quand même un ptit soucis (je sais, je suis embêtante ).


Je mets ma photo avec le code comme tu l'indiques (sauf que j'enlève le "center" car je veux pas centrer ^^). Je valide, je vérifie et ça marche.


Mais, quand je redimentionne ma photo par l'éditeur over-blog et que je la mets à la taille exact que je veux (les éditeurs ont des tailles "pré établies" et ce n'est
pas forcément celles que je souhaite), je valide et là du coup, ça ne marche plus: la photo ne s'agrandit plus...


Sais-tu pourquoi?


Bises (^_^)

[Nadège]

Je n'y manquerais pas (^_^)

[Nadège]

Ca y est, maintenant ça marche: sur ta photo et sur la mienne
Je sais pas pourquoi ça marchait pas hier soir
Peut-être un bug d'Over-blog suite au piratage, ou simplement qu'il fallait attendre...
En tout cas, un grand merci, ça fait un moment que je voulais faire ça! J'ai regardé sur le forum hier, mais rien trouvé... ici, c'est plus pratique!!
Bises (^_^)

[Aurelie]

N'hésite pas à revenir me voir pour trouver d'autres astuces sympas pour ton blog !

[Nadège]

Coucouc Aurélie
Quand on passe la souris sur la photo, ça ne marche pas :(
Je viens de tenter avec ton code là: Books@Lot (la 1° petite vignette de livre) et
malheureusement, ça ne marche pas
T'as une idée pour m'aider? (^_^)
Bises!

[Aurelie]

Hello,

J'ai surtout vu que ça marche, avec ton image "Axiomatique". Sais pas si tu as trouvé le truc depuis ton message, mais aps de souci, ça fonctionne très bien. bravo a toi !