PDA

View Full Version : Mouseover/Window.status

craig
08-18-2002, 06:13 PM
I am trying to create a menu that renders mouseover images and displays a window.status message as well.

The following code is what I am trying to use.
I have other code already in the source for my web page but would like to tighten it up in hopes that the window.status will then work in netscape as well as IE.

This is the website address that is currently using the older code.
ProAm Rodeo.com (http://www.proamrodeo.com)

I have done the following.

(1) Defined variable winStat for array
(2) Structured the array
(3) Looped the images and text(?)
(4) Defined the function dowinStat
(5) Placed the return command in the display HTML

The follwoing is the code I have been trying to use. What am I mising?
<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)
(1) var winStat = new Array();
// multi-dimensional arrays containing:
// mouseover images and text for window status

(2) //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','');

(3) // preload images that are to appear in tooltip
// from arrays above
if (document.images) {
var thewinStats = new Array();
for (var i=0; i<winStat.length; i++) {
thewinStats[i] = new Image();
thewinStats[i].src = winStat[i][0];
}
}

(4) //function to display menu images
function dowinStat(img,stat){
window.status= winStat[stat][1];
document.images[img].src = winStat[stat][0];
return true;

//-->
</script>

</HEAD>
<BODY>

(5) <DIV STYLE="position:absolute; top:260px; left:340px; width:90px; border-width:0; visibility: visible; z-index:1">
<a href="javascript:void(0);"
onMouseOver="return dowinStat(Menu,0);"
onMouseOut="return dowinStat(Menu,2);"
onMouseDown="return dowinStat(Menu,1);"
onMouseUp="return dowinStat(Menu,0);">
<img name="Menu" src="./Menu.gif" width="88" height="38" vspace="0" border="0" alt="Menu"></a><br>
</DIV>

<DIV STYLE="position:absolute; top:230px; left:540px; width:90px; border-width:0; visibility:visible; z-index:1">
<a href="javascript:void(0);"
onMouseOver="return dowinStat(About_Us,3);"
onMouseOut="return dowinStat(About_Us,5);"
onMouseDown="return dowinStat(About_Us,4);"
onMouseUp="return dowinStat(About_Us,3);">
<img name="About_Us" src="./About_Us.gif" width="90" height="40" vspace="0" border="0" alt="About Us"></a><br>


</BODY>
</html>
dsvg
08-18-2002, 08:14 PM
I am not sure which version of Netscape you mean here, but in Gecko based browsers

(Mozilla/NS6+/etc) by default the browser will show the URL that a links href attribute

points to when the pointer moves over the link. Therefore your have to use the

preventDefault() method on the mouseover event to make sure that the status bar text shows

and not the URL. Note that you will also have to pass the event object to the function that

handles the mouseover. You would change it to something like:


function dowinStat(event, img, stat) // note the argument 'event'
{
// check the event object and it's preventDefault method exist
if (event && event.preventDefault)
event.preventDefault();

window.status = winStat[stat][1];
document.images[img].src = winStat[stat][0];
return true;
} // You missed out this bracket in your code which won't help!!


Note also that your link and it's event handlers should be changed. The JavaScript pseudo

protocol is one word, so:

href="java script:void(0);"

should actually be:

href="javascript:void(0);"

(no space). And the script in the event handlers must have it's strings quoted and the

event object added (without quotes!). So, for example, change:

onMouseOver="return dowinStat(Menu,0);"

to:

onmouseover="return dowinStat(event, 'Menu', 0);"

I only did a very quick read here and there is probably stuff I have missed out, but that gets you a bit closer to getting it working. Post back if you require more help.
dsvg
08-18-2002, 08:17 PM
On review I see that it is vBulletin that is placing the space between 'java' and 'script'. I guess you can ignore that part of my post. :)
craig
08-18-2002, 08:26 PM
The nescape browser is 4.0
It is the one I have the most problems with.
Unfortunately one of my colleagues uses it and doesn't want to change.
Even 4.7+ is better but can't get him to go there.
Not sure if 4.7 is the right number but it is the later version that our community college uses.
dsvg
08-18-2002, 09:01 PM
Originally posted by craig
The nescape browser is 4.0
It is the one I have the most problems with.

Don't we all. :( From memory (I don't have ns4 on this computer) i think you are doing it right with the return true. But it is a long time since I have coded for ns4. If you aren't already I would check for errors in the ns4 javascript console. To open it type 'javascript:' into the address bar and hit enter. Make sure you include the colon.
dsvg
08-18-2002, 09:04 PM
I mean the space.

test: javascript
dsvg
08-18-2002, 09:05 PM
Hmm, so character references work at least, but that javascript thing needs to be fixed.

test: ||
craig
08-18-2002, 09:12 PM
I don't seem to have the javaconsule in net 4.0 browser.
Just downloaded the browser.
I will check to see if I can enable it.
The function you provide works great in IE and Mozilla but still no Net 4.0
The space seems to be put in when I post an is not there other wise.
craig
08-18-2002, 09:40 PM
Type 'javascript:' into location window and it just redirects me to search engine display results.
Roy Sinclair
08-19-2002, 05:58 AM
The nescape browser is 4.0
It is the one I have the most problems with.
Unfortunately one of my colleagues uses it and doesn't want to change.
Even 4.7+ is better but can't get him to go there.
Not sure if 4.7 is the right number but it is the later version that our community college uses.

If it's only one colleage then it's time to force an upgrade. It would be worth your time to research some of the security problems that were fixed between Netscape 4.0 and 4.78 as ammunition for reasons why such an upgrade is no longer optional. Running Netscape 4.0 (or IE 4.0 btw) out on the web is simply not safe, there are far too many known exploits. In fact the major difference between 4.0 and 4.78 is the security related fixes, it's obvious that few of the multitude of bugs in 4.0 ever got fixed.
dsvg
08-19-2002, 07:46 AM
If you are going to get them to upgrade, get them to upgrade to NS7 or something. :) It will be released within the next month most likely.

I am sure the 'javascript:' did it in NS4.7, but maybe there wasn't a JavaScript consol in 4.0. I would download 4.7 and try it in there. If your page works then you know it is a problem with 4.0, if it still doesn't then you can probably use the console to help you figure out what is wrong.