18041 sujets

Questions générales et questions de débutants

[Résolu] Position d'une image lors du survol par la souris

Bonjour à tous
Et merci de m’accueillir parmi vous

Comme dit dans le sujet, il me manque une ligne d'écriture pour réaliser mon souhait.

j'ai un site avec beaucoup de photos d'insectes, et je voudrai qu'en passant la souris sur une vignette, elle s'affiche en grand.

J'ai pris les codes sur une de vos aides, et ça fonctionne parfaitement, sauf que cette photo s'affiche toujours en haut de ma page, et disparait si je descend la recherche (en bas de page) avec l’ascenseur

Pour bien me faire comprendre, et surtout voir l'écriture faite, voilà une mise en page d'essais :
http://jjbo.fr/cats/essais.html

Je vous remercie de me donner les codes à enserrer pour que cette image se positionne toujours au même endroit sur l'écran quelque soit la vignette d'appel

@+ jjbo
Bonjour et bienvenue,

Essaie de positionner tes images en Position:fixed plutôt qu'en absolue ainsi la position restera fixe malgré le scroll.

Au regard de ton code source, il apparaît des erreurs qui empêcheront ta page d'être valide :
* A savoir une ID doit être unique à la page (peut importe si elle existe dans d'autres pages) ; cas de l'ID FF
- si l'ID doit être répétée, la convertir en CLASS.
* L'utilisation de la balise IMG implique l'utilisation de l'attribut ALT
* Il est préférable d'utiliser une feuille de style séparée du html/php
* il est fortement recommandé de bannir les styles en ligne mêlés au html/php
et enfin,
* il est préférable d'utiliser un dimensionnement flexible plutôt que des tailles fixées en Css (dans la mesure du possible).

Bonne continuation et pense à nous tenir au courant.
Bonjour,
position: fixed; plutôt que position: absolute;
le résultat est sympa, non ?
les valeurs "top" et "left" permettent toujours de positionner les grandes photos
salut,
et j'ajouterais (pour faire comme greg Smiley langue ) :
* Un lien doit toujours avoir un attribut "href"
* "border: 0px solid" = "border:none" et je ne sais pas au passage si c'est toujours utile à l'heure actuelle.
* Utiliser une mise en page CSS au lieu des <br> (un simple "display:table" résout ton problème)
* Quelle est l'utilité de mettre un espace insécable ? --> CSS Smiley deal
* Et surtout... passer à un doctype HTML5 !
Voilà pour ce que j'ai pu voir.
Au passage, pas la peine de mettre des classes partout. CSS regorge de sélecteurs aussi variés que pertinents !
PS, je viens de modifier position: fixed;, et là, ça marche
Je crois donc qu'il ne faut pas tenir compte de tout ce qui suit, mais simplement me donner les petites modifs et mises à jour à apporter pour que ce soit parfait.


Bien, je vois que mon post est bien pris en considération, et je vous en remercie.

Mais pour moi, deux choses Smiley decu

Je ne l'ai pas précisé dans mon premier post, mais je suis totalement nul en programmation.

J'ai fais cette page en " recopiant " un scripte trouvé sur un autre post qui correspondait à mes attentes, et tout content de mois, je l'ai un peu adapté ((mais sans rien y connaître))

Et d'autre part, tout ce que vous me dite est bien beau, et parle surement aux informaticiens, mais à moi, pas du tout Smiley fache

Je pense que le plus simple est que vous me donniez les deux écritures à placer dans <head></head> et dans <body></body> (pour une seule photo), après je m'en sortirai,

C'est vrais que j'ai supprimé Alt= car je n'en avais pas besoin, et je voulais simplifier au plus les lignes à copier pour les centaines de photos que j'ai à placer.

Je ne sais pas s'il y a plusieurs solutions pour arriver au bout, mais faites au plus simple Smiley cligne

finalement ce n'est pas qu'une simple ligne à rajouter...
Modifié par yemcam (09 Dec 2014 - 13:57)
yemcam a écrit :
Bien, je vois que mon post est bien pris en considération, et je vous en remercie.
De rien, c'est demandé si gentillement.
yemcam a écrit :
Je ne l'ai pas précisé dans mon premier post, mais je suis totalement nul en programmation.
Ce sont des choses qui arrivent mais on devient meilleurs par l'apprentissage. D'ailleurs je connais un site tout indiqué pour cela : Alsacréations

yemcam a écrit :
J'ai fais cette page en &quot; recopiant &quot; un scripte trouvé sur un autre post qui correspondait à mes attentes, et tout content de mois, je l'ai un peu adapté ((mais sans rien y connaître))
Techniquement il est recommandé de décortiquer les codes pompés afin de les comprendre et pouvoir les modifier

yemcam a écrit :
Et d'autre part, tout ce que vous me dite est bien beau, et parle surement aux informaticiens, mais à moi, pas du tout Smiley fache
D'où l'intronisation de mots-clés qui te permettent d'approfondir tes recherches et par la même tes connaissances.

yemcam a écrit :
Je pense que le plus simple est que vous me donniez les deux écritures à placer dans &lt;head&gt;&lt;/head&gt; et dans &lt;body&gt;&lt;/body&gt; (pour une seule photo), après je m'en sortirai,
La fourniture de code prets à l'emploi n'est pas la politique de la maison. Pour ma part, je m'abstiens.

yemcam a écrit :
C'est vrais que j'ai supprimé Alt= car je n'en avais pas besoin, et je voulais simplifier au plus les lignes à copier pour les centaines de photos que j'ai à placer.
Cela relève du domaine de l'accessibilité, tu ne le fais pas pour toi mais pour ceux qui subissent certaines contraintes...

yemcam a écrit :
Je ne sais pas s'il y a plusieurs solutions pour arriver au bout, mais faites au plus simple Smiley cligne
Il y a toujours de multiples solutions. La plus simple est toujours celle qu'on maitrise.

Bonne continuation.
Modifié par Greg_Lumiere (09 Dec 2014 - 14:55)
Ok,

mais pour maitriser, il faut quand même un minimum de connaissances, et ce n'est pas en 5 minutes de consultation des aides que je peux devenir pro Smiley cligne surtout qu'il y a des interactions entre un peu tout.


Mon but n'est pas de programmer, mais d'avoir une page qui s'affiche correctement, et j'arrive quand même presque au bout, mais sans trop approfondir ce que je fais, de toute façon c'est pas mon but

C'est vrais que donner des écritures toutes faites serait trop simple et je comprends que ce n'est pas l'objectif du forum.

Ma page souhaitée fonctionne même s'il semble y avoir pas mal d’erreurs , mais en deux ou trois mots, que dois-je ajouter ou supprimer pour que ce soit parfait
Je ne pense pas que vous reveniez sur ce post, qui fonctionne, peut-être pas dans les normes, mais ça me convient Smiley biggrin

je marque donc le sujet comme résolu, et vous en remercie

@+
Sujet clos
Aller à