Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Quick Help

  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Quick Help

    Hey

    Code:
    <td onmouseover="this.style.borderColor='#FFAE5B'" onmouseout="this.style.borderColor='#AFAFAF'">
    I have this code, in addition to changing the border color on mouseover / mouseout, i want to change the background image.

    Can anyone help me?

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    either add more statements, or create a function:

    Code:
    <td onmouseover="this.style.borderColor='#FFAE5B'" onmouseout="this.style.borderColor='#AFAFAF';this.style.backgroundImage='url(\"x.jpg\")';">
    Code:
    <td onmouseover="tdMouseOverFunction();" onmouseout="tdMouseOutFunction();">
    
    <script type="text/javascript">
    function tdMouseOverFunction()
    {
      this.style.borderColor='#FFAE5B';
      this.style.backgroundImage='url("y.jpg")';
    }
    
    function tdMouseOutFunction()
    {
      this.style.borderColor='#AFAFAF';
      this.style.backgroundImage='url("x.jpg")';
    }

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oddly enough, the background image doesn't change :-\

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Beagle
    this.style.borderColor='#FFAE5B';
    this.style.backgroundImage='url("y.jpg")';
    It's probably because you need to escape the double quotation marks with backslashes since they're special characters in Java, like so:

    this.style.backgroundImage = "url(\"y.jpg\")";

    By the way, you can use either single or double quote marks to surround a string; I prefer double so I changed them. It also conveniently illustrates why double quote marks need to be escaped. Since quote marks aren't required inside the URL call (url()), you can remove them altogether if you want to save yourself the trouble; I personally keep them as a matter of convention.

    Also you can just use the shorthand property background to do the same thing like in CSS; that's what they're based on anyway. Example:

    this.style.background = "url(\"y.jpg\")";
    this.style.background = "#000 url(\"y.jpg\") top center no-repeat fixed";
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    Apr 2005
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It still doesn't work, im trying to fetch the image for a sub directory, could that be it?

    /css/images/image.gif

    Code:
    <script type="text/javascript">
    function tdMouseOverFunction()
    {
      this.style.borderColor='#FFAE5B';
      this.style.backgroundImage='url(\"css/images/image2.gif\")';
    }
    
    function tdMouseOutFunction()
    {
      this.style.borderColor='#AFAFAF';
      this.style.backgroundImage='url(\"css/images/image.gif\")';
    }
    </script>
    Am I doing something wrong? This just isn't working for me :-\

  • #6
    New Coder
    Join Date
    Apr 2005
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    anyone?

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Try escaping the forward slashes with a backslash before them like I escaped the double quotation marks.

    this.style.backgroundImage='url(\"css\/images\/image2.gif\")';
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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