Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
16 septembre 2012 7 16 /09 /septembre /2012 09:16




 
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


 

                                    Rendez-vous sur Hellocoton !                                                        

 

Partager cet article

Repost 0
Published by Aurelie - dans Les images
commenter cet article

commentaires

claire 21/04/2014 19:03

Merci pour cette aide.
Claire

tiot le chti et bunny le chti 21/09/2010 12:10



salut


ca c'est super


je vais certainement l'utiliser pour agrandir les belles photos


bonne soirée



Relics 24/06/2010 19:29



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 24/06/2010 22:17



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



Nadège/LadyScar 12/04/2010 14:01



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 12/04/2010 09:43



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 30/03/2010 18:16



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 31/03/2010 19:25



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 30/03/2010 18:10



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 30/03/2010 11:07


Je n'y manquerais pas (^_^)


Nadège 30/03/2010 10:48


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 30/03/2010 10:59


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


Nadège 29/03/2010 18:20


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 30/03/2010 10:34


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 !


Présentation

  • : Faire un blog
  • Faire un blog
  • : Ce blog vous aide à vous lancer pour faire votre blog : plateforme, mise en page, décoration, gadgets...
  • Contact

Vous Cherchez Quoi ?

Bienvenue !

 

PancarteSmiliz.pngCe blog a pour objet de vous aider à faire votre blog. C'est facile, et possible sans être informaticien !

J'ai 2 autres blogs très différents, et je souhaite mettre mon expérience à votre service. N'hésitez pas à me déposer vos commentaires et questioxxns. 
Si vous débutez, commencez par l' Index des articles , rubrique "Pour bien démarrer". 

 

Inscrivez votre site sur ma Top Liste et améliorez votre référencement.  

Mon logo sur votre site

Si j'ai contribué à l'amélioration de votre blog, merci d'y mettre mon logo :
Site Faire Un Blog

Code à coller :

<a href="http://faireunblog.over-blog.com/" target="_blank"><img height="65" width="85" src="http://sd-1.archive-host.com/membres/up/42016049459753927/PancarteSmiliz.png" alt="Site Faire Un Blog" /></a>

 

 

Date du jour

 

 

 

Géolocalisation

formation