photos s'agrandissant au survol de la souris

[ana38]

Bonjour à tous,

Tout d'abord, merci à tous ceux qui font vivre ce forum qui m'a été tellement utile et qui m'a fait débuter dans la création de sites internet.
Voilà, je suis entrain de placer des photos qui doivent s'agrandir au survol de la souris. Seulement, quand elles s'agrandissent, elles me décalent tout mon texte. De plus, elles s'agrandissent parfois vers le bas-droit, ou bas-gauche, ou vers le haut. Tout dépend du texte qu'il y a autour. Je ne sais pas si j'ai été claire ?!
Y-a-t-il une possibilité qu'elles s'agrandissent centrées (pile au dessus de la vignette de dessous) et par dessus le texte qu'il y a autour, le couvrant sans le décaler.
Vous comprendrez sûrement mieux avec un bout de code :

Code : Tout sélectionner

<big><big><big><span
 style="text-decoration: underline; font-family: Script MT Bold;"><br>
<br>
à
partir de 4ans</span></big></big></big><img
 style="border: 0.1cm groove white; margin-left: 3cm;"
 onmouseover="this.height=270; this.width=400"
 onmouseout="this.height=50; this.width=50"
 src="../Photos/cocotte7.JPG" align="bottom" height="50"
 width="50">
<br>
<div style="margin-left: 40px;">
<div style="margin-left: 99px;"><big
 style="font-family: Script MT Bold; color: rgb(255, 255, 255); font-weight: bold;"><big><big><span
 style="text-decoration: underline; color: black;">Théâtre,
magie,</span><span style="color: black;">
</span><span style="text-decoration: underline;"><img
 style="border: 0.1cm groove white; margin-left: 3cm;"
 onmouseover="this.height=260; this.width=390"
 onmouseout="this.height=50; this.width=50"
 src="../Photos/cocotte5.JPG" align="bottom" height="50"
 width="50"></span></big></big></big></div>
</div>

Un grand merci d'avance pour vos réponses.
A bientôt.

Ana

modération : utilisation de la balise code

[Fabrice.Tres.Net]

Ana,

Il faut éviter les <big> <small>.... et les remplacer par du css. La barre de mise en forme kompozer ne doit plus être utilisée, c'est complétement dépassé.

Les vignettes évitent normalement de charger l'image dans sa pleine taille, donc elles rendent le chargement et l'affichage d'une page + rapide. L'utilisateur, au survol de la souris ou par un clic, lancera le téléchargement d'une image dans sa pleine résolution.
Dans ton cas, c'est la même image qui est affichée dans 2 tailles différentes, il n'y a donc pas "d'économie", juste du travail de conversion/ réduction en plus pour le navigateur. Cette manière de faire s'applique généralement à un nombre réduit d'images servant à illustrer un texte.

Présentement, en l'absence de positionnement spécifié les images se positionnent, en relatif dans le flux courant, en haut à gauche. Pour les centrer, il faut donc ajouter des "instructions" de positionnement (top, left,...).

Des références un peu pointues mais indispensables.
http://www.siteduzero.com/tutoriel-3-13 ... e-1-2.html
http://www.siteduzero.com/tutoriel-3-13 ... #ss_part_3
http://openweb.eu.org/articles/initiation_flux
http://www.alsacreations.com/article/li ... tie-1.html

[ana38]

Merci beaucoup pour ta réponse.

Je sais, je suis une mauvaise élève. Quand je me suis lancée dans le html, j'ai appris grâce aux tutos nvu et kompozer et ne me demande pas pourquoi mais j'ai sauté le chapitre CSS en pensant qu'il n'était pas indispensable mais... à mon grand regret !!!!!!!!!!
Je vais m'y mettre pour me facilité la vie et rendre mon site plus "propre".
Merci également pour tes liens que je vais bien sûr m'empresser de regarder.

Amicalement,
Ana

[mccoy]

salut Ana,
Je suis débutant comme toi.

Ca fait 2 semaine que je m'y suis mis, J'ai publié un sit assé simple avec KpZ, avec une mise en forme à la publisher.
Une photo par ici, du texte par là . . .

mais aprés avoir suivi ce TUTO :

http://info.sio2.be/kpz/index.php

Je reste débutant, mais débutant confirmé.
N'hésite surtout pas a fair tout ce qu'il te demande, creer les document demandé, y effectuer les travaux ECT...
Et essai de répondre au question " sans tros tricher" histoire que tu assimiles bien les BASES
Reviens en arriére si t'es pas sûre de tes réponses.

Et tu verra que les CSS te faciliterons la vie. Et en fin de topique, tu trouvera de toi méme comment agrandir tes photos assé aisément.

Dailleur, J'ai tenté d'ouvrir ton code via mon navigateur, mais mon firwall a bloqué tes scriptes, donc rien ne ce passe.
Donc, potasse le tuto qui est sans scripte

[ana38]

Merci beaucoup pour ton soutien Mccoy.
Promis, je vais me mettre au CSS, c'est obligé !

J'avais déjà honte d'écrire mon script mais alors là, sachant que tu ne peux même pas l'ouvrir... je manque de respect à tous ces pros de l'informatique qui s'arracheraient les cheveux au vue de mon site

En tous cas, merci à tous !