Solved: Mouseover Menu/Link | Experts Exchange

ASKER

Ahh, just like this http://dhtml-menu.com/menu-demos/demo1123.html

But I want the location of the whole menu to be static.

archrajan

check here
http://www.dynamicdrive.com/dynamicindex1/index.html

archrajan

see here exactly
http://www.dynamicdrive.com/dynamicindex1/topmen3/index.htm

archrajan

some more:
http://www.milonic.com/
http://www.likno.com/
http://www.sothink.com/webtools/dhtmlmenu/

phita

ASKER

Actually, I found a bunch of pages at simplythebest.com for example: http://simplythebest.net/scripts/DHTML_scripts/dhtml_script_89.html

archrajan

yup.. you have got lots of options.
let me know if u like something.. i can help u customize it for urneeds

ellandrd

can i butt in!

phita,

try searching Experts exchange for menues, i have found some good 1 before.

also with dynamicdrive, i have found that their scripts tends to be very long and alot of unnessessary code.

i have created a dropdown or horizontal menu before if you would like to see this? (uses less code the dynamicdrive does and mine can be customized too)

Ellandrd

phita

ASKER

Ok I found and configured a script that I like. The script can be found at http://s93894156.onlinehome.us/services.html

But I have a few questions

1) How do I make webpages refer to this as an external script? I tried putting the code in a .js file and src="toc.js" in the <script> but then the table doesn't show up at all.

2) If I mouseover one of the dropdown-able links, then hover over a submenu, when I move my mouse off of the submenu, it doesn't disappear. It just stays open. How do I make it close if I take my mouse off of the submenu?

ellandrd

i will customize it for you...

Ellandrd

ellandrd

this page has alot of unnessessary code!

but will do what you wanted in yout last comment..

whole on

ellandrd

can you post the the url or the image:

images/arrow-down.gif

ellandrd

ok i coded a menu with submenus for you myself as that script in that link has alot of unnessessary code to fo the job:

my script is very easy to customize and change and very simple...

try this:

index.html
---------------
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>

<table cellspacing="0" border="0" cellpadding="0" id="menu1" class="ddm1">
<tr>

      <td align="center">
            <a class="item1" href="#" target="_blank">BLANK LINK</a>
      </td>

      <td align="center">
            <a class="item1" href="javascript:void(0)">MENU</a>
            <div class="section">
                  <a class="item2" href="#" target="_self">SUBMENU LINK</a>
                  <a class="item2" href="#" target="_self">SUBMENU LINK</a>
                  <a class="item2" href="#" target="_self">SUBMENU LINK</a>
                  <a class="item2" href="#" target="_self">SUBMENU LINK</a>
                  <a class="item4" href="#" target="_self">SUBMENU LINK</a>
            </div>
      </td>

      <td align="center">
            <a class="item1" href="javascript:void(0)">MENU</a>
            <div class="section">
                  <a class="item2" href="#" target="_self">SUBMENU LINK</a>
                  <a class="item2" href="#" target="_self">SUBMENU LINK</a>
                  <a class="item2" href="#" target="_self">SUBMENU LINK</a>
                  <a class="item2" href="#" target="_self">SUBMENU LINK</a>
                  <a class="item4" href="#" target="_self">SUBMENU LINK</a>
            </div>
      </td>

      <td align="center">
            <a class="item3" href="#" target="_self" >BLANK LINK</a>
      </td>

</tr>
</table>

<script type="text/javascript">

</script>

style.css
--------------
.ddm1 {
font: 11px verdana;
}

.ddm1 .item1,
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
      padding: 3px 8px 4px 8px;
      border-bottom-color:#3a5395;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-left-style: solid;
      border-left-color: #3a5395;
      border-left-width: 1px;
      border-top-color: #3a5395;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-color: #3a5395;
      border-right-width: 0px;
      border-right-style: solid;
      text-decoration: none;
      display: block;
      position: relative;
      width:120px;
}

.ddm1 .item1 {
      background: #ffffff;
      color: #000000;
}

.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
      background: #ffffff;
      color: #3a5395;
      font-weight:bold;
      border-bottom-color:#3a5395;
      border-bottom-width: 1px;
      border-left-color: #3a5395;
      border-left-width: 1px;
      border-top-color: #3a5395;
      border-top-width: 1px;
      border-right-color: #3a5395;
      border-right-width: 0px;
      border-left-style: solid;
      border-right-style: solid;
      border-top-style: solid;
      border-bottom-style: solid;
}

.ddm1 .item2,
.ddm1 .item2:hover {
      padding: 4px 0px 4px 0px;
      border-bottom-color:#3a5395;
      border-bottom-width: 1px;
      border-left-color: #3a5395;
      border-left-width: 1px;
      border-top-color: #3a5395;
      border-top-width: 0px;
      border-right-color: #3a5395;
      border-right-width: 1px;
      border-left-style: solid;
      border-right-style: solid;
      border-top-style: solid;
      border-bottom-style: solid;
      text-decoration: none;
      display: block;
      position: relative;
      width:120px;
      white-space: nowrap;
}

.ddm1 .item2 {
      background: #ffffff;
      color: #000000;
      width:120px;
}

.ddm1 .item2:hover {
      background: #f1f1f1;
      color: #3a5395;
      font-weight:bold;
      border-bottom-color:#3a5395;
      border-bottom-width: 1px;
      border-left-color: #3a5395;
      border-left-width: 1px;
      border-top-color: #3a5395;
      border-top-width: 0px;
      border-right-color: #3a5395;
      border-right-width:1px;
      border-left-style: solid;
      border-right-style: solid;
      border-top-style: solid;
      border-bottom-style: solid;
      width:120px;
}

.ddm1 .section {
      border-bottom-color:#3a5395;
      border-bottom-width: 0px;
      border-left-color: #3a5395;
      border-left-width: 0px;
      border-top-color: #3a5395;
      border-top-width: 0px;
      border-right-color: #3a5395;
      border-left-style: solid;
      border-right-style: solid;
      border-top-style: solid;
      border-bottom-style: solid;
      border-right-width: 0px;
      position: absolute;
      display: block;
      width: 120px;
      visibility: hidden;
      z-index: 1000;
}

.ddm1 .bottom,
.ddm1 .bottom:hover {
      border-bottom-color:#3a5395;
      border-bottom-width: 0px;
      border-left-color: #3a5395;
      border-left-width: 0px;
      border-top-color: #3a5395;
      border-top-width: 0px;
      border-right-color: #3a5395;
      border-right-width: 0px;
      border-left-style: solid;
      border-right-style: solid;
      border-top-style: solid;
      border-bottom-style: solid;
      width: 120px;
}

.ddm1 .item3,
.ddm1 .item3:hover,
.ddm1 .item3-active,
.ddm1 .item3-active:hover {
      padding: 3px 8px 4px 8px;
      border-bottom-color:#3a5395;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-left-style: solid;
      border-left-color: #3a5395;
      border-left-width: 1px;
      border-top-color: #3a5395;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-color: #3a5395;
      border-right-width: 1px;
      border-right-style: solid;
      text-decoration: none;
      display: block;
      position: relative;
      width:120px;
}

.ddm1 .item3 {
      background: #ffffff;
      color: #000000;
}

.ddm1 .item3:hover,
.ddm1 .item3-active,
.ddm1 .item3-active:hover {
      background: #ffffff;
      color: #3a5395;
      font-weight:bold;
      border-bottom-color:#3a5395;
      border-bottom-width: 1px;
      border-left-color: #3a5395;
      border-left-width: 1px;
      border-top-color: #3a5395;
      border-top-width: 1px;
      border-right-color: #3a5395;
      border-right-width: 1px;
      border-left-style: solid;
      border-right-style: solid;
      border-top-style: solid;
      border-bottom-style: solid;
}

.ddm1 .item4,
.ddm1 .item4:hover {
      padding: 4px 0px 4px 0px;
      border-bottom-color:#3a5395;
      border-bottom-width: 1px;
      border-left-color: #3a5395;
      border-left-width: 1px;
      border-top-color: #3a5395;
      border-top-width: 0px;
      border-right-color: #3a5395;
      border-right-width: 1px;
      border-left-style: solid;
      border-right-style: solid;
      border-top-style: solid;
      border-bottom-style: solid;
      text-decoration: none;
      display: block;
      position: relative;
      width:120px;
      white-space: nowrap;
}

