Fist off you need to head over to Dynamic Drive and download the files that you need Featured Content Slider v2.4.

Seconded you need to ether make your own transparent PNG images or you can go here and use the images I used for this project.

See a live demo

Now lets quick look at the stock CSS code.

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
border-bottom-width: 6px;
width: 400px; /*width of featured content slider*/
height: 250px;
}

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider’s inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
width: 400px; /*Width of pagination DIV. Total width should equal slider’s outer width (400+10+10=420)*/
text-align: right;
background-color: navy;
padding: 5px 10px;
}

.pagination a{
padding: 0 5px;
text-decoration: none;
color: #00007D;
background: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}

To add a transparent border around the content slider you can do this. Note: I made the featured content slider smaller for this project.

Remove this:
border: 10px solid navy;

Add this:
background: url(/images/transpBlue10.png) repeat;
padding:2px

So the code should look like this:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
background: url(/images/transpBlue10.png) repeat;
border-bottom-width: 6px;
width: 335px; /*width of featured content slider*/
height: 200px;
padding:2px
}

Next step is to edit the content area.

You will need to add this:
border: 1px solid #DDD;
margin: 4px 0 0 5px;
padding: 2px;

So the code will look like this:

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
margin: 4px 0 0 5px;
padding: 2px;
background: #FFF;
border: 1px solid #DDD;
width: 322px; /*width of content DIVs within slider. Total width should equal slider’s inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

Now we will edit the look of the pagination DIV.

Remove this:
background-color: navy;
width: 400px;

Add this:
width: 419px;
background: url(/images/transpBlue10.png) repeat;

So the code will look like this:

.pagination{
width: 319px; /*Width of pagination DIV. Total width should equal slider’s outer width (400+10+10=420)*/
text-align: right;
background: url(/images/transpBlue10.png) repeat;
padding: 5px 10px;
}

Almost done! The last step is adding a effect to the pagination links.

Remove this:
color: #00007D;
background: white;

Add this:
color: #FFF;
background: url(/images/transpBlue25.png) repeat;

So the code will look like this:

.pagination a{
padding: 0 5px;
text-decoration: none;
color: #FFF;
background: url(/images/transpBlue25.png) repeat;
}

Finish it off with a hover effect.

Remove this:
color: #000;
background-color: #FEE496;

Add this:
color: #EEE;
background: url(/images/transpBlue75.png) repeat;

So the code will look like this:

.pagination a:hover, .pagination a.selected{
color: #EEE;
background: url(/images/transpBlue75.png) repeat;
}

Here is the CSS file:
contentslider.css

Here are the PNGs from this project.

After:…

To install the DHTML tooltip effect to your site just follow these simple instructions

http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

To add our transparent image to the tooltips just use the CSS below

Dark colored sites

#dhtmltooltip{
background: url(/images/dark.png) repeat;
color: #FFF;
position: absolute;
width: 150px;
border: 1px solid black;
padding: 2px;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

Light colored sites

#dhtmltooltip{
background: url(/images/light.png) repeat;
color: #111;
position: absolute;
width: 150px;
border: 1px solid black;
padding: 2px;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

Now for the images Just right click and save as

Dark.PNG

Light.PNG

Please let me know if you have any trouble, I will try my best to help out.

Here are 5 of my favorites from his site.

imgPress-X

distance and perception

autumn II

stippled memories

theories of mind