CSS Sprites are working in the HTML of the page, but not in Javascript?

Question

CSS Sprites are working in the HTML of the page, but not in Javascript?

I am trying to install http://www.spyka.net/scripts/javascript/easy-social-bookmarks and add CSS Sprites to minimise the server calls.

I created the style sheet like this:

<style type="text/css">
<!--
.i_blinklist
{
width:21px;
height:21px;
background-repeat: no-repeat;
background-image: url(img_socialsprites.jpg);
background-position: 0 0;
}
.i_blogmarks
//-->
</style>

This code works in the HTML of the page like this:

<div class=i_blinklist></div>

When I add it to the javascript like this, it doesn't work:

sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist',  '<div class=i_blinklist></div>');

Here is the main workings of the script which may also affect it:

function swgbookmarks()
{
    for(i = 0; i < sites.length; i++)
    {
        var g = sites[i];
        var u = g[0];
        u = u.replace('{url}', escape(window.location.href));
        u = u.replace('{title}', escape(window.document.title));
        var img = (imagepath == '0') ? '' : '<img src="'+g[2]+'" alt="'+g[1]+'" />&nbsp; ';
        var k = '<a href="'+u+'">'+img+g[1]+'</a>&nbsp;';
        window.document.write(html_before+k+html_after);                
    }
}

Any ideas or help is very much appreciated.

Thank you.

UPDATE:

I've been playing around with this, and finally got it working :o)

Here are the changes I have made.

The social bookmark and image JS code:

sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist',  'socialsprite social blinklist');

Here is the JS code from the base of the script:

function swgbookmarks()
{
    for(i = 0; i < sites.length; i++)
    {
        var g = sites[i];
        var u = g[0];
        u = u.replace('{url}', escape(window.location.href));
        u = u.replace('{title}', escape(window.document.title));
        var img = (imagepath == '0') ? '' : '<img src="transparent1x1.gif" class="'+g[2]+'" alt="'+g[1]+'" />&nbsp; ';
        var k = '<a href="'+u+'">'+img+g[1]+'</a>&nbsp;';
        window.document.write(html_before+k+html_after);                
    }
}

Here is the CSS Style Sheet code:

<style type="text/css">
<!--
.socialsprite {background:url(img_socialsprites.jpg);}
    .social {height:22px;}
    .social {width:22px;}

        /* Social Images */
.blinklist {background-position:0px 0px;}
.blogmarks {background-position:0px -22px;}

This seems to be working.

---

I now have this working.

See main post Update at the bottom.

I wrote the update there, as the site wouldn't let me post my own answer for several hours, and I didn't want to waste anyone's time.

Thank you for the constructive comments, they helped a lot.

Answer 1

Take a look at the generated HTML. It looks like your missing some quotes around the class name:

sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist',  '<div class=i_blinklist></div>');

Should be

sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist',  '<div class="i_blinklist"></div>');

---

** EDIT ** Also, log variable "k" to the console " console.log(k) " and validate the html. It generates the below, which is also incorrect. Notice your img src equals a div and not an actual path:

<a href="http://blinklist.com/index.php?Action=Blink/addblink.php&Url=http%3A//fiddle.jshell.net/_display/"><img src="<div class="i_blinklist"></div>" alt="Blinklist" />&nbsp; Blinklist</a>&nbsp; 

From what I can tell, you should be using something like:

 var k = '<a href="'+u+'">'+img+g[1]+'</a>&nbsp;';

With generates:

<a href="..."><div class="i_blinklist"></div>&nbsp; Blinklist</a>&nbsp;

One last note is that you should be using a span and not a div inside your anchor tag. Again, this is not valid HTML. See https://stackoverflow.com/a/1828032/1220302 for more information.