.ddm1 .item4 {
      background: #ffffff;
      color: #000000;
      width:120px;
}

.ddm1 .item4:hover {
      background: #f1f1f1;
      color: #3a5395;
      font-weight:bold;
      border-bottom-color:#3a5395;
      border-bottom-width: 1px;
      border-left-color: #3a5395;
      border-left-width: 1px;
      border-top-color: #3a5395;
      border-top-width: 0px;
      border-right-color: #3a5395;
      border-right-width:1px;
      border-left-style: solid;
      border-right-style: solid;
      border-top-style: solid;
      border-bottom-style: solid;
      width:120px;
}

script.js
--------------
function DropDownMenu1(id)
{
/* Type of the menu: "horizontal" or "vertical" */
this.type = "horizontal";

/* Delay (in miliseconds >= 0): show-hide menu */
this.delay = {
"show": 0,
"hide": 300
}
/* Change the default position of sub-menu by Y pixels from top and X pixels from left
* Negative values are allowed */
this.position = {
"top": 0,
"left": 0
}
/* Z-index property for .section */
this.zIndex = {
"visible": 1,
"hidden": -1
};

// Browser detection
this.browser = {
"ie": Boolean(document.body.currentStyle),
"ie5": (navigator.appVersion.indexOf("MSIE 5.5") != -1 || navigator.appVersion.indexOf("MSIE 5.0") != -1)
};
if (!this.browser.ie) { this.browser.ie5 = false; }

/* Initialize the menu */
this.init = function() {
if (!document.getElementById(this.id)) { return alert("DropDownMenu1.init() failed. Element '"+ this.id +"' does not exist."); }
if (this.type != "horizontal" && this.type != "vertical") { return alert("DropDownMenu1.init() failed. Unknown menu type: '"+this.type+"'"); }
if (this.browser.ie && this.browser.ie5) { fixWrap(); }
fixSections();
parse(document.getElementById(this.id).childNodes, this.tree, this.id);
}

/* Search for .section elements and set width for them */
function fixSections() {
var arr = document.getElementById(self.id).getElementsByTagName("div");
var sections = new Array();
var widths = new Array();

for (var i = 0; i < arr.length; i++) {
if (arr[i].className == "section") {
sections.push(arr[i]);
}
}
for (var i = 0; i < sections.length; i++) {
widths.push(getMaxWidth(sections[i].childNodes));
}
for (var i = 0; i < sections.length; i++) {
sections[i].style.width = (widths[i]) + "px";
}
if (self.browser.ie) {
for (var i = 0; i < sections.length; i++) {
setMaxWidth(sections[i].childNodes, widths[i]);
}
}
}

function fixWrap() {
var elements = document.getElementById(self.id).getElementsByTagName("a");
for (var i = 0; i < elements.length; i++) {
if (/item2/.test(elements[i].className)) {
elements[i].innerHTML = '<div nowrap="nowrap">'+elements[i].innerHTML+'</div>';
}
}
}

/* Search for an element with highest width among given nodes, return that width */
function getMaxWidth(nodes) {
var maxWidth = 0;
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType != 1) { continue; }
if (nodes[i].offsetWidth > maxWidth) { maxWidth = nodes[i].offsetWidth; }
}
return maxWidth;
}

/* Set width for item2 elements */
function setMaxWidth(nodes, maxWidth) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType == 1 && /item2/.test(nodes[i].className) && nodes[i].currentStyle) {
if (self.browser.ie5) {
nodes[i].style.width = (maxWidth) + "px";
} else {
nodes[i].style.width = (maxWidth - parseInt(nodes[i].currentStyle.paddingLeft) - parseInt(nodes[i].currentStyle.paddingRight)) + "px";
}
}
}
}

/* Parse nodes, create events, position elements */
function parse(nodes, tree, id) {
for (var i = 0; i < nodes.length; i++) {
if (1 != nodes[i].nodeType) {
continue;
}
switch (true) {
// .item1
case /\bitem1\b/.test(nodes[i].className):
nodes[i].id = id + "-" + tree.length;
tree.push(new Array());
nodes[i].onmouseover = item1over;
nodes[i].onmouseout = item1out;
break;
// .item2
case /\bitem2\b/.test(nodes[i].className):
nodes[i].id = id + "-" + tree.length;
tree.push(new Array());
break;
// .section
case /\bsection\b/.test(nodes[i].className):
// id, events
nodes[i].id = id + "-" + (tree.length - 1) + "-section";
nodes[i].onmouseover = sectionOver;
nodes[i].onmouseout = sectionOut;
// position
var box1 = document.getElementById(id + "-" + (tree.length - 1));
var box2 = document.getElementById(nodes[i].id);
if ("horizontal" == self.type) {
box2.style.top = box1.offsetTop + box1.offsetHeight + self.position.top + "px";
if (self.browser.ie5) {
box2.style.left = self.position.left + "px";
} else {
box2.style.left = box1.offsetLeft + self.position.left + "px";
}
} else if ("vertical" == self.type) {
box2.style.top = box1.offsetTop + self.position.top + "px";
if (self.browser.ie5) {
box2.style.left = box1.offsetWidth + self.position.left + "px";
} else {
box2.style.left = box1.offsetLeft + box1.offsetWidth + self.position.left + "px";
}
}
// sections, sectionsShowCnt, sectionsHideCnt
self.sections.push(nodes[i].id);
self.sectionsShowCnt.push(0);
self.sectionsHideCnt.push(0);
break;
}
if (nodes[i].childNodes) {
if (/\bsection\b/.test(nodes[i].className)) {
parse(nodes[i].childNodes, tree[tree.length - 1], id + "-" + (tree.length - 1));
} else {
parse(nodes[i].childNodes, tree, id);
}
}
}
}

/* event, item1:onmouseover */
function item1over() {
var id_section = this.id + "-section";
if (self.visible) {
var el = new Element(self.visible);
el = document.getElementById(el.getParent().id);
if (/item1-active/.test(el.className)) {
el.className = el.className.replace(/item1-active/, "item1");
}
}
if (self.sections.contains(id_section)) {
self.sectionsHideCnt[self.sections.indexOf(id_section)]++;
var cnt = self.sectionsShowCnt[self.sections.indexOf(id_section)];
setTimeout(function(a, b) { return function() { self.showSection(a, b); } } (id_section, cnt), self.delay.show);
} else {
if (self.visible) {
var cnt = self.sectionsHideCnt[self.sections.indexOf(self.visible)];
setTimeout(function(a, b) { return function() { self.hideSection(a, b); } } (self.visible, cnt), self.delay.show);
}
}
}

/* event, item1:onmouseout */
function item1out() {
var id_section = this.id + "-section";
if (self.sections.contains(id_section)) {
self.sectionsShowCnt[self.sections.indexOf(id_section)]++;
if (id_section == self.visible) {
var cnt = self.sectionsHideCnt[self.sections.indexOf(id_section)];
setTimeout(function(a, b) { return function() { self.hideSection(a, b); } }(id_section, cnt), self.delay.hide);
}
}
}

/* event, section:onmouseover */
function sectionOver() {
self.sectionsHideCnt[self.sections.indexOf(this.id)]++;
var el = new Element(this.id);
el = document.getElementById(el.getParent().id);
if (!/item1-active/.test(el.className)) {
el.className = el.className.replace(/item1/, "item1-active");
}
}

/* event, section:onmouseout */
function sectionOut() {
self.sectionsShowCnt[self.sections.indexOf(this.id)]++;
var cnt = self.sectionsHideCnt[self.sections.indexOf(this.id)];
setTimeout(function(a, b) { return function() { self.hideSection(a, b); } }(this.id, cnt), self.delay.hide);
}

/* Show section (1 argument passed)
* Try to show section (2 arguments passed) - check cnt with sectionShowCnt */
this.showSection = function(id, cnt) {
if (typeof cnt != "undefined") {
if (cnt != this.sectionsShowCnt[this.sections.indexOf(id)]) { return; }
}
this.sectionsShowCnt[this.sections.indexOf(id)]++;
var el = new Element(id);
var parent = document.getElementById(el.getParent().id);
if (!/item1-active/.test(parent.className)) {
parent.className = parent.className.replace(/item1/, "item1-active");
}
if (this.visible) {
if (id == this.visible) { return; }
this.hideSection(this.visible);
}
//document.getElementById(id).style.display = "block";
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.zIndex = this.zIndex.visible;
this.visible = id;
}

