[英]CSS Sprites are working in the HTML of the page, but not in Javascript?
CSS Sprites are working in the HTML of the page, but not in Javascript? CSS Sprites是否可以在页面的HTML中运行,但不能在Javascript中运行?
I am trying to install http://www.spyka.net/scripts/javascript/easy-social-bookmarks and add CSS Sprites to minimise the server calls. 我正在尝试安装http://www.spyka.net/scripts/javascript/easy-social-bookmarks并添加CSS Sprite,以最大程度地减少服务器调用。
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: 此代码可在页面的HTML中使用,如下所示:
<div class=i_blinklist></div>
When I add it to the javascript like this, it doesn't work: 当我将其添加到javascript中时,它不起作用:
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]+'" /> ';
var k = '<a href="'+u+'">'+img+g[1]+'</a> ';
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) 我一直在玩这个,最后让它工作:o)
Here are the changes I have made. 这是我所做的更改。
The social bookmark and image JS code: 社交书签和图片JS代码:
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: 这是脚本基础中的JS代码:
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]+'" /> ';
var k = '<a href="'+u+'">'+img+g[1]+'</a> ';
window.document.write(html_before+k+html_after);
}
}
Here is the CSS Style Sheet code: 这是CSS样式表代码:
<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. 感谢您的建设性意见,他们提供了很多帮助。
Take a look at the generated HTML. 看一下生成的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. ** 编辑 **另外,将变量“ k”记录到控制台“ console.log(k) ”并验证html。 It generates the below, which is also incorrect.
它生成以下内容,这也是不正确的。 Notice your img src equals a div and not an actual path:
请注意,您的img src等于div而不是实际路径:
<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" /> Blinklist</a>
From what I can tell, you should be using something like: 据我所知,您应该使用类似:
var k = '<a href="'+u+'">'+img+g[1]+'</a> ';
With generates: 随着生成:
<a href="..."><div class="i_blinklist"></div> Blinklist</a>
One last note is that you should be using a span and not a div inside your anchor tag. 最后一点是,您应该在锚标记中使用跨度而不是div 。 Again, this is not valid HTML.
同样,这不是有效的HTML。 See https://stackoverflow.com/a/1828032/1220302 for more information.
有关更多信息,请参见https://stackoverflow.com/a/1828032/1220302 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.