www.webdeveloper.com
Results 1 to 4 of 4

Thread: Javascript background image with css.

  1. #1
    Join Date
    Jul 2007
    Posts
    7

    Javascript background image with css.

    Hi,

    this is my code:

    input.button
    {
    background-image: url(./buttons/butopen.png);
    height: 34px;
    width: 34px;
    }
    </style>

    <script type="text/javascript">

    function parameter() {
    var element = document.getElementById('buta');
    if (element.style.background = "url(./buttons/butopen.png)")
    element.style.background = "url(./buttons/butlock.png)";
    else
    element.style.background = "url(./buttons/butopen.png)";
    }
    </script>
    </head>
    <center>
    <body>
    <input class=button id ="buta" type="button" value="" onclick="parameter()">
    </body>
    </html>

    so basically i just want to change the background image of a button by means of onclick() and after that, by again klick on it, it shoud change to the original image.
    But it seems that my js function doesn't work properly. it changes to the 2nd image but if i once again click on the button, it doesn't change back to the 1st image.

    For your Help, i thank you very much.

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    Code:
    if ((element.style.backgroundImage == "url(./buttons/butopen.png)") || (element.style.backgroundImage == ""))
    The first time you click there is nothing in "background" since it was done with a style sheet (maybe just an IE quirk).

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    As far as I know the url value is a string:

    element.style.background="url('./buttons/butopen.png')"
    ---
    EDIT: Hm, it looks like it works anyway, with or without quoting the url value...
    Last edited by Kor; 07-13-2007 at 06:43 AM.

  4. #4
    Join Date
    Jul 2007
    Posts
    7
    Hi gil_davis, hi Kor,

    thanks for the input. it works now... thank u very much

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