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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question adding background image to options in select box

    hi guys,
    im using a javascript to add options to the select box as below:

    function addOption(selectbox, value, text )
    {
    var optn = document.createElement("OPTION");
    optn.text = text;
    optn.value = value;
    selectbox.options.add(optn);
    }

    i wanted to add a background image to the options in the select box.
    please help me with the css code for select box and its options.

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Code:
    function addOption(selectbox, value, text )
    {
    var optn = document.createElement("OPTION");
    optn.text = text;
    optn.value = value;
    optn.style.background='#f00'; // Creates a (red) background color
    selectbox.options.add(optn);
    }
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question adding .png image file as a background to the options in the select box

    Hi
    Thanks for your reply.
    But i wanted to add a .png image file as a background to the options in the select box.

    For example as like in the below code,

    <option style="background-image: url(logo.png);"> java </option>

    i need to add the same .png image file as a background to the options using javascript in the below function

    function addOption(selectbox, value, text )
    {
    var optn = document.createElement("OPTION");
    optn.text = text;
    optn.value = value;
    selectbox.options.add(optn);
    }

    Please help me

    Thanks in Advance

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Code:
    optn.style.backgroundImage='url(logo.png)';
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question adding .png image file as a background to the options in the select box

    hi,

    code:
    optn.style.backgroundImage='url(logo.png)';
    is not working for me.
    Im not getting any errors,but i could not see the image at the background of the option.

    My requirement is to change the appearance of the select box into embossed buttons.
    So i tried use the logo.png as background image to achieve that.

    Is there any other way to achieve my requirement?

    Please help me

    Thanks in Advance

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    As far as I know, it is not possible to add a background image to an option tag.
    ☠ ☠RON☠ ☠

  • #7
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Major Payne View Post
    As far as I know, it is not possible to add a background image to an option tag.
    It IS possible, as I've just seen for myself (in Mozilla FF), simple as that:

    <OPTION style="background:url('relative_path_to/myimage.jpg');">

    or, alternatively:

    HTML:
    <OPTION class="with_image">

    CSS:
    option.with_image
    {
    background:url('relative_path_to/myimage.jpg');
    }

    HOWEVER, there is a different problem: When I scroll through the list and the mouse is placed exactly between two options, the background image is shifted, displaced.

    Is there a way to "fixate" the background image onChange? I added a :hover directive in CSS:

    option.with_image:hover
    {
    background:url('');
    }

    This preserves the image when the mouse is placed entirely on an option, but not when hovering between options.

    Any help is appreciated.

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Quote Originally Posted by freezergirl View Post
    It IS possible, as I've just seen for myself (in Mozilla FF), simple as that:

    <OPTION style="background:url('relative_path_to/myimage.jpg');">

    or, alternatively:

    HTML:
    <OPTION class="with_image">

    CSS:
    option.with_image
    {
    background:url('relative_path_to/myimage.jpg');
    }

    HOWEVER, there is a different problem: When I scroll through the list and the mouse is placed exactly between two options, the background image is shifted, displaced.

    Is there a way to "fixate" the background image onChange? I added a :hover directive in CSS:

    option.with_image:hover
    {
    background:url('');
    }

    This preserves the image when the mouse is placed entirely on an option, but not when hovering between options.

    Any help is appreciated.
    He wanted to do it with JavaScript. Your way has been done many times and that example was already posted in OP's #3 post. He is asking for another way to do it. Sorry if I did not make myself clearer as to the fact the tag itself can have a background image, but not sure about putting one in the way OP wanted. I imagine that function can be sone with JavaScript and post would have to be made in that forum.
    Last edited by Major Payne; 08-13-2010 at 12:01 AM.
    ☠ ☠RON☠ ☠


  •  

    LinkBacks (?)


    Tags for this Thread

    Posting Permissions

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