www.webdeveloper.com
Results 1 to 6 of 6

Thread: I have a show/hide button that I'd like to change text & add rollovers...

  1. #1
    Join Date
    Apr 2009
    Posts
    54

    I have a show/hide button that I'd like to change text & add rollovers...

    at this page: www.azaallen.com

    I have a button on the left, part way down that says "show/hide resume" How could I...
    1) make the text read either "show" or "hide" when the button is clicked?
    2) put a rollover effect on the button (simple text-shadow)

    I've tried finding tutorials, but they are all for other types of buttons (submit, etc)

    Should I be using a different type of button?

    Thanks all!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb Consider this ...

    First find this:
    Code:
    <input type="button" id="resButton" value="Hide / Show Resume" onclick="toggleResume()">
    and change to this:
    Code:
    <input type="button" id="resButton" value="Hide / Show" onclick="toggleResume()">
    Then add this change:
    Code:
    <input type="button" id="resButton" value="Hide / Show"  
     onclick="toggleResume()" 
     onmouseover="this.style.backgroundColor='yellow'"  
     onmouseout="this.style.backgroundColor='cyan'">
    ... or some other appropriate background color.

  3. #3
    Join Date
    Apr 2009
    Posts
    54
    Thanks JMRKER - the I forgot about the onmouseover events!

    As for the text, I wasn't clear... I am trying to get the text to read either show or hide whenever I click the button so that it changes to reflect what the button will do. So it will display "Hide Resume" to let the user know they can hide it, and then after they've hidden it, the button will display "Show Resume".

    Thanks again!

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb One possible solution ...

    Change the value of the button in the 'toggleResume()' function.

    Determine message displayed by condition of the style.display.


  5. #5
    Join Date
    Apr 2009
    Posts
    54
    Thank you very much... it was simpler than I thought!
    I just added
    Code:
    document.getElementById("resButton").value = "Show Resume";
    &
    Code:
    document.getElementById("resButton").value = "Hide Resume";
    to my existing if/else statement.

    Thanks so much for your help!

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330
    You're most welcome.
    Glad I could help.
    Good Luck!

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