/* Hide section (1 argument passed)
* Try to hide section (2 arguments passed) - check cnt with sectionHideCnt */
this.hideSection = function(id, cnt) {
if (typeof cnt != "undefined") {
if (cnt != this.sectionsHideCnt[this.sections.indexOf(id)]) { return; }
}
var el = new Element(id);
var parent = document.getElementById(el.getParent().id);
parent.className = parent.className.replace(/item1-active/, "item1");
document.getElementById(id).style.zIndex = this.zIndex.hidden;
document.getElementById(id).style.visibility = "hidden";
//document.getElementById(id).style.display = "none";
if (id == this.visible) { this.visible = ""; }
else {
//throw "DropDownMenu1.hideSection('"+id+"', "+cnt+") failed, cannot hide element that is not visible";
return;
}
this.sectionsHideCnt[this.sections.indexOf(id)]++;
}

/* Necessary when showing section that doesn't exist - hide currently visible section. See: item1over() */
this.hideSelf = function(cnt) {
if (this.visible && cnt == this.sectionsHideCnt[this.sections.indexOf(this.visible)]) {
this.hideSection(this.visible);
}
}

/* Element (.section, .item2 etc) */
function Element(id) {
/* Get parent element */
this.getParent = function() {
var s = this.id.substr(this.menu.id.length);
var a = s.split("-");
a.pop();
return new Element(this.menu.id + a.join("-"));
}
this.menu = self;
this.id = id;
}

var self = this;
this.id = id; /* menu id */
this.tree = []; /* tree structure of menu */
this.sections = []; /* all sections, required for timeout */
this.sectionsShowCnt = [];
this.sectionsHideCnt = [];
this.visible = ""; /* visible section, ex. menu-0-section */
}

/* Finds the index of the first occurence of item in the array, or -1 if not found */
if (typeof Array.prototype.indexOf == "undefined") {
Array.prototype.indexOf = function(item) {
for (var i = 0; i < this.length; i++) {
if ((typeof this[i] == typeof item) && (this[i] == item)) {
return i;
}
}
return -1;
}
}

/* Check whether array contains given string */
if (typeof Array.prototype.contains == "undefined") {
Array.prototype.contains = function(s) {
for (var i = 0; i < this.length; i++) {
if (this[i] === s) {
return true;
}
}
return false;
}
}

this can be use for vertical menus with submenus too!

Ellandrd

phita

ASKER

I would like all my pages to have this table of contents menu. I want all the code in an external file so I can modify all of my pages at the same time. It seems currently, I would have to change each file to change the words or links in the table of contents.

ellandrd

No you would have the same .js for every page this .js is global for all pages that would content the menu.

The only thing you would have to change is the table containing the links and maybe the css page depending on what styles you wanted on each page?

if you require help, i'll help you out, but my menus are way better than any script you download, as they contain lots of junk code and alot of them, you "cannot" set the target!, mine you can, you can style mine anyway you want, have them horizontal or vertical...

ellandrd

did you copy and paste the 3 files and try my example?

Ellandrd

phita

ASKER

I want to be able to change the links and text on all of my .html files at once. Is that possible? :D

ellandrd

at once? dont really under stand? will all your page have the same links?

ellandrd

if all you pages will have all the same links, yes you only have to make 1 change and use the menu as a global menu for all pages if this is what you mean?

phita

ASKER

Ok I see now. I'll try this tonight.

Does your script have a little icon that shows up when the menu can drop down, and no icon when it's just a static link?

ellandrd

yes i code it for a icon to state if its drop-down or not...

phita

ASKER

Ok, I tried it.

If I have two pages eachwith the menu. If I want to change what the words say and the link urls, I would have to go into each one and change the href="#" right?

I would like to change them all (easily scalable) by just changing one file.

Also, can I control how many pixels wide I want the entire menu to be?

ellandrd

you can control the width of the menu in the css file

ok i will code up something so that you only have to change 1 page.

