how do i make text bold on mouse over

[jmpearson2001]

how do i make text bold on mouse over?:confused:

[Master_Elf]

Hi. Using Frontpage... you can right click on the page and select "Page properties".
- from there, go to "background tab"
- highlight "Enable hyperlink rollover effects"
- pick a style... "Rollover styles"
- Choose your style.
- select the colors you want to use for your rollover

Hope this helps.
Master_Elf

[mburt]

Err... No. That's not good. FrontPage tends to use functions that are already embedded functions in JavaScript.

Example:

For a mouseover frontpage might have:

function MouseOver() {...

which in reality could be a simple event handler.

So. If you want to make text bold onmouseover, use event handlers.

Example:

<p onmouseover="style.fontWeight = 'bold'" onmouseout="style.fontWeight = 'normal'">This is some text</p>

[Twey]

It should be noted, however, that this is rarely a good idea, since it will make your text move.

[mburt]

Yes. Bolding isn't an efficient hover idea. Don't try changing the font size either, it'll make it look messy on different browsers (not necessarily browsers, as much as it is the user's browser settings).

[jmpearson2001]

what about strikethrough, underlined, and italisized?

[Twey]

Underlining is fine. Italics are probably OK. I'd guess that strikethrough has no effect on the text width, but I can't be sure because I've never tried it (since it may make the text unreadable to some people, I don't consider it a very good idea).

[mburt]

Changing the background color is a good way to do hovers too.

[jmpearson2001]

i mean i want to strikethrough, underlined, and italisized but how?

[mburt]

Here's strike-through:

<span onmouseover="style.textDecoration = 'line-through'" onmouseout="style.textDecoration = 'none'">test</span>


Underline:

<span onmouseover="style.textDecoration = 'underline'" onmouseout="style.textDecoration = 'none'">test</span>


Italisized:

<span onmouseover="style.fontStyle = 'italic'" onmouseout="style.fontStyle = 'none'">test</span>

[cloud777]

Thanks a lot!
But how can I do if I want to specificate font family and size?
Thanks a lot

[coothead]

Hi there cloud777,


and a warm welcome to these forums. ;)

Try it like this...


<style type="text/css">
#myid:hover {
font-family:arial,sans-serif;
font-size:90%;
}
</style>
...where #myid is the "id" of the hovered element.


coothead

[Deadweight]

I am not sure if you want to it it like this but you can combine everything you want in something like this:


.fakeHover {
font-weight:bold;
text-decoration:underline;
font-family:"Comic Sans MS", cursive;
}
<p onmouseover="this.className='fakeHover'" onmouseout="this.className=''">This is some text</p>


This will allow you to have multiple items on hover then remove them.

[cloud777]

I must use only HTML...

How can I integrate font family and size in this (perfect) code?



<p onmouseover="style.fontWeight = 'bold'" onmouseout="style.fontWeight = 'normal'">This is some text</p>

[Deadweight]

<p onmouseover="this.style.cssText = 'font-weight:bold;font-family:\'Comic Sans MS\', cursive; font-size:20px'" onmouseout="this.style.cssText = ''">This is some text</p>

[cloud777]

<p onmouseover="this.style.cssText = 'font-weight:bold;font-family:\'Comic Sans MS\', cursive; font-size:20px'" onmouseout="this.style.cssText = ''">This is some text</p>


It semi-works!

When I put mouse on text it works, but If I don't pass cursor on it, text is smaller and formatted (text is in comic sans only on mouse over).
I would the same font size, and the same font, both on mouse over and not.

In any case, thanks!

[Deadweight]

That is because i only set the text when you mouse over.
Use this to change it on mouse out:
onmouseout="this.style.cssText = ''