Besoin d'aide pour redimensionner les images dans un code en hover

par misa* Mer 19 Oct 2016 - 2:13

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://shadowupon-us.forumactif.org

Description du problème

Bonjour / bonsoir,

Voici mon problème, j'ai rechercher un code ici pour avoir une image où lorsque l'on passe la sourie, un texte puisse apparaître, tout fonctionne à merveille et je tiens à remercier du partage et de l'aide donner ici, mais voilà j'ai plusieurs images elles toutes de taille différente, j'aimerais trouver le moyen de faire en sorte qu'elles soit toute redimensionner à 150px par 150px, car pour le moment elles sont toutes dans un carré de cette taille, mais les images trop grandes coupent et le rendu n'est vraiment pas joli. Donc si quelqu'un pourrait m'aider à trouver une solution pour redimensionner les images pour qu'elles soient de la bonne taille dans le code cela serait vraiment génial !

Voici les codes en questions

celui du css;;

Code:: .img { position: absolute; display: block; margin-top: -18px; width: 150px; height: 150px; overflow: auto; background-color: #191817; font-size: 10px; color: #9c9c9c; text-align: justify; padding: 5px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); } .img:hover { opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=80); }

Celui dans le sujet;;

Code:: <table><tr><td> <center>[size=16]Amissio/ Guérison[/size]</center> Ralentit la perte de sang et accélère le remplacement du sang naturel. Cette runes est la même que celle de guérison. La première rune de guérison la plus basique est le Iratze, qui ferme les coupures et les blessures des Shadowhunters. Elle soulage la douleur et augmente temporairement la température, aidant à brûler les infections comme la fièvre le fait. Elle peut également être utilisé en cas de problèmes de santé mineurs. Cette rune brille d'or quand elle est utilisée avant de sombrer dans la peau et ne laisse pas de cicatrice derrière comme les marques moyennes. Cependant, le Iratze est inefficace contre les poisons des démons, les blessures causées par des runes démoniaques ou le métal démoniaque, et n'est également pas considéré comme le meilleur traitement pour des blessures graves. Dans ces cas, la guérison doit être fait par les Silent Brothers. </td><td><span style="display: block; width: 150px; height: 150px; background: url(http://vignette2.wikia.nocookie.net/mortalinstruments/images/a/a2/VF_Rune%2C_Deflect-Block.png/revision/latest/zoom-crop/width/240/height/240?cb=20131103090613&format=webp) center center no-repeat;"> <center>[size=16]Détourner / Bloquage[/size]</center> La rune de bloquage aide les Shadowhunters à repousser les coups entrants. Bien que pratique dans les conflits violents et rapidement et facilement appliquée, elle est souvent impossible à utiliser au cours d'une bataille. Elle est plus efficace lorsqu'elle est appliquée sur des structures défensives. Elle doit constamment être ré-appliquée pour être efficace. </td><td> <center>[size=16]Ininflammable[/size]</center> La rune Ininflammable, également connu sous le nom de rune pyr, est une rune pour ignifugation, ce qui rend l'utilisateur ou l'objet marqué invulnérable au feu, dans une certaine mesure. Comme elle perd son effet quand elle maîtrise le feu, elle pâlie jusqu'à complète disparition. </td></tr><tr><td> <center>[size=16]Invisible[/size]</center> blablabla</td><td> <center>[size=16]Visible[/size]</center> blablabla</td><td> <center>[size=16]Protection[/size]</center> blablabla</td></tr></table>

Petite précission, j'utilise le code pour un sujet et non à titre d'élément de design pour le forum ! =D

Merci beaucoup encore ! ♥

par ZYVHK Mer 19 Oct 2016 - 15:53

Hello,
Si j'ai bien compris, il faudrait que l'image (de fond étant donné qu'elles sont en background-image) se rétrécisse à 150x150px au survol de celle-ci ?
Si c'est bien ça, essayez ceci :

HTML

Code:: <table><tr><td> <center>[size=16]Amissio/ Guérison[/size]</center> Ralentit la perte de sang et accélère le remplacement du sang naturel. Cette runes est la même que celle de guérison. La première rune de guérison la plus basique est le Iratze, qui ferme les coupures et les blessures des Shadowhunters. Elle soulage la douleur et augmente temporairement la température, aidant à brûler les infections comme la fièvre le fait. Elle peut également être utilisé en cas de problèmes de santé mineurs. Cette rune brille d'or quand elle est utilisée avant de sombrer dans la peau et ne laisse pas de cicatrice derrière comme les marques moyennes. Cependant, le Iratze est inefficace contre les poisons des démons, les blessures causées par des runes démoniaques ou le métal démoniaque, et n'est également pas considéré comme le meilleur traitement pour des blessures graves. Dans ces cas, la guérison doit être fait par les Silent Brothers. </td><td><span class="imgh" style="display: block; width: 150px; height: 150px; background: url(http://vignette2.wikia.nocookie.net/mortalinstruments/images/a/a2/VF_Rune%2C_Deflect-Block.png/revision/latest/zoom-crop/width/240/height/240?cb=20131103090613&format=webp) center center no-repeat;"> <center>[size=16]Détourner / Bloquage[/size]</center> La rune de bloquage aide les Shadowhunters à repousser les coups entrants. Bien que pratique dans les conflits violents et rapidement et facilement appliquée, elle est souvent impossible à utiliser au cours d'une bataille. Elle est plus efficace lorsqu'elle est appliquée sur des structures défensives. Elle doit constamment être ré-appliquée pour être efficace. </td><td> <center>[size=16]Ininflammable[/size]</center> La rune Ininflammable, également connu sous le nom de rune pyr, est une rune pour ignifugation, ce qui rend l'utilisateur ou l'objet marqué invulnérable au feu, dans une certaine mesure. Comme elle perd son effet quand elle maîtrise le feu, elle pâlie jusqu'à complète disparition. </td></tr><tr><td> <center>[size=16]Invisible[/size]</center> blablabla</td><td> <center>[size=16]Visible[/size]</center> blablabla</td><td> <center>[size=16]Protection[/size]</center> blablabla</td></tr></table>

CSS

Code:: .imgh:hover {background-size: 150px 150px}

par misa* Jeu 20 Oct 2016 - 1:40

Bonjour / bonsoir !

Oui mais en fait j'aimerais que l'image soit redimensionner autant en hover que pas en hover. Je n'ai peut-être pas été assez précise dans mon premier message. J'ai plusieurs tailles d'images, j'en ai quelque unes qui on déjà la bonne taille qui est de 150*150px mais j'en ai plusieurs qui sont de 240*240px ou 320*320px vue que j'ai au dessus de 50 éléments à lister donc au lieu de passer avec un logiciel de graphisme je cherche un moyen qu'elles ai toutes la bonne grandeur soit 150*150px.

Pour le moment j'ai essayer le code que vous m'avez proposer, mais même là (je sais pas si c'est moi qui est trop mauvaise) mais cela ne fonctionne pas =/

je vais donner l'entièreté du code, peut-être que ce n'est pas juste cette partie du code qui ne fonctionne pas mais la totalité qui concorde pas bien ensemble 'o'

donc voici le codage du sujet en entier;;

Code:: <div align=center><div class="mnp2">LES RUNES<div class="bip3" style="height:auto;"><center><img src="http://2.bp.blogspot.com/-Ndky3jVP_R4/VlNY6NT62TI/AAAAAAAAAuk/6ZMsP7FcdY8/s1600/tumblr_nxm9jt3KGi1urdwd4o1_500.gif" style="opacity:0.5;width:450px;border:5px #000 solid;box-shadow:0px 0px 2px #000;"></center> [i]Runes[/i] → Les runes sont des symboles qui accordent aux Nephilims des pouvoirs surnaturels. Pour les Shadowhunters, les runes sont un langage complexe donné par l'Ange Raziel, qui leur accorde des pouvoirs au-delà de ceux des mundanes. Les Runes sont brûlées dans la peau des Shadowhunters en utilisant des stèles, et sont leur outil le plus commun dans leur combat contre les démons. Les runes sont des marques donnés à la première génération de Shadowhunters par l'Ange Raziel pour les aider à combattre les démons, qu'ils ont été chargés d'éradiquer. Chaque rune accessible aux Shadowhunters est enregistré dans le Livre de l'Alliance, et sont également copiés dans le Gray Book, qui est un livre spécialement conçu pour contenir toutes les runes connues. Les exemplaires sont rares parce que chaque livre doit être spécialement conçu, puisque les stèles, faites d'adamas métalliques saints, brûlent le papier normal.</div>RUNES DE PROTECTION<div class="bip3" style="height:auto;"><table><tr><td> <center>[size=16]Amissio/ Guérison[/size]</center> Ralentit la perte de sang et accélère le remplacement du sang naturel. Cette runes est la même que celle de guérison. La première rune de guérison la plus basique est le Iratze, qui ferme les coupures et les blessures des Shadowhunters. Elle soulage la douleur et augmente temporairement la température, aidant à brûler les infections comme la fièvre le fait. Elle peut également être utilisé en cas de problèmes de santé mineurs. Cette rune brille d'or quand elle est utilisée avant de sombrer dans la peau et ne laisse pas de cicatrice derrière comme les marques moyennes. Cependant, le Iratze est inefficace contre les poisons des démons, les blessures causées par des runes démoniaques ou le métal démoniaque, et n'est également pas considéré comme le meilleur traitement pour des blessures graves. Dans ces cas, la guérison doit être fait par les Silent Brothers. </td><td><span style="display: block; width: 150px; height: 150px; background: url(http://vignette2.wikia.nocookie.net/mortalinstruments/images/a/a2/VF_Rune%2C_Deflect-Block.png/revision/latest/zoom-crop/width/240/height/240?cb=20131103090613&format=webp) center center no-repeat;"> <center>[size=16]Détourner / Bloquage[/size]</center> La rune de bloquage aide les Shadowhunters à repousser les coups entrants. Bien que pratique dans les conflits violents et rapidement et facilement appliquée, elle est souvent impossible à utiliser au cours d'une bataille. Elle est plus efficace lorsqu'elle est appliquée sur des structures défensives. Elle doit constamment être ré-appliquée pour être efficace. </td><td> <center>[size=16]Ininflammable[/size]</center> La rune Ininflammable, également connu sous le nom de rune pyr, est une rune pour ignifugation, ce qui rend l'utilisateur ou l'objet marqué invulnérable au feu, dans une certaine mesure. Comme elle perd son effet quand elle maîtrise le feu, elle pâlie jusqu'à complète disparition. </td></tr><tr><td> <center>[size=16]Invisible[/size]</center> blablabla</td><td> <center>[size=16]Visible[/size]</center> blablabla</td><td> <center>[size=16]Protection[/size]</center> blablabla</td></tr></table></div></div></div>

et la partie du css qui concerne la partie;;

Code:: /*systeme d'hover pour les runes*/ .img { position: absolute; display: block; margin-top: -18px; width: 150px; height: 150px; overflow: auto; background-color: #191817; background-size: 150px 150px font-size: 10px; color: #9c9c9c; text-align: justify; padding: 5px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); } .img:hover { background-size: 150px 150pxopacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=80); } .mnp2{ background-color:#141512; box-shadow:0px 0px 7px #121212; width:470px; padding:5px; border-top:5px solid #df1223; border-top-left-radius:10px; border-top-right-radius:10px; padding-top:0px;} .bip3{ width:98%; height:150px; font-size:12px; background-color:#1b1c19; overflow:auto; ont-size:10px; text-align:justify; padding:5px; line-height:7.8pt; font-family:questrial; box-shadow:0px 0px 5px #000; text-shadow:1px 1px 1px #222;}

merci encore! votre aide est grandement apprécier ! ♥

par MasDan Jeu 20 Oct 2016 - 6:55

Bonjour Misa*,

À votre CSS, remplacer

Code:: .img:hover { background-size: 150px 150pxopacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=80); }

par

Code:: .img:hover { background-size: 150px 150px; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=80); opacity: 0.8; }

par Neptunia Jeu 20 Oct 2016 - 9:24

Bonjour ^^

misa* a écrit:vue que j'ai au dessus de 50 éléments à lister donc au lieu de passer avec un logiciel de graphisme je cherche un moyen qu'elles ai toutes la bonne grandeur soit 150*150px.

En passant par le CSS, l'image reste toujours la même, seul son affichage diffère.
Une image de 320*320 est 4.5 fois plus grande qu'une autre de 150 sur 150.
4.5 fois plus lourde à charger donc vos pages mettent aussi 4 fois plus de temps à charger ces images.
4.5 fois plus de data consommés sur les abonnements n'incluant pas l'illimité.

Quant au temps consacré à ce sujet, il sera bien au-delà du quadruple du temps passé à redimensionner vos images en lot (en lot = vous définissez le traitement à effectuer à une image tout en l'appliquant à tout un dossier ou ensemble d'images) puis à les héberger. Un logiciel du type de XnView propose cette fonction et peut ainsi traiter des dizaines d'images à la minute.

Bref, tout ça pour dire que je ne vois que des inconvénients au redimensionnement par CSS.

par misa* Ven 21 Oct 2016 - 2:02

Bonjour, bonsoir !

Neptunia;; Donc si je comprends bien je ne peux pas modifier la grosseur de l'image ? parce que le code ne sera pas juste utiliser par le staff du forum, mais autant par mes membres et je sais que je vais avoir des commentaires par rapport au fait que leur images ne cadre pas bien dans le code et ils vont demander qu'on trouve un moyen que les images se redimensionne grâce à un code =/

Je sais comment faire avec la balise

Code:: <img scr="lien de l'image" style="la taille"/>

mais dans le cas ici vue que l'image est en background je suis incapable de modifier =(

MasDan;; j'ai changer et cela ne fonctionne toujours pas ;-; merci beaucoup de ton aide♥

par Neptunia Ven 21 Oct 2016 - 8:55

Non, je ne dis pas que vous ne pouvez pas le faire, mais que vous devriez éviter de le faire systématiquement.

Je connais un hébergeur d'images qui a failli fermer à cause d'un seul site "mal ficelé" qui lui bouffait toute sa bande passante.
Le site en question fonctionnait sur le mode de fiches où chaque fiche commençait par une image, réduite artificiellement à 500 px de large si l'image était plus grande. Comme ceux qui concevaient les fiches ne savaient au début même pas ré-héberger une image, ils n'avaient aucune idée du poids de l'image (parfois 2 mébi-octets). Bon, après tout ce n'était qu'une image par page. Là où ça se compliquait c'est que le site permettait d'afficher des listes thématiques. Et là on avait un aperçu des images au format timbre-poste sans limite de taille de page. Si la recherche renvoyait 200 résultats pour la lettre A, la page affichait 200 images redimensionnées par CSS.

Un code CSS pour redimensionner automatiquement peut se révéler utile pour éviter une déformation des pages. Un exemple qui me vient tout de suite à l'esprit c'est l'avatar lié depuis un autre site. Seulement ça devrait rester un garde-fou et non servir d'alibi aux membres ignorants. Si un certain nombre de membres installe ces images 1920*1080 en guise d'avatar, d'autres vont rapidement ramer à cause du poids des images. Et si vous, avec le PC et la fibre optique, vous ne remarquez rien, vous allez dire aux râleurs qu'ils feraient mieux de nettoyer leur ordi ou investir dans un matériel plus performant.

D'un autre côté, en évitant de redimensionner, les images hors gabarit ressortent immédiatement et même si c'est pas agréable, le problème est attaqué directement à la racine parce que tout le monde le voit et non plus ceux qui ont les connexions ou ordinateurs les moins performants.

Pour conclure, les moteurs de recherche accordent aujourd'hui une place de plus en plus importante au temps de chargement des pages. Ne pas chercher à optimiser ses images, c'est accepter que G****e ou d'autres moteurs vous relèguent en page 36 de leurs résultats de recherche.

par **Lixyr** Ven 21 Oct 2016 - 22:39

Besoin d'aide pour redimensionner les images dans un code en hover 4qhGdLE

Bienvenue sur le forum de support de Forumactif

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :

N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Quel est le lien ou la partie concernée ?

par misa* Sam 22 Oct 2016 - 4:46

Bonjour, Bonsoir,

Donc finalement je vais suivre le conseil de Neptunia et simplement redimensionner les image une à une avec un programme de graphisme et les héberger à nouveau =)

Merci à tout le monde d'avoir répondu à mon appel d'aide ♥

par Neptunia Sam 22 Oct 2016 - 7:23

Re

Neptunia a écrit:Quant au temps consacré à ce sujet, il sera bien au-delà du quadruple du temps passé à redimensionner vos images en lot (en lot = vous définissez le traitement à effectuer à une image tout en l'appliquant à tout un dossier ou ensemble d'images) puis à les héberger. Un logiciel du type de XnView propose cette fonction et peut ainsi traiter des dizaines d'images à la minute.

misa* a écrit:Donc finalement je vais suivre le conseil de Neptunia et simplement redimensionner les image une à une avec un programme de graphisme et les héberger à nouveau =)

Si je disais qu'il était possible de tout redimensionner en une seule opération, ce n'était pas de la science-fiction.
Rien ne vous oblige à procéder image par image.

Quelques tutos avec 3 logiciels différents.
Right

XnView, Redimensionnez en un seul clic un lot de 500 images
Right

Converseen - Redimensionner ou convertir un lot d’images
Right

Redimensionner des images par lot avec Photoshop

Attention toutefois de songer à faire une sauvegarde des images sources.
Vous pouvez aussi sur certains logiciels demander à convertir sous un autre nom/dans un autre dossier plutôt que d'écraser les images (en tout cas XnView le permet, pour les autres je n'ai pas de certitude)

Besoin d'aide pour redimensionner les images dans un code en hover