1

The goal: to randomly assign different color CSS backgrounds to a Wordpress-generated tag cloud on a mouseover by the user.

My method (so far unsuccessful): 

        <?php 
            $colors = array( 0 => "#645676", "#427048", "#654335", "#ab2805", "#a59d57", "#302f2f", "#81510d" );
            $tags = wp_tag_cloud('smallest=10&largest=10&unit=px&number=40&format=array&echo=0'); 
            shuffle($tags); 
            foreach ($tags as $tag) { 
                    shuffle($colors);
                echo "<li style=\"a:hover=background:".$colors[0].";\"> $tag \n </li>"; 
            } 
        ?>

I figured a foreach PHP loop would be the easiest way to do this. I created two arrays ($colors and $tags). I manually filled $colors with the hex tags of the colors I want to use. $tags is populated by the wordpress tag cloud array (more info here if interested: http://codex.wordpress.org/Function_Reference/wp_tag_cloud) which I have set to grab the 40 most popular tags on this blog.

I then use the PHP shuffle function on $tags to mix up the top 40 tags, run those 40 tags through a foreach loop which then randomly assigns one of the shuffled $colors to a CSS pseudo class which gets echoed out.

The code works, here is a sample of the output:

<li style="a:hover=background:#302f2f;"> <a href='http://localhost:8888/nutritionwonderland_2/tag/truvia/' class='tag-link-49' title='3 topics' style='font-size: 10px;'>truvia</a> 
 </li><li style="a:hover=background:#81510d;"> <a href='http://localhost:8888/nutritionwonderland_2/tag/cancer/' class='tag-link-8' title='11 topics' style='font-size: 10px;'>cancer</a> 
 </li><li style="a:hover=background:#427048;"> <a href='http://localhost:8888/nutritionwonderland_2/tag/antioxidants/' class='tag-link-93' title='4 topics' style='font-size: 10px;'>antioxidants</a> 
 </li>

The problem: when I mouseover any of the tags, the background never shows up. This makes me think the CSS may be bad.

A couple of questions for the peanut gallery:
1) How do you apply CSS pseudo classes randomly via PHP?
2) Even if this worked, would the CSS output here by standards compliant?
3) Should I even worry about standards here?

Interested to hear any responses - thanks in advance for your time.

serraosays
  • 7,163
  • 3
  • 35
  • 60

3 Answers3

0

How to write a:hover in inline CSS?

short answer: you can't.

long answer: you shouldn't.

Give it a class name or an id and use stylesheets to apply the style

:hover is a pseudo-selector and, for css, only has meaning within the style sheet. There is no inline-style equivalent (as it isn't defining the selection criteria).

Community
  • 1
  • 1
drudge
  • 35,471
  • 7
  • 34
  • 45
0

first thing that jumps out. if you're just changing the background-color an dnot the rest of the background-associated items, you might be better off using background-color as your targeted element to change. second, I would probably render the css out in the stylesheet, even with your randomization, and give each of the a tags the appropriate class

<li class="pseudo_01"> <a href='http://localhost:8888/nutritionwonderland_2/tag/truvia/' class='tag-link-49' title='3 topics' style='font-size: 10px;'>truvia</a>

and 

<style>
.pseudo_01{
...
}
</style>
FatherStorm
  • 7,133
  • 1
  • 21
  • 27
  • Interesting idea - I hadn't thought of this approach: define the different colored backgrounds out in the stylesheet and then randomly apply them. That should also simplify the PHP further. Great idea. – serraosays Nov 08 '10 at 20:08
  • The modifications to the original PHP code posted here were very slight - all I did was define the $colors array as 0,1,2,3,4,5,6 and then just changed the call down in foreach loop accordingly. With the pseudo class safely in the stylesheet, everything worked as I had hoped. – serraosays Nov 08 '10 at 21:12
0

I think you'll need javascript for this one. PHP is server-side, so you couldn't pick a random color on mouse over. I may have completely misinterpreted the question; I assume that you don't want to simply pick a random color on page load and display that same color on every mouse over.

Tmas
  • 55
  • 1
  • 8