|
|
In response to requests on coding interfaces, I have tried to come up with as simple an explanation, or 'show and tell', more accurately, as possible. Simple though it is, you still need a good understanding of html for this to be of any actual use to you. You need to be able to turn your graphics into slices and html tables in order to do any of the swap image or mouseover stuff effectively. I do not think I could write an actual tutorial on the subject of Javascript, I still consider myself a student in this area. I just manipulate, pervert, and twist scripts and stuff that I find to my liking. I don't have the knowledge or desire to write a script from scratch every time I need one, there's enough stuff out there already, you just have to find it. The script I use here is a combination of 2 scripts, which I was able to dissect, figure out and combine. To answer an obvious question, "Won't Adobe Imageready do all this for me?" Yes, sort of. I found that Imageready did not preload the images the way I wanted, and it wrote in duplicate images, other than the intended swap areas. This made for an unnecessarily huge file size, and since things were not preloaded the way I wanted, I decided to use my own script and fill in the image stuff. The small swap image menu on this page is a small piece of my Flying Tuna Homepage. It has had everything but the bare necessary stripped from it to show you the pieces needed for the image swapping stuff. The resizable frame on the left shows the code for the bare stripped down interface. Do not attempt to download its source, it is only an image, screenshots taken of the html in Textpad 4.0, my text editor of choice. Save source on this frame to grab the functioning code, or take the full code for the full menu from the Tuna homepage. You will find three areas on the resizable left frame outlined in Red, Blue and Green. These three areas contain the code stuff for the first button only. These are the three areas that need to be altered to accommodate YOUR images. The first area, outlined in Blue is the area that defines and preloads the mouseover images on the buttons only. The first image, tut_a.gif, is the white button reading "Tutorials", The second image, tut_b.gif, is the moused over blue button. The size as well as the image name must be altered correctly for your images. The second outlined area, in Red defines the swap images, the first image, scope.jpg, which is the same in all the 'popups', is the scope image. It is the "at rest" state, with no mouseover occurring. The second image, 4.jpg, is the target in the crosshairs image. This image is swapped and becomes visible upon mouseover. The sizes and names of these images must also be altered accordingly to fit your images. The third outlined area, in Green is the actual table that holds the images, as well as the 'mechanical' part of the mouseover and swap effect. The code contained here triggers the mouseover buttons and image-swapping. Notice I have indicated by the dashed green line the spot where the image swapping will take place, a location named u1, in this case, scope.jpg. The first line has all the html targeting information for the interface button, the last line, from the IMG tag on, shows the regular, non moused over button image. The lines starting with 'onmouseover' and 'onmouseout' are the parts of the script that makes things happen. Playing with the tags in these two lines will change the behavior of the script. This is an over simplified view, as you can see it is not an explanation of how the script functions, or why. It will give you enough to get started on figuring them out, and I hope it answers some of the e-mails I have been getting. You really don't learn anything about code using Imageready, or other fill in the blank programs. Imageready is a great program, I use it frequently, but I don't turn complete control of a page over to it. If you experiment and learn from the codes provided and demonstrated here, and in other peoples pages, you will truly learn how to handle these things, instead of relying on a software companys programs and ideas. I love having programs like Imageready around, they are getting better all the time, but if they don't do exactly what you want, it is nice to have the ability to take control and have the page turn out the way YOU want. For more interface HTML stuff, check out Interface Tutorial No.2
and the code link on the bottom of that page.
|