Posted on November 16th, 2007
34909 views
CSS Based Image Slider
Lets start off by opening your favorite text editor. (I'll be using MS NotePad) Now lets set up a basic HTML document: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The CSS Alright now that we have the basic HTML set up, it time to add the CSS. The rest of the HTML will be added later. Lets start by changing the background color with this bit of code here: body{ I chose a dark grey. Now we'll set up a container to holder the gallery: #gallery{ By putting the width and height to auto we allow for any size image: Now we're going to add a nice border to our images so that they don't appear to be one. #gallery img{ Now the code for how the image looks before its hovered over: a#pics img{ This makes the image 35px by 600px. I used a height of 600 since that is how tall my images happen to be. Now for the hover state: a:hover#pics img{ This allows the image to be viewed in its full size. And thats it for the CSS. Added to the HTML we set up earlier you should have: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Setting up the HTML Now that all the CSS is ready we have to set up the HTML to read the CSS. Place this code between the bdoy tags: <div id="gallery"> Now a run through of the code. First we set up the container that holds the gallery with the <div id="gallery"> tag. Next we set up a link to allow for a hover state with the <a id="pics"> tag. Then we put in the image into the page using the <img> tag. Then we closed all the tags. So now you should have:
At this point its a very simple looking slider but with a bit of work it can look really good, just go wild until you get it how you like it. Files Used in Tutorial: File Download: CSS Slider |