Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2791 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Découper une image avec CSS

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Découper une image avec CSS

n°1544045
haazheel
Posté le 17-04-2007 à 21:37:41  profilanswer
 

Bonjour à tous,
 
J'ai en image une fenêtre d'un logiciel, que je voudrais documenter en détail (chacun des boutons, menus, etc...)
 
Pour l'instant, j'ai découpé dans l'image originale tous les éléments que je veux documenter, et je les ai tous enregistrés en images individuelles, que j'insère normalement dans mon document.
 
Je me suis demandé tout à l'heure si c'était une solution viable que de ne garder que la seule image de base, et de créer autant de <div> qu'il y a d'éléments à documenter, en changeant pour chaque <div> les attributs background-position, width, et height pour n'avoir que la portion d'image voulue.
 
Par exemple:
 

Code :
  1. <div style="background-image: url('/FR/Sports/BB/Support/Images/TVideoAffich.png'); background-position: -190px -54px; width: 31px; height: 22px;"></div><p>Recule d'une seconde</p></div>


 
Du coup je gagne en espace disque, puisque je n'ai qu'une seule image.
 
Je ne suis pas sûr, mais est-ce que du coup je gagne en rapidité d'affichage aussi, la même image étant chargée une seule fois seulement?
 
Merci d'avance
 
Mike

mood
Publicité
Posté le 17-04-2007 à 21:37:41  profilanswer
 

n°1544050
dartyduck
n00b AttitudE
Posté le 17-04-2007 à 22:02:45  profilanswer
 

1- tu ne gagnes pas en espace disque car tu auras 1 fois 100ko au lieu de 4 fois 25ko (par exemple). et qu'il y ait une ou plusieurs images, une fois chargées elles ne seront plus à charger, car stockées dans Temporary Internet Files.
2- Une seule image peut etre divisée par des div (des petits div, ou li, dans un grand div.)
 
3- C'est quoi ce code des années 90 ?? tu connais xhtml et CSS ?? Le style ne se met pas au milieu du code html, mais dans un fichier css à part ! ces liens www.siteduzero.com et www.alsacreations.com seront tes amis ces prochaines semaines, si toutefois tu as envie de te mettre à jour en programmation web !


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
n°1544053
haazheel
Posté le 17-04-2007 à 22:13:19  profilanswer
 

dartyduck a écrit :


3- C'est quoi ce code des années 90 ?? tu connais xhtml et CSS ?? Le style ne se met pas au milieu du code html, mais dans un fichier css à part ! ces liens www.siteduzero.com et www.alsacreations.com seront tes amis ces prochaines semaines, si toutefois tu as envie de te mettre à jour en programmation web !


 
C'est quoi cette remarque alors que tu ne sais rien du contexte?
 
J'ai une centaine de ces images à afficher... C'est un script PHP qui gère ça, et c'est plus simple d'insérer le code directement dans la balise que de créer une centaine de classes différentes dans le CSS, d'autant plus que ces images peuvent évoluer...
 
A bon entendeur...

n°1544055
haazheel
Posté le 17-04-2007 à 22:14:58  profilanswer
 

dartyduck a écrit :

1- tu ne gagnes pas en espace disque car tu auras 1 fois 100ko au lieu de 4 fois 25ko (par exemple). et qu'il y ait une ou plusieurs images, une fois chargées elles ne seront plus à charger, car stockées dans Temporary Internet Files.
2- Une seule image peut etre divisée par des div (des petits div, ou li, dans un grand div.)


 
Je vais quand même répondre :  
 
1 - si je gagne en espace disque, puisque au lieu de charger la grande image, plus toutes les petites, je n'aurai que la grande à charger (j'avoue ne pas avoir dit cela dans mon post original)
2 - C'est ce que je viens de faire plus haut, non?

n°1544056
dartyduck
n00b AttitudE
Posté le 17-04-2007 à 22:18:09  profilanswer
 

mais je ne te contredisais pas, juste je confirmais. me suis mal exprimé, il est vrai.
Pour ton probleme d'image, je pense qu'un grande image sur laquelle tu greffes des petites (ou juste des div avec contour) en absolute serait une bonne idée en effet.


Message édité par dartyduck le 17-04-2007 à 22:19:01

---------------
Nikon D7000 + 18-105VR + 35mm 1.8

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Découper une image avec CSS

 

Sujets relatifs
Problème dimension imageImage en fond d'un JButton
[résolu] Problème d'image de fond avec Firefox[CSS] Image de fond se repetant (repeat-y)
mettre une image sur une videoTransformer une partie d'une image en bouton submit
Comment faire ça (image dans le post) ?VBA - Afficher image issue xls dans userform - Résolu.
mettre en gif dans un site web avec image ready 
Plus de sujets relatifs à : Découper une image avec CSS


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR