mouseovers

[Lisa A]

Is there a way in front page to have mouse overs on buttons without using
the premade buttons? I'd like to use my own.
Lisa

 

[Trevor L.]

Is there a way in front page to have mouse overs on buttons without
using the premade buttons? I'd like to use my own.
Lisa

From a beginner.

Won't most elements support the onmouseover= option ?
e.g.
<a href="http://www.abc.net.au/"
onmouseover="toolTip('ABC Online',this)">
<img src="images/display/abc_banner_logo.gif"
alt="" width="40" height="24" />ABC Online</a>
<hr />

toolTip() is a function which creates a tooltip, so when mousing over the
image abc_banner_logo.gif, the tooltip appears, and of course any image can
be used. (See my site if you want to see it in action). I developed the
toolTip function from code posted on the webdeveloper forum. I can post my
modified code if you want it

 

[Murray]

Won't most elements support the onmouseover= option ?

Yes. But it works best on <a> tags.

And in your example, you have hit a fly with a sledgehammer. This would be
much better and would work even with js disabled (i.e., would convey
information to a screenreader) -

<a href="http://www.abc.net.au/" title="ABC Online"><img
src="images/display/abc_banner_logo.gif" alt="You do need something here"
width="40" height="24" />ABC Online</a><hr />

 

[Lisa A]

On the http://www.abc.net.au/, that is something I want to do. When you
move your mouse over the words on the left column, they change or are
highlighted. Exactly what code do I need to insert here?
Lisa

 

[Murray]

Each of those words is a hyperlink (that is contained in an unordered list -

<li id="s1399252"><a href="/news/topstories.htm">Top Stories,</a> </li>

Being hyperlinks, the browser will change their appearance when you roll (or
hover) your mouse over them. The exact details of how they will look can be
controlled by CSS styles applied to the page. In this case, there is this
set of CSS "pseudo-class" style rules defined for the page -

A:link {
COLOR: #1981a5;
TEXT-DECORATION: none
}
A:visited {
COLOR: #1981a5;
TEXT-DECORATION: none
}
A:hover {
BACKGROUND-COLOR: #e7e7e7;
TEXT-DECORATION: none
}
A:active {
BACKGROUND-COLOR: #e7e7e7;
TEXT-DECORATION: none
}

which explicitly determine how each link will look when it is non-visited,
visited, hovered, and while your mouse is clicking on it.

You can define those pseudo-classes in FP by using the CSS editing functions
of the program.

 

[Lisa A]

I have never used CSS style sheets. I just use the basic plain page and
build from there. Should I be using style sheets?
thanks,
Lisa

 

[Murray]

Should I be using style sheets?

Soitenly. 8)

But take it a little at a time. If you are serious about building web
pages, you will want to bring this technology on board at your earliest
opportunity.

I suggest you start here -

http://www.w3schools.com

 

[Trevor L.]

Yes. But it works best on <a> tags.

And in your example, you have hit a fly with a sledgehammer. This
would be much better and would work even with js disabled (i.e.,
would convey information to a screenreader) -

<a href="http://www.abc.net.au/" title="ABC Online"><img
src="images/display/abc_banner_logo.gif" alt="You do need something
here" width="40" height="24" />ABC Online</a><hr />

Murray,
You are one of the persons on this NG who always gives good informed advice,
so I am not trying to start an argument with someone who knows much more
than I do.

Let me explain why I used this approach.

I tried the alt= approach and it works fine in IE. But in Firefox it
doesn't.
I have read here that MS implements the alt= incorrectly in IE, in that
instead of being a strict *alternative* to the img, it displays every time,
whereas Firefox gets it right and uses the alt= only when there is no img
available.

I also tried title= but it didn't work in Firefox either (which surprised
me).

So the sledgehammer came out of the cupboard. One thing about using this
method is that it is consistent - I can use it any tag (at least I assume I
can, which is why I asked : "Won't most elements support the onmouseover=
option ?").

I suppose I could try both, i.e. an alt= and an onmouseover= (or 3, i.e. an
alt=, a title= and an onmouseover=). To use another cliché, the belt and
braces approach. Although with 3 elements, is it belt, braces and a piece of
string ? :-D

 

[Trevor L.]

Soitenly. 8)

But take it a little at a time. If you are serious about building web
pages, you will want to bring this technology on board at your
earliest opportunity.

I suggest you start here -

http://www.w3schools.com

To add to Murray's advice, it is easy to place these styles in your page.

Go to the HTML or Code view in FP and cut and paste the following between
<head> and </head>

COLOR: #1981a5;
TEXT-DECORATION: none
}
A:visited {
COLOR: #1981a5;
TEXT-DECORATION: none
}
A:hover {
BACKGROUND-COLOR: #e7e7e7;
TEXT-DECORATION: none
}
A:active {
BACKGROUND-COLOR: #e7e7e7;
TEXT-DECORATION: none
}

</style>

If you like the result , you can then look at placing the code in an
external style sheet

 

[Murray]

I tried the alt= approach and it works fine in IE. But in Firefox it

doesn't.

Note that I didn't recommend use of the alt attribute. IE gets it wrong for
sure. Both IE and FF (and every other browser) display the title attribute
(assuming it doesn't contain more than 150 characters) just the way you'd
want.

I also tried title= but it didn't work in Firefox either (which surprised
me).

Then you tried it wrong.

LOL - you wouldn't even need the belt. This is rock solid stuff here - no
support required.

 

[Murray]

Clarification - I didn't recommend the alt attribute *for this purpose*.
You should use the alt attribute for the purpose it was designed for - that
is to identify the image if graphics are disabled in the browser.

 

[Trevor L.]

Yes, thank you Murray.

I thought alt= had a problem. I only wrote that I tried it before trying
title= to explain my whole thought process.

I will try title= again in Firefox.

 

[Murray]

Did it work for you?

--
Murray

Yes, thank you Murray.

I thought alt= had a problem. I only wrote that I tried it before trying
title= to explain my whole thought process.

I will try title= again in Firefox.