ABA


"חיתוך תמונה מתוך ''מפת תמונות'' בCSS"
גירסת הדפסה        
קבוצות דיון פיתוח, תיכנות ובניית אתרים נושא #20832 מנהל    סגן המנהל    מפקח   Winner    צל"ש   מומחה  
אשכול מספר 20832
sza  לחץ כאן להצגת דירוג המשתמש
חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק
   23:17   07.08.14   
אל הפורום  
  חיתוך תמונה מתוך ''מפת תמונות'' בCSS  
 

אני רואה אתרים שמשתמשים בזה ותוהה איך זה עובד?

הרעיון הוא שיש קובץ תמונה אחד שמכיל בתוכו "מפת" תמונות.
דוגמא לרעיון הכללי:
http://www.redsauce.com/wp-content/uploads/2010/12/the_noun_project.jpg

עכשיו בCSS מוצגת רק תמונה מסויימת. איך זה עובד? למה משתמשים בזה? לחסוך קריאות לשרת?


צחי.

http://webleader.co.il/websites/rotter/amionline.php#.jpg


                                שתף        
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

  האשכול     מחבר     תאריך כתיבה     מספר  
  כן, גם גוגל משתמשים בזה meni181818 07.08.14 23:32 1
     לא מבין, הוא הגדיר X ו Y, איך הוא מגדיר לאיזה את הגובה? sza  07.08.14 23:47 2
         טעות sza  07.08.14 23:53 3

       
meni181818 לחץ כאן להצגת דירוג המשתמש
חבר מתאריך 12.12.13
1032 הודעות, 1 פידבק
   23:32   07.08.14   
אל הפורום  
  1. כן, גם גוגל משתמשים בזה  
בתגובה להודעה מספר 0
 
   ע"י שימוש ב-background-position
http://www.w3schools.com/cssref/pr_background-position.asp
מקבל ערכים X, Y
למשל לחצן הריפרש ב-Gmail:

background: no-repeat url(//ssl.gstatic.com/mail/sprites/general_black-16bf964ab5b51c4b7462e4429bfa7fe8.png) 0 -83px;

לדעתי זה לא מומלץ, כי אם הגודל של האלמנטים שלך משתנה, אתה צריך כל פעם מחדש להתאים את המיקום.

http://www.files.org.il/BRPortalStorage/a/1/40/71/34-3Y373LGhbD.gif


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
sza  לחץ כאן להצגת דירוג המשתמש
חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק
   23:47   07.08.14   
אל הפורום  
  2. לא מבין, הוא הגדיר X ו Y, איך הוא מגדיר לאיזה את הגובה?  
בתגובה להודעה מספר 1
 

(הרי זה לא חייב להיות ריבוע, זה יכול להיות גם מלבן)
X ו Y נותן נקודה שממנה התמונה מתחילה, איך הוא יודע כמה צריך "לרדת" בציר Y עד לסוף התמונה?


צחי.

http://webleader.co.il/websites/rotter/amionline.php#.jpg


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
sza  לחץ כאן להצגת דירוג המשתמש
חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק
   23:53   07.08.14   
אל הפורום  
  3. טעות  
בתגובה להודעה מספר 2
 


צחי.

http://webleader.co.il/websites/rotter/amionline.php#.jpg


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

תגובה מהירה  למכתב מספר: 
 
___________________________________________________________________

___________________________________________________________________
למנהלים:  נעל | תייק בארכיון | מחק | העבר לפורום אחר | מחק תגובות | עגן אשכול
       



© כל הזכויות שמורות ל-רוטר.נט בע"מ rotter.net