How to validate onmouseover?

[student101]

How to validate onmouseover?

<a href="page.php" onmouseover="showtext('&lt;div style=&quot;padding-left:40px&quot;><a href=\'link1.php\'>Link1</a> | <a href=\'link2.php\'>Link2</a> | <a href=\'link3.php\'>Link3</a></div>','a', 'No')" onmouseout="hidetext()">Page1</a><img src="img/submenu.gif" alt=" " name="a" border="0" /> 

Tried this; no go!

<a href="page.php" onmouseover="showtext(&quot;&lt;div style=&quot;padding-left:40px&quot;&gt;&lt;a href=\&quot;link1.php\&quot;&gt;Link1&lt;/a&gt; | &lt;a href=\&quot;link2.php\&quot;&gt;Link2&lt;/a&gt; | <a href=\&quot;link3.php\&quot;&gt;Link3&lt;/a&gt;&lt;/div&gt;&quot;,&quot;a&quot;, &quot;No&quot;)" onmouseout="hidetext()">Page1</a><img src="img/submenu.gif" alt=" " name="a" border="0" /> 

This does not validate, other options I have are to code / find a CSS menu equal or figure out how to validate this.

JavaScript Document

//<![CDATA[
image1 = new Image
image2 = new Image
image1.src = 'img/submenu.gif'
image2.src = 'img/submenu_o.gif'

var baseopacity=0

function change(imagename, shop) {
document.a.src=image1.src
document.b.src=image1.src
document.c.src=image1.src
document.d.src=image1.src
if(shop=="Yes") {
document.e.src=image1.src
}

if (imagename == "a") {document.a.src=image2.src;
} else if (imagename == "b") {document.b.src=image2.src;
} else if (imagename == "c") {document.c.src=image2.src;
} else if (imagename == "d") {document.d.src=image2.src;
} else if (imagename == "e") {document.e.src=image2.src;
}

//document[imagename].src=image2.src

}

function showtext(thetext, imagename, shop){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("menu_b")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
document.getElementById("menu_b").innerHTML=thetext
change(imagename, shop)
instantset(100)
}

function notext(){
document.getElementById("menu_b").innerHTML=""
}

function hidetext(){
// instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
textcontainerobj.filters.alpha.opacity=degree
else if (document.getElementById && baseopacity==0)
document.getElementById("menu_b").innerHTML=""
}
//]]>

[Jesdisciple]

What doctype are you using for this? Insofar as this is an HTML question, that's an essential detail.

One way that will both validate with any doctype and satisfy best practices is to give the link an id attribute, find it via JS using getElementById, and add onmouseover and onmouseout properties to it.

[student101]

Doctype is XHTML Transitional;
Here is example;

Will have to find one of two other options; js or CSS equal

You can see it's the menu as here is the same page without menu;

Cheers

[student101]

One way that will both validate with any doctype and satisfy best practices is to give the link an id attribute, find it via JS using getElementById, and add onmouseover and onmouseout properties to it.

How does that work?
It seems like only solution here other than CSS image replacement?

Chrome CSS Drop Down Menu (v2.4)
http://www.dynamicdrive.com/dynamici...rome/index.htm

Could I not use the Chrome CSS Drop Down Menu and make it do what I need?

Edit: May have found a temporary solution;
http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

[Jesdisciple]

The inline event-handlers are the root of your current problem; they make your HTML extremely difficult to maintain, as you're finding out first-hand.

I have a few bones to pick with your code. First, you need to learn to indent in every language you use. This makes everything much more readable.

if(shop=="Yes") {
    document.e.src=image1.src
}

You're using a string like a boolean. If you pass a boolean value (either true or false) as the third argument to showtext, you can simplify that if statement in change:

if(shop) {
    document.e.src=image1.src
}

This is unnecessarily complex:

if (imagename == "a") {document.a.src=image2.src;
} else if (imagename == "b") {document.b.src=image2.src;
} else if (imagename == "c") {document.c.src=image2.src;
} else if (imagename == "d") {document.d.src=image2.src;
} else if (imagename == "e") {document.e.src=image2.src;
}

This does exactly the same thing but in a best-practice way (W3C, Mozilla, Microsoft):

document.getElementsByName(imagename)[0].src = image2.src;

And really it would be a better idea to change the image's name to an id and use this:

document.getElementById(imagename).src = image2.src;

How does that work?

It just returns the first element in the document with the specified id attribute. See http://javascript.wikia.com/wiki/Doc...getElementById.

It seems like only solution here other than CSS image replacement?

Chrome CSS Drop Down Menu (v2.4)
http://www.dynamicdrive.com/dynamici...rome/index.htm

Could I not use the Chrome CSS Drop Down Menu and make it do what I need?

That's actually a better implementation than the one I proposed.

May have found a temporary solution;
http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

I recommend the CSS-based script over that one.

[student101]

WOW! that's a lot.
Ok will need to look wiki...
Currently coding the CSS version of ddtabmenu 1, only problem with the images;
Do I span it in or add it the <a> tag?

[Jesdisciple]

Yeah, I'm researching the issues I run into while answering posts and applying that research to the wiki (even if it doesn't belong in my answers).

I don't understand your question... It says to use a list, if that's what you're asking?

[student101]

No, I mean the img part of the menu;
How do I use the CSS to display the next image which is a Red Arrow

<li><a href="#" rel="sc2">About us</a><img src="submenu_blue.gif" alt="" border="0" /></li>
CSS to change it to this; the img part?
<li><a href="#" rel="sc2">About us</a><img src="submenu_red.gif" alt="" border="0" /></li> 

Stuck on this - otherwise works better;

Which part of the CSS do I look at?

[Jesdisciple]

Oh, my bad.

At the top of "chrome.js", there are a few variables you may want to customize:

disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
dropdownindicator: '<img src="down.gif" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no
enableiframeshim: 1, //enable "iframe shim" in IE5.5/IE6? (1=yes, 0=no)inside "chromestyle.css". IE6 or below does not support CSS2 conditional HTML, so this feature isn't visible in that browser.

[student101]

Using this one;