How do I add text to rollover buttons?

[sean83]

I've designed a hosting template and hope to sell it, but I want to use as much text in dreamweaver as possible instead of graphic text so the client will be able to freely edit titles, headers and button text.

My main question is, how do you place text on rollover buttons in Dreamweaver? I know how to add text to normal buttons but adding text to buttons with rollovers is abit of a problem.

Thanks Anyone

[Kravvitz]

I recommend using CSS Background Image Switching without the part that hides the text.

I hope you don't use DreamWeaver's design view much.

[sean83]

I recommend using CSS Background Image Switching without the part that hides the text.

I hope you don't use DreamWeaver's design view much.

Thanks for the link, I normally use the split view, what is wrong with using the design view?

[JakesterL]

I am really new at this, so I apologize ahead of time for any trouble. I have the same problem, but I am using Front Page 2000. I am using java scripts that enable a button to swap images when using onMouseOver and to swap images onMouseDown, with a .au sound onMouseOver and a different sound onMouseDown. I can position text directly over the buttons using absolute positioning, but when the cursor is floated over the button with the text, the text masks the image and the “mouse over” effects won’t work under the text.

Is there a way to make the text transparent to the cursor or unselectable, so the “I” bar doesn’t show up when the cursor is over the text? I would rather not use a different image for every link and all the functions are working great so far, with just this text problem.

Here is a link to what I am working on, any help would be greatly appreciated. http://www.lalong.net/testing/mrollover.htm

[Kravvitz]

Use background images, like I said.

Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

You should test in good browsers like Firefox and Opera.

Thanks for the link, I normally use the split view, what is wrong with using the design view?

Like all WYSIWYG editors design view generates badly written code.

[JakesterL]

Yeah Kravvitz. I wasn’t ignoring you, it’s just 6 one way a half dozen the other. Either you make pictures of text for each link, or make pictures with text for each link. It just would have been a lot easier and flexible to be able to use normal text somehow. If the MS hover buttons could call it up and have it work properly as a parameter, I was just hoping there could be away of calling that attribute directly. Anyway thanks for you time.

[Kravvitz]

Read my first reply to this thread again. I said you can use the background image switching without hiding the text, so that you don't have to embed the text in the image.

If the MS hover buttons could call it up and have it work properly as a parameter, I was just hoping there could be away of calling that attribute directly

Huh?

[ray326]

Either you make pictures of text for each link, or make pictures with text for each link.

No, you make background pictures sans-text then use them as backgrounds for anchors contained in list items. The text of the anchor is the text that shows on the button. The backgrounds are swapped out using standard CSS techniques.

[JakesterL]

I recommend using CSS Background Image Switching without the part that hides the text.

The CSS background Image Switching article didn’t mention “hiding text” as per your post, but in the article "Using Background-Image to Replace Text": http://www.dynamicsitesolutions.com/.../replace_text/
it was pretty much all they talked about. Even though most of it looks like Greek to me at this time, I wasn’t about to give up until I saw something that mentioned “hiding text”. So I read the article and all the related links at the bottom. “Aha! This must have been what he was talking about.”

I hate being new at something and I wish I could comprehend it all at once, but I’m pretty sure that’s not going to happen. After ray326 posted, I realized I couldn’t see the forest for the trees (Thanks Ray).

Thanks again for your time Kravvitz and for you solution (Not to mention a good source of additional information as well ). The article http://www.wellstyled.com/css-nopreload-rollovers.html discussing using one image with three different states to avoid pre-loading, was well worth it all on its own. Now all I have to do is learn how to use it and I’m pretty sure I will eventually.

lol It’s a good thing you didn’t refer to a link in the Wikipedia, I could have been there for days.