PDA

View Full Version : Mouseover/Window.status

craig
08-03-2002, 08:37 PM
I have been trying to incorporate a mouseover effect menu with window.status.
The Main menu is displayed when you click on the menu icon(button).
See site:http://www.proamrodeo.com (www.proamrodeo.com)

The following is what I have been trying to do.

(1) I have preloaded the images and given them the window.status text message.

(2) I have placed them into an array

(3) NEED FUNCTION TO GET THEM TO DISPLAY (Please Help)

(4) This part of the script makes the main 7 part menu appear and disappear.

The following is the code I have been trying to write for this menu.

Should be pretty simple but I can't see it, can you?



<HTML>
<HEAD>
<TITLE></TITLE>
<META name="description" content="">
<META name="keywords" content="">

<script language="javascript" type="text/javascript">
<!--
/*
* Pre-load the specified image. This loads the image as the page
* loads, so that when it is used later (such as for a mouseover effect),
* the image has already been loaded. It includes the window status text
*/

// (1) Window Status content goes here (image, window status)
var winStat = new Array();
// multi-dimensional arrays containing:
// mouseover images and text for window status

//Menu Button
winStat[0] = new Array('http://www.proamrodeo.com/gif/menu/Menu-over.gif','Click For Expanded Menu.'");
winstat[1] = new Array('http://www.proamrodeo.com/gif/menu/Menu-down.gif','Click For Expanded Menu.'");
winStat[2] = new Array('http://www.proamrodeo.com/gif/menu/Menu.gif',''");

//About_Us Button
winStat[3] = new Array('http://www.proamrodeo.com/gif/menu/About_Us-over.gif','Meet Our Board Of Directors and Membership Affilates'");
winStat[4] = new Array('http://www.proamrodeo.com/gif/menu/About_Us-down.gif','Meet Our Board Of Directors and Membership Affiliates'");
winStat[5] = new Array('http://www.proamrodeo.com/gif/menu/About_Us.gif',''");

//Partners Button
winStat[6] = new Array('http://www.proamrodeo.com/gif/menu/Partners-over.gif','Meet Our Partners and Affiliates.'");
winStat[7] = new Array('http://www.proamrodeo.com/gif/menu/Partners-down.gif','Meet Our Partners and Affiliates.'");
winStat[8] = new Array('http://www.proamrodeo.com/gif/menu/Partners.gif',''");

//Contact Button
winStat[9] = new Array('http://www.proamrodeo.com/gif/menu/Contact-over.gif','To Get In Touch with Us: Contacts, Email and Addresses.'");
winStat[10] = new Array('http://www.proamrodeo.com/gif/menu/Contact-down.gif','To Get In Touch with Us: Contacts, Email and Addresses.'");
winStat[11] = new Array('http://www.proamrodeo.com/gif/menu/Contact.gif',''");

//Results Button
winStat[12] = new Array('http://www.proamrodeo.com/gif/menu/Results-over.gif','Coming! Our RealTime Online Results Of Your Association.'");
winStat[13] = new Array('http://www.proamrodeo.com/gif/menu/Results-down.gif','Coming! Our RealTime Online Results Of Your Association.'");
winStat[14] = new Array('http://www.proamrodeo.com/gif/menu/Results.gif',''");

//Entry Button
winStat[15] = new Array('http://www.proamrodeo.com/gif/menu/Entry-over.gif','Coming! Schedules With 2D/3D Map and Online Entry.'");
winStat[16] = new Array('http://www.proamrodeo.com/gif/menu/Entry-down.gif','Coming! Schedules With 2D/3D Map and Online Entry.'");
winStat[17] = new Array('http://www.proamrodeo.com/gif/menu/Entry.gif',''");

//Links Button
winStat[18] = new Array('http://www.proamrodeo.com/gif/menu/Links-over.gif','Assorted Links To Other Sites.'");
winStat[19] = new Array('http://www.proamrodeo.com/gif/menu/Links-down.gif','Assorted Links To Other Sites.'");
winStat[20] = new Array('http://www.proamrodeo.com/gif/menu/Links.gif',''");

//Downloads Button
winStat[21] = new Array('http://www.proamrodeo.com/gif/menu/Links-over.gif','Assorted Links To Other Sites.'");
winStat[22] = new Array('http://www.proamrodeo.com/gif/menu/Links-down.gif','Assorted Links To Other Sites.'");
winStat[23] = new Array('http://www.proamrodeo.com/gif/menu/Links.gif',''");


// (2) Assemble Array For Menu
// preload images that are to appear as mouseover effect and in message tray
// from arrays above
if (document.images) {
var theImgs = new Array();
for (var i=0; i<winStat.length; i++) {
theImgs[i] = new Image();
theImgs[i].src = winStat[i][0];
}
}

// (3) Function For Mouseover window Status display and Mouse over effects

function dowinStat(img,stat){

//Don't Know What To Put In Here

:o document.images['About_us'].src =img;
window.status=stat;

//Need To Replace The Above 2 Lines With Something To display The Mouseover Images and The Window Status

return true;
}

// (4) OnClick Menu Make Full Menu Appear
function show(layerid)
{
if (document.getElementById) // IE and NS6
{
elm=document.getElementById(layerid)
if(elm.style.visibility=="visible")
{
elm.style.visibility="hidden"
}
else
{
elm.style.visibility="visible"
}
}
if(document.layers)
{
obj=eval("document."+layerid)
if(obj.visibility=="show")
{
obj.visibility="hide"
}
else
{
obj.visibility="show"
}
}
}
// End OnClick Menu Make Full Menu Appear
// End Menu and Window Status Script

//-->
</script>
</HEAD>
<BODY>

<DIV STYLE="position:absolute; top:260px; left:340px; width:90px; border-width:0; visibility: visible; z-index:1">
<a href="javascript:void(0);" onfocus="this.blur();" onclick="show('mytexta')"
onMouseOver="dowinStat(event,0)"
onMouseOut="dowinStat(event,2)"
onMouseDown="dowinStat(event,1)"
onMouseUp="dowinStat(event,0)">
<img name="Menu" src="http://www.proamrodeo.com/gif/menu/Menu.gif" width="88" height="38" vspace="0" border="0" alt="Menu"></a><br>
</DIV>

<DIV id="mytexta" STYLE="position:absolute; top:230px; left:540px; width:90px; border-width:0; visibility:hidden; z-index:1">
<a href="javascript:void(0);" onfocus="this.blur()"
onMouseOver="dowinStat(event,3)"
onMouseOut="dowinStat(event,5)"
onMouseDown="dowinStat(event,4)"
onMouseUp="dowinStat(event,3)">
<img name="About_Us" src="http://www.proamrodeo.com/gif/menu/About_Us.gif" width="90" height="40" vspace="0" border="0" alt="About Us"></a><br>

<a href="javascript:void(0);" onfocus="this.blur()"
oonMouseOver="dowinStat(event,6)"
onMouseOut="dowinStat(event,8)"
onMouseDown="dowinStat(event,7)"
onMouseUp="dowinStat(event,8)">
<img name="Partners" src="http://www.proamrodeo.com/gif/menu/Partners.gif" width="90" height="40" vspace="0" border="0" alt="Check Out Our Partners"></a><br>

<a href="http://www.proamrodeo.com/contact.htm" onfocus="this.blur()" target="_new" onMouseOver="dowinStat(event,9)"
onMouseOut="dowinStat(event,11)"
onMouseDown="dowinStat(event,10)"
onMouseUp="dowinStat(event,11)">
<img name="Contact" src="http://www.proamrodeo.com/gif/menu/Contact.gif" width="90" height="40" vspace="0" border="0" alt="Contact Us"></a><br>

<a href="javascript:void(0);" onfocus="this.blur()"
onMouseOver="dowinStat(event,12)"
onMouseOut="dowinStat(event,14)"
onMouseDown="dowinStat(event,13)"
onMouseUp="dowinStat(event,14)">
<img name="Results" src="http://www.proamrodeo.com/gif/menu/Results.gif" width="90" height="40" vspace="0" border="0" alt="Results"></a><br>

<a href="#" onfocus="this.blur()"
onMouseOver="dowinStat(event,15)"
onMouseOut="dowinStat(event,17)"
onMouseDown="dowinStat(event,16)"
onMouseUp="dowinStat(event,17)">
<img name="Entry" src="http://www.proamrodeo.com/gif/menu/Entry.gif" width="90" height="40" vspace="0" border="0" alt="Entry"></a><br>

<a href="javascript:void(0);" onfocus="this.blur()"
onMouseOver="dowinStat(event,18)"
onMouseOut="dowinStat(event,20)"
onMouseDown="dowinStat(event,19)"
onMouseUp="dowinStat(event,20)">
<img name="Links" src="http://www.proamrodeo.com/gif/menu/Links.gif" width="90" height="40" vspace="0" border="0" alt="Links To Related Sites"></a><br>

<a href="javascript:void(0);" onfocus="this.blur()"
onMouseOver="dowinStat(event,21)"
onMouseOut="dowinStat(event,23)"
onMouseDown="dowinStat(event,22)"
onMouseUp="dowinStat(event,23)">
<img name="Downloads" src="http://www.proamrodeo.com/gif/menu/Downloads.gif" width="90" height="40" vspace="0" border="0" alt="Downloads"></a><br>
</div>
</BODY>
ShriekForth
08-05-2002, 03:50 PM
There is a lot here so I will tell you what I had to fix to make this work.

First, your array is delared wrong and is giving an error. You have '"); at the end of every declaration of winStat. This is an easy enough fix, remove that extra " and it will become a valid array.

The winStat[1] is winstat[1], it needs to be winStat[1]. That should take care of the array.

Next, your function now needs to be

function dowinStat(img,stat){
window.status= winStat[stat][1];
document.images[img].src = winStat[stat][0];
return true;
}


With this function you need to be sure to pass the name of the image to be replaced. You currently have it trying to pass, event. I'm not sure what that is all about, or if you were going to add the show/hide cuntionality with that, but pass it the image name as a string, and be sure to return that true back. Otherwise the mouseover message will not stay.

<a href="javascript:void(0);"
onMouseOver="return dowinStat('Menu',0);"
onMouseOut="return dowinStat('Menu',2);"
onMouseDown="return dowinStat('Menu',2);"
onMouseUp="return dowinStat('Menu',0);">
<img name="Menu" src="./Menu.gif" width="88" height="38" vspace="0" border="0" alt="Menu"></a>

ShriekForth