Découper une image avec CSS

Découper une image avec CSS - HTML/CSS - Programmation

Marsh Posté le 17-04-2007 à 21:37:41    

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

Reply

Marsh Posté le 17-04-2007 à 21:37:41   

Reply

Marsh Posté le 17-04-2007 à 22:02:45    

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
Reply

Marsh Posté le 17-04-2007 à 22:13:19    

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...

Reply

Marsh Posté le 17-04-2007 à 22:14:58    

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?

Reply

Marsh Posté le 17-04-2007 à 22:18:09    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed