Sliced Mouseovers ~ Hard Way
First, this is the basic code of mouseovers (overlaps). This code works on EVERY browser, so that's why I use it. There is also a CSS mouseover system and everything, but this is a bit more complicated but really clear. This goes within the "HEAD" of your html, which is what is shown here. The original coding for this, I learned from LissaExplains. I didn't make the code, but in all my overlaps tutorials I use it, this overlaps tutorial just basically shows very easy steps to do it.Okay, so as you see the coding above, you basically need the image width/height of the overlaps that go when you put your mouse OVER them (on_image#.ext) and those that appear when your mouse is NOT over them (off_image#.ext). If you want to add more overlaps, you can just use the same coding. So for example, the coding above is for four overlaps. But, for 5 overlaps you could just copy the same thing and paste it. So to add an overlap, just add an img4_on & off. Like shown below.
So you got the basic head part of overlaps, now to code the actual overlaps into the page, you just do this in the body area. This is only for Img0 (the first overlap) and of course for the rest it would be the same but say img1, img2 and so on.:
To make this tutorial easier, I'll show you step by step what I did with one of my layouts, Since our Childhood
So here is the layout, opened in Adobe. (Without the overlaps I want to put on shown.)
Okay, so now I want you to find the slice tool on the sidebar and select it.
Okay, so if you don't know what slicing is, I'll tell you right now. Slicing is cutting up an image so that it would take less time to load (it would be easier to load a couple images than one HUGE image at one time) as well as prevent people from stealing your layout (well sometimes). In my case, it's a totally efficient way to code :D. Now, what I'm going to do is APPLY my overlaps on my image. Meaning, what I want to image to look like if I had a giant mouse that went over all the overlaps at once. :P. So this is how it looks now (look at the flower, thats where my links are going to be see... In my case, I just added text, and highlighted one the front side of the flower (looks pretty huh :P)
Using the slicing tool, draw the slices around the OVERLAPS(and if you have an iframe layout, cut around the iframe, it will save you SO much time :P). MAKE SURE none of the slices overlap. That will not work at all and just mess up everything. As you can see from this layout, cutting squared overlaps doesn't mean that the overlaps have to be squared, just that they are wide enough apart to allow you to cut around in rectangles/squares. SO as you can see, your overlaps should be in DIFFERENT layers so that you can just easily switch back and forth between layout w/ overlap and w/o. Here is how my layout looks sliced with overlaps.
And zoomed INTO the overlap section (well, actual size).
Got it? Now go to File-->Save For Web. Then do CTRL+A and set the properties for the layout (JPG etc. -- this is the place where you also crush images :P). Click 'Save' and when it says "Save as Type" put HTML and images. name this one (WITH overlaps applied) whatever you want, but name it something you can tell apart. like in my case, Ill just put childhood2 that means, its the overlap one, you can also put _on etc. Just know which one is the overlapping files.
Okay, now take off the layers with the overlaps (you don't have to delete them just take off the eyes on the side) so it looks like image 1 in the tutorial. DO NOT change the slices. They should be the same. Go to File-->Save for Web and set the same properties. Save as before. Except save as a different name, for me I just saved it as "childhood" meaning I know it is the non-overlap layout. If it says "replace spacer.gif" or wahtever, click yes or no, it doesn't matter since the slices are the same and everything is the same.
Yay you are done! Now is the annoying part. Go the folder you saved everything in and see the html file that was created for the NON overlap layout. In my case 'childhood.html'. This is what my coding says.
Now it looks like this:
Okay, so now that you got all that, what I want you to do is open the HTML file (childhood.html) in my case) and put your mouse over the image you know is the overlap and right-click 'properties'. I use Mozilla and this is what I see (IE is virtually the same thing). So as you can see, the first overlap is childhood_06.jpg.
Now go to the part of the coding in the header with 'img0'and paste the width height for the off images, AND (get this :P) since you know what the off image is, "childhood_06.jpg" that means, since you named the overlapping layout with the same slices, the CODING and image names are the same. That means paste the same width/height for the onmouseover, and the name of the image is simply "childhood2_06.jpg" Easy ne?
Easy ne? Now just go to the tables underneath, and find the td where "childhood_06.jpg" is. Paste the second code in the body (this is img0 so it will have img0 in it). This is what that section of the code looks like (generated by Adobe)
I want you to notice something, the image is ALREADY defined (this is the off image) as well as the width and height. So no problemo there right? you just need to paste this under the td colspan:
and add this right after the img src and height value. You don't need the title value, unless you want to, which is why I didn't add it. Of course you can just change the alt to title and add it. DON't forget to take off the borders, it's a common mistake ^_^:
So the full code is this:
WOOT now you are done! You have added the overlap! It's really simple right? It takes me about 10-15 minutes to code 4 overlaps, cause it's pretty simple and just copying and pasting. So just do this with the rest of the coding. for the overlaps. For your practice, I have zipped all the childhood files (1 and 2) so using this tutorial, see if you can actually code all 4 overlaps yourself :D! Okay?
click here to download the Childhood Zip
