SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Classes onMouseOver

    I've written this script to associate multiple classes to an item onMouseover but it keeps coming up with an error and I can't work out why - can anyone help?

    Code:
    <html>
    <head>
    <title>Mouseover Buttons</title>
    <style type="text/css">
    <!--
    body, table {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 9px;
    }
    .btn {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 9px;
     background-color: #CCCCCC;
     height: 20px;
     border: 0px none;
    }
    .b_l {
     background-image: url(img/button_left.gif);
     background-repeat: no-repeat;
     background-position: left top;
    }
    .b_r {
     background-image: url(img/button_right.gif);
     background-repeat: no-repeat;
     background-position: right top;
    }
    //-->
    </style>
    <script language="javascript" type="text/javascript">
    <!--
     function btnChange(n) {
      var sItem = n;
      if(sItem.class=='btn') {
       sItem.class = 'btn b_l b_r';
      } else {
       sItem.class = 'btn';
      }
     }
     
    //-->
    </script>
    </head>
    <body>
    <table width="200" border="0" cellspacing="0" cellpadding="0">
     <form name="frmMain" method="post" action="script.asp">
      <tr>
    	<td width="60">Name</td>
    	<td>
    	  <input name="name" type="text" id="name" size="20">
     </td>
      </tr>
      <tr>
    	<td>&nbsp;</td>
    	<td><input name="Submit" type="submit" class="btn" value="Submit" id="btnSubmit" onmouseover="btnChange(this);" onMouseOut="btnChange(this);"></td>
      </tr>
    	</form>
    </table>
    </body>
    </html>
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use "sItem.className" instead of "sItem.class"

  3. #3
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aaah - of course! What a fool I am...

    I've got that working now but for some reason I can't assign two background images to the cell. I'm probably trying the impossible anyway, but does anyone know if there is a way of doing this? The idea is to have two images that go around the left and right side of the button and apply these on mouseover.
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  4. #4
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You only set one background image on any one element with CSS.

    Actually, have you considered using the sliding doors technique instead of Javascript?

    http://www.alistapart.com/articles/slidingdoors2/
    http://www.alistapart.com/articles/slidingdoors/

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac


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
  •