מיפוי תמונה עם CSS

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

כדי לראות הדגמה של מיפוי התמונה לחץ על הפעולה כאן

למה להשתמש בתמונה מפה?

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

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

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

כיצד להשתמש תמונה מפה

הבה נבחן את זה אני רוצה רוצה להשתמש בסמל מעל כתמונת הגלגול. זה יהיה שתי מדינות: greyed כאשר הדף נטען בתחילה; מכן צבעוניים כאשר משתמשים מרחף מעליו. לשם כך נצטרך להשתמש בחלק סטיילינג CSS פשוט, את הקוד לא רוצה להיראות משהו כזה.

body{
font-size: 12pt;
font-family: Arial;
}
#links {
padding:10px;
}
a.bookmark {
background: url('/images/delicious.gif') left no-repeat;
background-position: 0px -17px;
text-decoration: none;
pointer:cursor;
padding-left: 18px;
margin-left:5px;
}
a.bookmark:hover {
background: url('images/delicious.gif') left no-repeat;
background-position: 0px 1px;
text-decoration: none;
padding-left: 18px;
margin-left:5px;
pointer:cursor;
}


כפי שאתה יכול לראות תמונה זהה מוחל הן מדינות סגנון, כל שאנו עושים כדי לשנות את המצב היא לשנות את מיקום הרקע, כך כאשר המשתמש מרחף מעל הקישור השינויים המדינה, אבל כל זה הוא בעצם שינוי המיקום של תמונת הרקע בדף. את היופי האמיתי של זה בפועל כמות קטנה של HTML אתה דורש על הדף, ברגע שעשית את זה. לדוגמה ה-HTML בפועל נראה כמו זה שלנו.

< a class = "bookmark" href = "#" >Delicious</ a >


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