SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Buttons

    Hey folks, please note I'm new here so if this is in the wrong place please move it.

    I'm currently working on a website, and the client wishes to have buttons on the website that have the same effect of the red ones on this site. I understand that with Javascript you can make the image appear on the right hand side of the button when the cursor hovers over it, but I do not know how this is done.

    Is there a shortcut to do this in DreamWeaver, that preferably requires minimal coding. Or is an effect like this better off done in flash?

    Thanks in advance for any help,

    Steve

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a classic article on Alistapart known as the Suckerfish Dropdowns which may or may not solve your problem, but it will put you in the right direction.

    Keep in mind when elements are in the spot you want them, you can always toggle their display to show/hide them.

    Here is a simple toggle function:

    Code:
    function toggle() {
      for (var i=0, el; el = document.getElementById(arguments[i]); i++) {
        el.style.display = (el.style.display != 'none' ? 'none' : '' );
      }
    }
    Then Toggle elements (by their id) to your hearts desire.

    Code:
    <div id="toggler">
      Toggle the example
    </div>
    <div id="example">
      hello world
    </div>
    
    <script>
    document.getElementById('toggler').onclick = function() {
      toggle('example');
    };
    </script>

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, it's much appreciated. ^_^


Bookmarks

Posting Permissions

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