ساخت Rollover Images با CSS
۴ پاسخ
دی ۱۴م, ۱۳۸۷
یکی از کارهایی که میتوان توسط CSS انجام داد ساخت Rollover Images است، که در این روش تنها و تنها از CSS استفاده میشود. برای این کار شما باید در یک تصویر هم حالت Normal و هم حالت Over را قرار دهید، بدین ترتیب شما با استفاده از قابلیت Background Position میتوان این افکت را ایجاد کرد. در این آموزش من نحوه ساخت یک Navigation را توسط این تکنیک به شما آموزش میدم. اگر با نحوه ساخت Navigation با CSS آشنایی ندارید میتونید در این آموزش یاد بگیرید.
ساخت تصویر Navigation
ابتدا در برنامه گرافیکی دلخواه خود Navigation را بسازید، بطوریکه همانطور که قبلا گفتم هر دو حالت Normal و Over را داشته باشد، به شکل زیر دقت کنید :
همانطور که گفتم از ویژگی Background Position استفاده میکنیم، این ویژگی دو مقدار میگیرد که مقدار اول مشخص کننده x و مقدار دوم مشخص کننده y هست. من شکل بالا رو بدین صورت بخش بندی کردم، مقادیر مشخص شده توسط رنگ قرمر موقعیت هر یک از قسمتها به صورت x و y هست، برای مثال نقطه 0و0 (یا همان top, left) قسمت خانه در حالت over در موقعیت –300 و –75 پیکسل تصویر اصلی قرار دارد.
کد CSS
کد CSS برای این کار خیلی راحت هست، کافیه شما منطق نکته بالا رو درک کرده باشید، شما یک تصویر کلی دارید که توسط Background Position و دادن موقعیتهای مختلف این تصویر رو به اصطلاح به قسمتهای مختلف تبدیل میکنید، ولی در اصل همان تصویر کلی است ولی شما قسمت محدودی از این تصویر رو استفاده میکنید. کد HTML بدین صورت هست :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Roll Over Images with CSS :: Datis Design Weblog</title>
<link rel="stylesheet" href="css/main.css" media="screen" type="text/css">
</head>
<body>
<div id="container">
<ul id="main_nav">
<li id="home"><a title="خانه" href="#">خانه</a></li>
<li id="about"><a title="درباره" href="#">درباره</a></li>
<li id="contact"><a title="تماس" href="#">تماس</a></li>
</ul>
</div>
</body>
</html>
و کد CSS هم بدین ترتیب هست :
@charset "utf-8";
/* CSS Document */
ul#main_nav {
width: 450px;
height: 150px;
margin: 0 auto;
}
ul#main_nav li {
display: inline;
}
ul#main_nav li a {
height: 74px;
float: right;
text-indent: -10000px;
}
ul#main_nav li#home a {
width:150px;
background: url(../images/nav.jpg) no-repeat -300px 0;
}
ul#main_nav li#home a:hover {
background-position:-300px -75px;
}
ul#main_nav li#about a {
width:150px;
background: url(../images/nav.jpg) no-repeat -150px 0;
}
ul#main_nav li#about a:hover {
background-position:-150px -75px;
}
ul#main_nav li#contact a {
width:150px;
background: url(../images/nav.jpg) no-repeat 0 0;
}
ul#main_nav li#contact a:hover {
background-position:0 -75px;
}
اگه به کد فوق دقت کنید در قسمت ul#main_nav li a ابتدا ارتفاع هر لینک رو مشخص کردیم چون کل تصویر ما 150 پیکسل ارتفاع دارد بنابراین نصف آن حالت Normal میشود که در این قسمت مشخص شده است. برای هر 3 لینک من دو حالت normal و hover را تعریف کردم. برای مثال ul#main_nav li#home a برای قسمت normal لینک خانه تعریف شده است، در تصویر اصلی هر یک از قسمتهای navigation 150 پیکسل عرض دارند که در این قسمت تعریف شده است، در خط زیر آن تصویر اصلی را قرار دادیم و شروع نقطه را در -300 پیکسل گذاشیتم (به شکل دوم دقت کنید)
برای قسمت hover هم فقط کافیست که به مقدار 75 پیکسل به پایین تصویر اصلی بیاییم که میشود -75 پیکسل. برای سایر لینکها هم از همین روش استفاده کردم.
همونطور که دیدید خیلی راحت میشه با CSS یک navigation همراه با rollover state درست کرد، حتی شما میتونید توسط این روش down state هم به تصویر اصلی اضافه کنید و از آن در منوی خود بهره ببرید. من برای این آموزش از تصویر ساده ای استفاده کردم ولی شما میتونید منوهای خیلی شیکتری بسازید. نکته خیلی خوب در این روش بارگذاری کل تصویر در یک مرحله هست. موفق باشید
آره خود منم اولش گیج بودم ولی وقتی یاد گرفتم خیلی بهم کمک کرد روش خیلی خوبیه
سلام… فقط خواستم تشکر کنم از این منوی پوسته قبلی وبلاگم زیاد سر در نمی آوردم… حالا فهمدیم چی بود :دی
من با اینترنت اکسپلورر ۷ ، اپرا ، فایرفاکس ۳ تست کردم جواب داد. البته رو اینترنت اکسپلورر ۶ هم امتحان کردم جواب داد ولی این نسخه شبیه سازی شده بود ولی فکر کنم جواب بده
آیا این روش در تمام مرورگر ها یکسان سازی شده؟؟؟؟
تو همشون جواب می ده؟