Web page programming

[wey97]

I am frustrated because I cannot find a good web page
tutorial source or good source code. I want to make
a colorful navigation menu that has popup submenus when
the mouse cursor is over the menu item. Like on this site:

http://www.component1.com/

Please let me know how to do this.

[pnj]

just view the source.
it's all there.

[wey97]

Yeah, I know. I can see the source code, but I was really
looking for a tutorial or something like that.
The code is too damn confusing to be useful.

[shaba]

the rollovers are simple javascript. here is some code that i've found very stable and compatible over many browsers:

mouseover code:
************************************************************
function MM_swapImage() { //v2.0
var i,j=0,objStr,obj,swapArray=new
Array,oldArray=document.MM_swapImgData;
for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
objStr = MM_swapImage.arguments[(navigator.appName ==
'Netscape')?i:i+1];
if ((objStr.indexOf('document.layers[')==0 && document.layers==null)
||
(objStr.indexOf('document.all[') ==0 && document.all ==null))
objStr =
'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
obj = eval(objStr);
if (obj != null) {
swapArray[j++] = obj;
swapArray[j++] = (oldArray==null ||
oldArray[j-1]!=obj)?obj.srcldArray[j];
obj.src = MM_swapImage.arguments[i+2];
} }
document.MM_swapImgData = swapArray; //used for restore
}
************************************************************

mouseout code:
************************************************************
function MM_swapImgRestore() { //v2.0
if (document.MM_swapImgData != null)
for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)
document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];
}
************************************************************

here's how to use it. just copy the above functions into your <script> tag. then in your <a href> tag, include this:

onMouseOver = "MM_swapImage('document.img1','document.img1','img2.gif')" onMouseOut = "MM_swapImgRestore()"

img1 is your initial graphic and img2 is the highlighted one.

Now, as for the drop down menus. Look at http://www.webmonkey.com. they have great tutorials on a lot of dhtml topics. but pnj had it right. the best way is always to look at the source code. if you look at enough of it, you'll start recognizing the common stuff.

hope this helps!

shaba
http://www.ahmonra.com

[wey97]

hey, webmonkey is cool!
that's the menu i want.

thanks