[SOLVED] color-box selections

[pesho318i]

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

[Blake121]

Try something like:

Code: Select all

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

[pesho318i]

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.

[alexgeek]

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

[pesho318i]

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!

[Rakuli]

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,

[pesho318i]

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