Get Slick with MooTools Kwicks

Step 1: Create Images

You’ll need an image for kwick, obviously. Make them all the same width. 

Sample Width & Height : 285 pixels, Height: 143 pixels.

Step 2: HTML

<div id="kwick"> <ul class="kwicks"> <li><a class="kwick john" href="http://en.wikipedia.org/wiki/John_lennon" title="John Lennon"><span>John Lennon</span></a></li> <li><a class="kwick paul" href="http://en.wikipedia.org/wiki/Paul_mccartney" title="Paul McCartney"><span>Paul McCartney</span></a></li> <li><a class="kwick george" href="http://en.wikipedia.org/wiki/George_harrison" title="George Harrison"><span>George Harrison</span></a></li> <li><a class="kwick ringo" href="http://en.wikipedia.org/wiki/Ringo_starr" title="Ringo Starr"><span>Ringo Starr</span></a></li> </ul> </div>

Step 3: CSS

#kwick { width:590px; } #kwick .kwicks  { height:143px; list-style-type:none; margin:0; padding:0; } #kwick li  { float:left; } #kwick .kwick  { display:block; cursor:pointer; overflow:hidden; height:143px;width:134px;} #kwick .kwick span  { display:none; } #kwick .john  { background:url(kwicks/john.gif) no-repeat; } #kwick .paul  { background:url(kwicks/paul.gif) no-repeat; } #kwick .george  { background:url(kwicks/george.gif) no-repeat; } #kwick .ringo  { background:url(kwicks/ringo.gif) no-repeat; }

Step 4: The MooTools 1.2 JavaScript

  Click Here to Download  

Example