is it possible for you to connect & interact with a database - Maybe Access or even MYSQL?

that way you would only have to change the database data...

if not i'll code up another example...

phita

ASKER

But to create these html files, I'll need to go and do something in each file.

I want to be able to copy and paste a bunch of html files, change the actual content of the page, (not the table of contents), and I want to be able to update the table of contents of all of the pages at the same time by changing one file.

ellandrd

so by the looks of things you want to change all menus in all the .html pages at once using 1 file, the .js file?

correct?

ellandrd

ok since im in a good mood, i'll create another exmaple for you, 1 where you will only have to change the javascript page to update all your .html pages that content the .js link...

give me a while as im still in work and have a another job to finish.

Ellandrd

ellandrd

ok please download this menu script

http://www.seandelaneydownloads/experts-exchange/menu.zip

if you have problems downloading the file, tell me.

you just have to place the scripts into each html page, keeping the folder structure like i have done else wont work.

the menu can be fully customized to whatever style you like
you can also set what links labels targets etc you like too

works in nearly all browsers - IE4+, IE6+, NS4+, NS6+, Opera 5/6/7

Waiting your points ;-)

Ellandrd

phita

ASKER

Sounds like you know what I want :D The zip file doesn't exist tho. Thanks for all of your efforts!

ellandrd

ok i will post the here...

ellandrd

ellandrd

if that dont work, give me your email address and i'll email you them files...

ellandrd

ellandrd

have you downlaoded my files yet?

what you think?

Ellandrd

ellandrd

phita,

have you gave up? have you downloaded the files?

Ellandrd

phita

ASKER

Sorry, I've been hit with a ton of work. I'll get to it today. :D Thank you very much for your help.

ellandrd

no problems, i just though you gave up on me...

Ellandrd

ellandrd

did you get to try my menu yet?

ellandrd

OK phita,

you have 21 days to accept or close this as the page editors with close it unless there is comments made...

What is the currect status in regards to this question?

has my menu scripts solved your problem?

Ellandrd

phita

ASKER

I appologize for the delay. I have become extremely caught up in my midterms. I hope to complete this project in the next few days. I haven't forgotten about it. Thanks for your persistance and efforts!

ellandrd

phita

ASKER

How do I

1) change the dimensions of the main and sub menu's?
2) remove the bubble text that shows up, ie "Click here to order" when I mouse over register

ellandrd

>>1) change the dimensions of the main and sub menu's?

look here:

// "URL","LINK NAME",WIDTH,"TEXT-
ALIGNMENT","_TARGET","ALT TEXT",TOP POSITION,LEFT POSITION,"KEY TRIGGER","MCOLOR","RCOLOR","ALINK","AHOVER"

MI("http://www.freewebs.com/seandelaney","Homepage",145,"center","_self","Sean Delaney Homepage",0,0,"","","","","#000000");

for for example this first link, the width is 145.

again to explain what the

// "URL","LINK NAME",WIDTH,"TEXT-
ALIGNMENT","_TARGET","ALT TEXT",TOP POSITION,LEFT POSITION,"KEY TRIGGER","MCOLOR","RCOLOR","ALINK","AHOVER"

means, take ahover, this is the last parameter and i have it set to #000000 (black)

>>2) remove the bubble text that shows up, ie "Click here to order" when I mouse over register

this the alt for each href. you can remove these on any link by just having alt blank.

for example:

MI("http://www.freewebs.com/seandelaney","Register",135,"center","","Click here to order!",0,0,"","","","","");

change to

MI("http://www.freewebs.com/seandelaney","Register",135,"center","","<LEAVE THIS ALT MESSAGE HERE BLANK>",0,0,"","","","","");

Ellandrd

phita

ASKER

When I change the alt to "" firefox pops up an alt of <none>

ellandrd

it actually pops up the alt <none>?

post the line of code where you changed the alt value?

the alt should be blank: e.g.

MI("http://www.freewebs.com/seandelaney","Register",135,"center","","",0,0,"","","","","");

Ellandrd

ellandrd

firefox browser will not display the alt tag..

ellandrd

http://www.mozilla.org/support/firefox/faq#tooltips

ellandrd

get it working?

ellandrd

have you gave up?