Everything For Web(CSS): CSS Sprites

วันนี้เอาบทความเรื่อง CSS Sprites แบบที่ใช้ JavaScript เข้ามาช่วย ปกติเราเห็นเมนูที่ใช้ Flash แล้วก็อยากนำมาใช้ในงานของเราช่ายม่ะ แต่นับวันเทคโนโลยีก็พัฒนากันเยอะมากขึ้น อะไรก็เริ่มง่ายขึ้น มีตัวเลือกให้คนที่อยากใช้งานได้เลือกมากขึ้น ตัวอย่าง css อันนี้ก็เป็นตัวเลือกอีกทางหนึ่งที่เราจะหลีกเลี่ยงการใช้ Flash บนเว็บของเรา

พอดีไม่มีเวลามานั่งไล่ CSS ว่าดีหรือเปล่านะค่ะ ใครเอาไปลองแล้วถ้าติดปัญหาอะไรก็บอกกันด้วยแล้วกันนะค่ะ
ขั้นตอน 1. เราต้องตัดรูปเมนูที่เราอยากได้ก่อน แล้วแต่ความต้องการของผู้ใช้นะค่ะ หรือจะก๊อปไป modify ก็ได้ ไม่ว่ากัน

ขั้นตอน 2. มาเขียน code html กันดีกว่า

<ul class="nav current-about">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="services"><a href="#">Services</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>

ขั้นตอน 3. มาดูเรื่อง css กันดีกว่า

.nav {
     width: 401px;
     height: 48px;
     background: url(../blue-nav.gif) no-repeat;
     position: absolute;
     top: 100px;
     left: 100px;
}
.nav li {
     display: inline;
}
.nav li a:link, .nav li a:visited {
     position: absolute;
     top: 0;
     height: 48px;
     text-indent: -9000px;
     overflow: hidden;
     z-index: 10;
}
.nav .home a:link, .nav .home a:visited {
     left: 23px;
     width: 76px;
}
.nav .home a:hover, .nav .home a:focus {
     background: url(../blue-nav.gif) no-repeat -23px -49px;
}
.nav .home a:active {
     background: url(../blue-nav.gif) no-repeat -23px -98px;
}
.current-home .home a:link, .current-home .home a:visited {
     background: url(../blue-nav.gif) no-repeat -23px -147px;
     cursor: default;
}
.nav-home,.nav-home-click {
     position: absolute;
     top: 0;
     left: 23px;
     width: 76px;
     height: 48px;
     background: url(../blue-nav.gif) no-repeat -23px -49px;
}
.nav-home-click {
     background: url(../blue-nav.gif) no-repeat -23px -98px;
}
.nav .about a:link, .nav .about a:visited {
     left: 100px;
     width: 82px;
}
.nav .about a:hover, .nav .about a:focus {
     background: url(../blue-nav.gif) no-repeat -100px -49px;
}
.nav .about a:active {
     background: url(../blue-nav.gif) no-repeat -100px -98px;
}
.current-about .about a:link, .current-about .about a:visited {
     background: url(../blue-nav.gif) no-repeat -100px -147px;
     cursor: default;
}
.nav-about, .nav-about-click {
     position: absolute;
     top: 0;
     left: 100px;
     width: 82px;
     height: 48px;
     background: url(../blue-nav.gif) no-repeat -100px -49px;
}
.nav-about-click {
     background: url(../blue-nav.gif) no-repeat -100px -98px;
}
.nav .services a:link, .nav .services a:visited {
     left: 183px;
     width: 97px;
}
.nav .services a:hover, .nav .services a:focus {
     background: url(../blue-nav.gif) no-repeat -183px -49px;
}
.nav .services a:active {
     background: url(../blue-nav.gif) no-repeat -183px -98px;
}
.current-services .services a:link, .current-services .services a:visited {
     background: url(../blue-nav.gif) no-repeat -183px -147px;
cursor: default;
}
.nav-services, .nav-services-click {
     position: absolute;
     top: 0;
     left: 183px;
     width: 97px;
     height: 48px;
     background: url(../blue-nav.gif) no-repeat -183px -49px;
}
.nav-services-click {
     background: url(../blue-nav.gif) no-repeat -183px -98px;
}
.nav .contact a:link, .nav .contact a:visited {
     left: 281px;
     width: 97px;
}
.nav .contact a:hover, .nav .contact a:focus {
     background: url(../blue-nav.gif) no-repeat -281px -49px;
}
.nav .contact a:active {
     background: url(../blue-nav.gif) no-repeat -281px -98px;
}
.current-contact .contact a:link, .current-contact .contact a:visited {
     background: url(../blue-nav.gif) no-repeat -281px -147px;
     cursor: default;
}
.nav-contact, .nav-contact-click {
     position: absolute;
     top: 0;
     left: 281px;
     width: 97px;
     height: 48px;
     background: url(../blue-nav.gif) no-repeat -281px -49px;
}
.nav-contact-click {
     background: url(../blue-nav.gif) no-repeat -281px -98px;
}

ขั้นตอน 4. นำ script js ไปว่างไว้ข้างล่าง Tag Title

<script type="text/javascript">

     $(document).ready(function(){

     // remove link background images since we're re-doing the hover interaction below

     // (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)

     // we also want to only remove the image on non-selected nav items, so this is a bit more complicated

     $(".nav").children("li").each(function() {

          var current = "nav current-" + ($(this).attr("class"));

          var parentClass = $(".nav").attr("class");

               if (parentClass != current) {

                    $(this).children("a").css({backgroundImage:"none"});

          }

});

     // สร้าง events สำหรับ nav ของแต่ละตัว

     attachNavEvents(".nav", "home");

     attachNavEvents(".nav", "about");

     attachNavEvents(".nav", "services");

     attachNavEvents(".nav", "contact");

function attachNavEvents(parent, myClass) {

     $(parent + " ." + myClass).mouseover(function() {

          $(this).append('<div class="nav-' + myClass + '"></div>');

          $("div.nav-" + myClass).css({display:"none"}).fadeIn(200); //คุณสามารถปรับ Fade-In Fade-Out ได้

          }).mouseout(function() {

          // fade out & destroy pseudo-link

          $("div.nav-" + myClass).fadeOut(200, function() {

          $(this).remove();

          });

     });
}

});

</script>