Hover Layer

To tell you the truth, I don't know the name of this technique, so I made up a name. If you know, please email me and tell me!

Okay, for this tutorial you'll need an image editing program. I'm using Photoshop 6 for this tutorial. Sorry, but I haven't made a layout like this in Paint Shop Pro, so I'm using what I know. You can probably figure out how to do it on your own in PSP though.

First, make a layout in your program and save it as a background. Like so:

Now, select the area that you want to be the hover and crop it. Then turn off the visibility of the background.

Save what you have as a transparent gif, now we get into coding! This layout will consist soley of layers, you'll need to know how to work with them and how to position them properly.

First, make a layer that will hold your background.

<div id="Layer1" style="position:absolute; width:302px; height:244px; z-index:1; left: 0; top: 0;"><img src="bg.jpg" width="302" height="244"></div>

Now, make a layer for your content. Make sure it's scrollable! Also, add some content. ;)

<div id="Layer2" style="position:absolute; width:295px; height:238px; z-index:2; left: 4px; top: 3px; overflow: auto;">

Add some content here.


Now, add your layer that will contain your transparent gif. Make sure to position is correctly!

<div id="Layer3" style="position:absolute; width:302px; height:46px; z-index:3; left: 0px; top: 198px;"><img src="hover.gif" width="302" height="46"></div>

Now, that should be about it. I must stress that you not try to position your layout in the center of the page using layers, a frameset is a bit wiser. Anyway, click here to see how the finished layout works.
 • Main/Updates
 • Domain
 • Current Layout
 • Past Layouts
 • Contact
 • Links
 • Credits
 • Terms of Usage
 • Layout Guide
 • Layouts
 • Avatars
 • Abstract Art
 • Tutorials
 • PNG's
Kamui [Tsubasa Reservoir Chronicle] Subaru [X] Yuuko [XXXHOLiC]
2003 - 2012 Amber-Nights.net