OnMouseOver/Out images

A

Al Camp

Hello all,
Now go easy on a newbie...

My editor (HTML-Kit V292) puts this entry on every page...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
And W3C suggested adding this line...
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

I built my web site, and all my code passed Tidy HTML and W3C.

I added the following OnMouseOver/Out code... (got it from Googling this
NG)
<A HREF="index.html"
onMouseOver="document.homepage.src='img/btn_homegrn.gif'"
onMouseOut="document.homepage.src='img/btn_home.gif'">
<IMG SRC="img/btn_home.gif" name="homepage" ALT = "0" BORDER="0" height=
"47" WIDTH="131"</A>

Now Tidy won't work at all. It comes up blank even if I put in a gross
error, and W3C indicates that I'm not compatible any longer.

I gather I may need a script, but isn't there any HTML method to
accomplish the OnMouseOver/Out?

Thanks in advance,
Al Camp
 
J

Jedi Fans

Al said:
I added the following OnMouseOver/Out code... (got it from Googling this
NG)
<A HREF="index.html"
onMouseOver="document.homepage.src='img/btn_homegrn.gif'"
onMouseOut="document.homepage.src='img/btn_home.gif'">
<IMG SRC="img/btn_home.gif" name="homepage" ALT = "0" BORDER="0" height=
"47" WIDTH="131"</A>
Click to expand...
closing > to img
 
A

Al Camp

Jedi Fans said:
closing > to img
Click to expand...


Jedi,
Once again... thanks. I corrected the > in all instances. If Tidy would
run, it probably would have picked up that typo.

Looks as though the MouseOver/Out code just won't "parse" using available
HTML checkers.
W3C still fails with only one error - "Not 4,0 transitional"
and
Line 25, column 36: there is no attribute "NAME"
I'm sure if I delete that code, the "fall out" error will move to the
next instance of the MouseOver code, and call the same error.

And, Tidy still won't run. I think it just craps out when it comes
across the Mouse code.

Looks as though I'll just have to "gut it out" and learn scripting, or...
drop the Mouse code altogether. I can only assume MouseOver/Out is obsolete
in 4.0 Transitional.

Thanks Jedi,
Al Camp
 
S

SpaceGirl

Al said:
Jedi,
Once again... thanks. I corrected the > in all instances. If Tidy would
run, it probably would have picked up that typo.

Looks as though the MouseOver/Out code just won't "parse" using available
HTML checkers.
W3C still fails with only one error - "Not 4,0 transitional"
and
Line 25, column 36: there is no attribute "NAME"
I'm sure if I delete that code, the "fall out" error will move to the
next instance of the MouseOver code, and call the same error.

And, Tidy still won't run. I think it just craps out when it comes
across the Mouse code.

Looks as though I'll just have to "gut it out" and learn scripting, or...
drop the Mouse code altogether. I can only assume MouseOver/Out is obsolete
in 4.0 Transitional.

Thanks Jedi,
Al Camp
Click to expand...

Personally, I'd also move the mouse events to the image rather than the
href -

<a href=""><img onmouseover="" onmouseout="" /></a>

Also, for ease of reading your own source back, dump HTML4 trans and
code in XHTML trans! It's much cleaner.

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #
# this post (c) Miranda Thomas 2005
# explicitly no permission given to Forum4Designers
# to duplicate this post.
 
A

Al Camp

SpaceGirl said:
Personally, I'd also move the mouse events to the image rather than the
href -

<a href=""><img onmouseover="" onmouseout="" /></a>

Also, for ease of reading your own source back, dump HTML4 trans and code
in XHTML trans! It's much cleaner.

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #
# this post (c) Miranda Thomas 2005
# explicitly no permission given to Forum4Designers
# to duplicate this post.
Click to expand...

Thanks Space Girl... I'll try that out.
Al Camp
 
E

Els

SpaceGirl said:
Also, for ease of reading your own source back, dump HTML4 trans and
code in XHTML trans! It's much cleaner.
Click to expand...

Really?
I've seen XHTML transitional code that was a /lot/ messier than my
HTML4 strict (which I could have given a trans doctype of course) ;-)
 
S

SpaceGirl

Beauregard said:
Better yet, dump "trans" (Transitional) and code in "Strict".

Probably HTML 4.01 Strict...

http://www.w3.org/QA/2002/04/valid-dtd-list.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Click to expand...

I dont like strict HTML 4... it has some odd things about it. But it's a
personal thing I suppose! XHTML is just easier to read and code I find!

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #
# this post (c) Miranda Thomas 2005
# explicitly no permission given to Forum4Designers
# to duplicate this post.
 
S

SpaceGirl

Els said:
SpaceGirl wrote:




Really?
I've seen XHTML transitional code that was a /lot/ messier than my
HTML4 strict (which I could have given a trans doctype of course) ;-)
Click to expand...

Maybe I'm just really good!

*looks puzzled*

No that can't be it :|

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #
# this post (c) Miranda Thomas 2005
# explicitly no permission given to Forum4Designers
# to duplicate this post.
 
A

Andy Dingley

My editor (HTML-Kit V292)
Click to expand...

You are using a text-only code editor, not a WYSIWYG (DreamWeaver or
FrontPage). Now this is a good thing (and certainly favoured by local
prejudices) but it does have a slightly steeper initial learning curve.

In particular, don't add things to your code without first finding out
what they're for.
puts this entry on every page...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Click to expand...

This is a "doctype" Search back in this newsgroup for why they're a
good thing.

Really you should use this one (later version)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

or even this one (which is "Strict")
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


Strict isn't much better and you might find the Transitional one useful
in practice, but it's a good teaching guide to just use the more
restrictive one to begin with.

And W3C suggested adding this line...
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
Click to expand...

Funny - I'd have expected the W3C to be too busy to take a personal
interest in individual sites. Did you get a personalised carrier
pigeon from Dave Raggett or something ?

I'd avoid using this meta element. It barely works at all, you
probably don't need it, and if you do really need it, then you should
use the HTTP headers as the right way to achieve the same result.


I built my web site, and all my code passed Tidy HTML and W3C.
Click to expand...

A good start. Validation is generally agreed to be A Good Thing.
I added the following OnMouseOver/Out code... (got it from Googling this
NG)
<A HREF="index.html"
onMouseOver="document.homepage.src='img/btn_homegrn.gif'"
onMouseOut="document.homepage.src='img/btn_home.gif'">
<IMG SRC="img/btn_home.gif" name="homepage" ALT = "0" BORDER="0" height=
"47" WIDTH="131"</A>
Click to expand...

You have a missing closing ">" at the end of the <img> tag

However this won't break Tidy on its own - there's presumably something
wrong with the rest of the page.
Now Tidy won't work at all. It comes up blank even if I put in a gross
error, and W3C indicates that I'm not compatible any longer.
Click to expand...

It gives you an error message too. This may help to solve the problem
(although they're admittedly cryptic and often hard to understand (the
real problem is usually some distance before where it becomes obvious).

I gather I may need a script, but isn't there any HTML method to
accomplish the OnMouseOver/Out?
Click to expand...

This is better done these days by using CSS and background-image with
a:hover (Search this newsgroup)

Your code should basically work, although it's hardly ideal coding. If
it's giving problems, try using both images in turn in the <img> element
- chances are that it can't find one.

ALT = "0" is a bad choice too. Use something sensible, or else an
empty string, but never "0" or "logo" or (even worse) "irrelevant
spacer image".


Some general advice:

- When posting problems to this newsgroup, post a URL to the code.
We're good, but we're not psychic ! Don't post fragments - give us a
URL to the same entire page and server context that you're seeing.

- Switch to CSS for controlling presentation, rather than obsolete
attributes like border. With a good CSS book (like Lie & Bos) you'll
learn this more easily than old-style HTML.

- Use lower case for your HTML tags and attributes. Easier to read, and
compatible with XHTML in the future.

- Get an editor you're happy with. Lots to choose from, no need to be
stuck with one.

- Use Firefox as a browser and the Tidy validator plugin. Tidy isn't a
great validator, but it's useful to have it so close at hand.
 
B

Beauregard T. Shagnasty

SpaceGirl said:
I dont like strict HTML 4... it has some odd things about it. But it's a
personal thing I suppose! XHTML is just easier to read and code I find!
Click to expand...

So ... you don't like Strict, either HTML *or* XHTML. You'd rather use
Transitional, which is for legacy pages with old-style code, eh?

XHTML and HTML aren't much different if both are Strict. Or
Transitional. (Yeah, I know all about the /> stuff and all lower case
in XHTML...) ;-)

Don't confuse apples (Strict/Transitional) and oranges (HTML/XHTML)...

Al, new pages should be Strict. <g>
 
A

Adrienne

Gazing into my crystal ball I observed Andy Dingley
I'd avoid using this meta element. It barely works at all, you
probably don't need it, and if you do really need it, then you should
use the HTTP headers as the right way to achieve the same result.
Click to expand...

The validator needs the meta element if the server is not sending it out.
This is particularly true if the user is trying to validate a local
document, if the they are uploading the source or using Opera to validate.
 
A

Andy Dingley

The validator needs the meta element if the server is not sending it out.
Click to expand...

It needs _some_ indication of what the encoding is. This doesn't have to
be the embedded <meta>

If you're on a server, do it right (send the header). If you're on
Apache, then this is easy. If you're not on Apache, then move.

Now assuming that the OP is using the "upload and validate" route rather
than "validate from the server", then they still have the option of
selecting this manually on the validator page.

For a local document, served from the filesystem, then there could be
some point to it - but at this level (we're looking for closing > here,
not subtle encoding problems) then the validator will usually have some
sensible defaulting mechanism.
 
A

Al Camp

Andy,
Thanks for the tips. I am using HTML-Kit to develop my pages, and I just
"gutted" it out. It took about a week or so to code everything up. I did
just a bit of HTML 3.0 some years ago.
Right now, the site is up and running, everything works fine, so I'm a
bit hesitant to mess with anything right now. I pass Tidy and W3C 4.0
Trans, but may try the 4.01 you suggested today.
I dropped the OnMouseOver for now... I have a new HTML book on it's way,
so I'll wait to see what it says regarding that.
I got errors on W3C... followed their written instructions... added that
statement... and the error went away Again, everything runs with IE and
Firefox, so I won't kick a sleeping dog on that matter either.

Thanks for the help,
Al Camp
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Flip-Cards with Local Images 1
R"richard" help out: background images in mobile 5
Help with my responsive home page 2
Help with code 0
Script Error 12
Working on mobile css menu with plenty of frustration! 2
cambiar borde celda DOM onmouseover - problemas 7

Members online

No members online now.
Total: 40 (members: 0, guests: 40)
Robots: 435

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top