PDA

View Full Version : Resolved How to validate onmouseover?



student101
10-28-2008, 07:50 AM
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
10-28-2008, 06:11 PM
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
10-28-2008, 06:15 PM
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
10-28-2008, 08:32 PM
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/dynamicindex1/chrome/index.htm

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

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

Jesdisciple
10-28-2008, 10:15 PM
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 (http://javascript.wikia.com/wiki/String) like a boolean (http://javascript.wikia.com/wiki/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 (http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259), Mozilla (https://developer.mozilla.org/en/DOM/document.getElementsByName), Microsoft (http://msdn.microsoft.com/en-us/library/ms536438(VS.85).aspx)):
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/Document#getElementById.


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

Chrome CSS Drop Down Menu (v2.4)
http://www.dynamicdrive.com/dynamicindex1/chrome/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.htmI recommend the CSS-based script over that one.

student101
10-28-2008, 10:25 PM
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
10-28-2008, 10:35 PM
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
10-28-2008, 10:41 PM
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
10-28-2008, 10:49 PM
Oh, my bad.
At the top of "chrome.js (http://www.dynamicdrive.com/dynamicindex1/chrome/chromejs/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
10-28-2008, 10:52 PM
Using this one;

Jesdisciple
10-28-2008, 11:33 PM
(I'm not a CSS guy, so if this doesn't work ask in CSS (http://www.dynamicdrive.com/forums/forumdisplay.php?f=6).) First, change the HTML to this:
<li><a href="#" rel="sc2">About us</a><img src="submenu_blue.gif" class="inactive" alt="" border="0" /><img src="submenu_red.gif" class="active" alt="" border="0" /></li>Then add these CSS rules right below .basictab li a:hover, .basictab li a.current:
.basictab li a img.inactive{
visibility: visible;
}
.basictab li a img.active{
visibility: hidden;
}

.basictab li a:hover img.inactive, .basictab li a.current img.inactive{
visibility: hidden;
}
.basictab li a:hover img.active, .basictab li a.current img.active{
visibility: visible;
}The first two rules (the defaults) must be first or they'll override the others.

student101
10-29-2008, 06:53 AM
Thanks will do.
They might complain about posting twice.

I just managed to code this in; Finally![/url]


Cheers

Jesdisciple
10-29-2008, 11:49 AM
Now that I look at my CSS again, you can remove that first rule because it's the browser's default.

By the way, could you mark the thread as resolved (top of the page, Thread Tools)?

student101
10-29-2008, 12:03 PM
I would love to resolve this, but there seems to be more to it;

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="hackie7.css" />
<![endif]-->
//inside hackie7
.custom {
background-image: url(../img/submenu.gif);
background-repeat: no-repeat;
background-position: 70% .1em;
}

This seems broken or it's just IE7 that is stupid.

Jesdisciple
10-29-2008, 12:12 PM
I don't find a link tag anywhere in the current page or that file on your server. However, I found two blocks at the bottom of the style tag which should be changed to the following; maybe they will help you resolve the problem in hackie7.css.
.custom {
background-image: url(img/submenu_blue.gif);
background-repeat: no-repeat;
background-position: 95% .4em;
/* list-style-image:url(img/submenu_blue.gif);
list-style-position:inside;
height:1.5em; */
}

.custom:hover {
/*list-style-image:url(img/submenu_red.gif);*/
background-image: url(img/submenu_red.gif);
background-repeat: no-repeat;
}

student101
10-29-2008, 12:18 PM
Sorry I am just so tired of this menu thingy;
I just, just fixed it;
background-position: 95% .4em;
It works so nice and it validates!!! The whole objective.

Thank you so much for your help here; I do appreciate it


could you mark the thread as resolved (top of the page, Thread Tools)?
Can't resolve; I am Junior here not enough posts or something.

Cheers

student101
04-25-2009, 05:39 AM
Please could an Admin or Moderator remove or change the links
on this thread, please.

Thank you.

jscheuer1
04-25-2009, 05:48 AM
Currently XHTML isn't the best choice. HTML 4.01 strict is the current best standard for pages.

Regardless, if you place all of your script and css code external to the page, things will have a better chance of working out as far as validation goes.

student101
04-25-2009, 06:03 AM
WOW things have changed.
Ok, need to fix this site as well.
It validates, could you remove or change the links please.
Thanks.

Thank you
It's here as well...
http://www.dynamicdrive.com/forums/showthread.php?t=38128