SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard davidjmedlock's Avatar
    Join Date
    Dec 2002
    Location
    Nashville, TN USA
    Posts
    1,688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simulate a Windows-like Button Using JavaScript

    These comments are in regards to the SitePoint.com article 'Simulate a Windows-like Button Using JavaScript'.

    Another way to do this: (For me, this is a little easier, I guess it's really a personal preference)

    1) Adhere to a standard naming convention. For example I have graphics named:
    --> home_n.gif
    --> home_r.gif
    --> services_n.gif
    --> services_r.gif

    2) Name my images the same as the graphics:
    --> <img src="home_n.gif" id="home" name="home" alt="[ .. ]">

    3) Here's the JavaScript function I use:

    PHP Code:
    function changeImg(elemdir) {
       var 
    path "/images/" elem
       
    if (dir == "over") {
          
    path += "_r.gif";
       }
       else {
          
    path += "_n.gif";
       }
       
    document.images[elem].src path;

    4) Here's your link:

    PHP Code:
    <a href="#" onMouseOver="changeImg('home', 'over');" onMouseOut="changeImg('home', 'out');">
       <
    img src="home_n.gif" id="home" name="home" alt="[ .. ]">
    </
    a
    And you're done... Then you can simply copy and paste the link and image and replace "home" with "services", "contact", etc. Just don't forget to change your alt text for each image.

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Even simpler, if you stick with the naming convention that is
    Code:
    function changeImg( img )
    {
        if ( /_r/.test( img.src ) )
            img.src = img.src.replace( /_r/, "_n" );
        else
            img.src = img.src.replace( /_n/, "_r" );
    }
    
    <img src="home_n.gif" onmouseover="changeImg(this)" onmouseout="changeImg(this)" />
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Wizard davidjmedlock's Avatar
    Join Date
    Dec 2002
    Location
    Nashville, TN USA
    Posts
    1,688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    only thing is... the <img> tag doesn't have an onMouseOver and onMouseOut event in older browsers. Good code, though.

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by davidjmedlock
    only thing is... the <img> tag doesn't have an onMouseOver and onMouseOut event in older browsers. Good code, though.
    Ya, but how old? Any version 4 browser should handle this just fine.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Location
    Texas
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <img src="home_n.gif" onmouseover="changeImg(this)" onmouseout="changeImg(this)" />
    For Netscape 4 to handle this code, you need to specify "onMouseOut" and "onMouseOver" (use capitals)

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see. Guess I've gotten used to XHTML coding practices.

    Ah, I've never accomodated NS4.x anyway, not even 3 years ago.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Location
    Texas
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would have ditched NS4 myself, except that one of my clients has several employees who still use NS4.

    I am personally looking forward to the complete and utter demise of Netscape 4.

  8. #8
    SitePoint Wizard davidjmedlock's Avatar
    Join Date
    Dec 2002
    Location
    Nashville, TN USA
    Posts
    1,688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, NS 4 is evil...

  9. #9
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting...

    A while ago there was this discussion about Faking a graphical link
    I.e. text in the image is bad, because search engines look for text in the <a> tag

  10. #10
    SitePoint Member
    Join Date
    May 2002
    Location
    Brighton, UK
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    why not use CSS instead?

    Instead of images, one could use a normal HTML link combined with CSS to replicate the button. Much less code and no need to preload three images.

    Example

    CSS code:

    .zbut {
    width:13em;
    font:10px geneva, verdana, arial, sans-serif;
    color:#dff; background:#399;
    margin:0; padding:0.2em;
    }

    A.zbut {
    display:block;
    text-align:center;
    text-decoration:none;
    }

    A:link.zbutton,A:visited.zbut,A:hover.zbut {
    border:2px outset;
    }

    A:active.zbut {
    border:2px inset;
    position:relative;
    top:1px; left:1px;
    }


    HTML:

    <a href="/mylink/" class="zbut">Button</a>

    More details and example in action here:
    http://www.clagnut.com/blog/132/
    dickster
    www.clagnut.com


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
  •