dcsimg
www.webdeveloper.com
Results 1 to 9 of 9

Thread: How do I add text to rollover buttons?

  1. #1
    Join Date
    Mar 2006
    Location
    Australia, Newcastle
    Posts
    34

    How do I add text to rollover buttons?

    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

  2. #2
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    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.

  3. #3
    Join Date
    Mar 2006
    Location
    Australia, Newcastle
    Posts
    34
    Quote Originally Posted by 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.
    Thanks for the link, I normally use the split view, what is wrong with using the design view?

  4. #4
    Join Date
    Mar 2006
    Posts
    4
    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

  5. #5
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    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.

    Quote Originally Posted by sean83
    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.

  6. #6
    Join Date
    Mar 2006
    Posts
    4
    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.

  7. #7
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    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?

  8. #8
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.

  9. #9
    Join Date
    Mar 2006
    Posts
    4
    Quote Originally Posted by Kravvitz
    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.
    Last edited by JakesterL; 03-19-2006 at 04:54 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles