I am looking for javascript and a basic tutorial on how to make mouse-over
drop-down menus--the type that when you "hover" over a subject links
relevant to that subject "emerge" which you can then "hover" over and click.
(see the links left on http://www.dpreview.com to see what I mean)
I have code from smartwebby.com (DHTML) but I'm not sure if it's the best,
and I'm not sure how to integrate any menus of my own into it. The code
follows:
******START OF CODE****************************
<script language = "Javascript">
<!--
/**
* DHTML dropdown menu script. Courtesy of SmartWebby.com
(http://www.smartwebby.com/dhtml/)
*/
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS6 = (bName == "Netscape" && bVer >= 5);
var NS4 = (bName == "Netscape" && bVer >= 4 && bVer < 5);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);
window.onerror = null;
var menuActive = 0
var menuOn = 0
var onLayer
var timeOn = null // LAYER SWITCHING CODE
if (NS4 || IE4 || NS6) {
if (navigator.appName == "Netscape" && !document.getElementById){
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
layerVis="show";
layerHid="hide";
}
else if (!document.all && document.getElementById) {
layerStyleRef="layer.style.";
layerRef="document.getElementById";
styleSwitch=".style";
layerVis="visible";
layerHid="hidden";
}
else {
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
layerVis="visible";
layerHid="hidden";
}
}
// SHOW MENU
function shLayer(layerName){
img = getImage("imgTabs");
x = getImagePageLeft(img);
y = getImagePageTop(img);
menuTop = y + 20 ; // LAYER TOP POSITION
SerL = x + 55 ; // 'Ser' LAYER LEFT POSITION
ProL = x + 120 ; // 'Pro' LAYER LEFT POSITION
RatL = x + 260 ; // 'Rat' LAYER LEFT POSITION
if (NS4 || IE4 || NS6) {
if (timeOn != null) {
clearTimeout(timeOn)
hideLayer(onLayer)
}
if (NS4 || IE4) {
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="'+layerVis+'"');
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.top="'+menuTop+'"');
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.left="'+eval(layerName+'L')+
'"');
}
if (NS6) {
eval(layerRef+'("'+layerName+'")'+styleSwitch+'.vi sibility="'+layerVis+'"');
eval(layerRef+'("'+layerName+'")'+styleSwitch+'.to p="'+menuTop+'"');
eval(layerRef+'("'+layerName+'")'+styleSwitch+'.le ft="'+eval(layerName+'L')+
'"');
}
onLayer = layerName
}
}// HIDE MENU
function hideLayer(layerName){
if (menuActive == 0) {
if (NS4 || IE4) {
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="'+layerHid+'"');
}
if (NS6) {
eval(layerRef+'("'+layerName+'")'+styleSwitch+'.vi sibility="'+layerHid+'"');
}
}
}// TIMER FOR BUTTON MOUSE OUT
function btnTimer() {
timeOn = setTimeout("btnOut()",1000)
}// BUTTON MOUSE OUT
function btnOut(layerName) {
if (menuActive == 0) {
hideLayer(onLayer)
}
}// MENU MOUSE OVER
function menuOver(itemName) {
clearTimeout(timeOn)
menuActive = 1
}// MENU MOUSE OUT
function menuOut(itemName) {
menuActive = 0
timeOn = setTimeout("hideLayer(onLayer)", 400)
}// SET BACKGROUND COLOR
function setBgColor(layer, color) {
if (NS6){
eval('document.getElementById("'+layer+'").style.b ackgroundColor="'+color+'"
');
}
else if (NS4){
eval('window.document.layers["'+layer+'"].document.bgColor="'+color+'"');
eval('window.document.layers["'+layer+'"].saveColor="'+color+'"');
}
else if (IE4){
eval('document.all.'+layer+'.style.backgroundColor ="'+color+'"');
}
}
function getImage(name) {
if (NS4 || NS6) {
return findImage(name, document);
}
if (IE4 || NS6)
return eval('document.all.' + name);
return null;
}
function findImage(name, doc) {
var i, img;
for (i = 0; i < doc.images.length; i++)
if (doc.images[i].name == name)
return doc.images[i];
for (i = 0; i < doc.layers.length; i++)
if ((img = findImage(name, doc.layers[i].document)) != null) {
img.container = doc.layers[i];
return img;
}
return null;
}
function getImagePageLeft(img) {
var x, obj;
if (NS4 || NS6) {
if (img.container != null)
return img.container.pageX + img.x - 1;
else
return img.x - 1;
}
if (IE4) {
x = 0;
obj = img;
while (obj.offsetParent != null) {
x += obj.offsetLeft;
obj = obj.offsetParent;
}
x += obj.offsetLeft;
return x;
}
return -1;
}
function getImagePageTop(img) {
var y, obj;
if (NS4 || NS6) {
if (img.container != null)
return img.container.pageY + img.y;
else
return img.y;
}
if (IE4) {
y = 0;
obj = img;
while (obj.offsetParent != null) {
y += obj.offsetTop;
obj = obj.offsetParent;
}
y += obj.offsetTop;
return y;
}
return -1;
}
// -->
</script>
******END OF CODE*******************************
Tips?
LRH
