رسم صورة مع CSS

رسم الصورة -- هذا البرنامج التعليمي سوف تظهر لك فوائد الخرائط والصور لماذا يجب تطبيقه عند بناء المواقع. وسوف تتخذ لكم من خلال كيف ولماذا ، بالاضافة الى رسم الخرائط تظهر لك صورة في العمل. ويهدف هذا البرنامج التعليمي في رسم صورة للمبتدئين وسوف يتطلب فقط أن تعرف أساسيات HTML و CSS.

لمشاهدة العرض التوضيحي رسم صورة في العمل فوق هنا

لماذا استخدام خريطة صورة؟

النظر في الصورة التالية. لاحظ أنه في حقيقة الأمر 2 الصور التي تم وضعها في نفس الملف. ويمكن تحقيق ذلك باستخدام معظم برامج التصوير الجيدة مثل فوتوشوب.

هناك نوعان من الفوائد الرئيسية لرسم خرائط الصور. أول قانون للنظافة يجري ، وهو أمر جميع مصممي المواقع الإلكترونية وينبغي التطلع إلى تحقيق ، والثاني هو صورة تعيينات قدرة فريدة للتغلب على القضايا التي تثيرها الدول الزر.

عند استخدام الصور التمديد سوف تحتاج لتحميل أكثر من 1 صورة فقط ، وسوف تحتاج أيضا إلى عرض هذه الدولة عندما تتغير الصورة ، وهذا يعني أن المتصفح سوف تحتاج إلى تقديم الصورة الثانية التحميل ، وبالتالي فإن الانتقال لن تكون سلاسة المرة الأولى التي يتم عرضه. مخطط صورة باستخدام توقف هذه المشكلة تماما ، لأنه عندما يتم تحميل الصورة الأصلية حتى الثانية. لا يوجد أي تأخير ، انها بسيطة على هذا النحو.

كيفية استخدام خريطة صورة

دعونا نعتبر أن أريد أن ترغب في استخدام رمز أعلاه كصورة التمديد. هذا سوف يكون دولتين : الرمادي عند تحميل الصفحة في البداية ؛ الملونة ثم عندما يقوم المستخدم تحوم فوقها. للقيام بذلك سوف نحتاج إلى استخدام بعض بسيطة التصميم المغلق ، فإن رمز نريد أن ننظر بشيء من هذا القبيل.

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 ، يمكننا خلق وسيلة سريعة وقوية جدا إلى الصور التمديد. لمشاهدة العرض التوضيحي في العمل فوق هنا .