[SOLVED] color-box selections

hi all,

I am trying to create a small block, consisting of color boxes.
Roughly, my structure is something of the sort:

<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
...
<ul>

I want to change the look of the <li>-s on mouse hover and do another change when a color box is clicked.

the color set is dynamically obtained with .jsp and that's why I cannot just create a css class for every color box.

Can you tell me a standard solution for such a problem. Do I have to change the background image of the <li> tag, or I'd better insert a <img> tag within the link. Do I have to use JavaScript for that?

I tried to change the background attribute of the <li> using document.getElementById(li_id).style.background=". ..." but it didn't work.


Thanks

Try something like:

Code: Select all

document.getElementById(li_id).style.background=" url('my-background.png') ";

amazing, I tried all kinds of style.background / style.backgroundImage combinations, with all sorts of quotes - single, double and semicolons.

In the end the "winning combination" was:

elem.style.backgroundImage = "url(images/image.gif)";


cheers.

Could you please mark this as solved via thread tools! Thanks.

hi
As I explained in the previous posts, I need a sequence of color boxes for a color selection. I implemented this as an unordered list and each <li> element has the corresponding color as a background picture.
Onmouseover I change the background of the <li> with another picture, using:

elem.style.backgroundImage = "url(images/image.gif)";

However, the images flicker and the user experience is therefore spoiled.

Can you suggest another possible implementation for this purpose?

Thanks!

You can just use css for this..

Place links inside the li's and define some CSS

Code: Select all

li a:link, li a:visited
{
/*Standard colour */
    background-image: url(images/image1.gif);
}
li a:hover
{
/*mouseover */
     background-image: url(images/image2.gif);
}
li a:active
{
   /*clicked*/
    background-image: url(images/image3.gif);
}

Just give each a an id or specific class and style in the above fashion....

Cheers,

yup, you are right! I'll try it through css, thanks