[英]CSS Sprites are working in the HTML of the page, but not in Javascript?
CSS Sprites是否可以在頁面的HTML中運行,但不能在Javascript中運行?
我正在嘗試安裝http://www.spyka.net/scripts/javascript/easy-social-bookmarks並添加CSS Sprite,以最大程度地減少服務器調用。
我創建了這樣的樣式表:
<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>
此代碼可在頁面的HTML中使用,如下所示:
<div class=i_blinklist></div>
當我將其添加到javascript中時,它不起作用:
sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist', '<div class=i_blinklist></div>');
這是可能還會影響腳本的主要腳本工作:
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);
}
}
非常感謝任何想法或幫助。
謝謝。
更新:
我一直在玩這個,最后讓它工作:o)
這是我所做的更改。
社交書簽和圖片JS代碼:
sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist', 'socialsprite social blinklist');
這是腳本基礎中的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);
}
}
這是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;}
這似乎正在工作。
我現在有這個工作。
請參閱底部的主要帖子更新。
我在那里寫了更新,因為該網站不允許我幾個小時發布自己的答案,而且我不想浪費任何人的時間。
感謝您的建設性意見,他們提供了很多幫助。
看一下生成的HTML。 好像您在類名周圍缺少一些引號:
sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist', '<div class=i_blinklist></div>');
應該
sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist', '<div class="i_blinklist"></div>');
** 編輯 **另外,將變量“ k”記錄到控制台“ console.log(k) ”並驗證html。 它生成以下內容,這也是不正確的。 請注意,您的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>
據我所知,您應該使用類似:
var k = '<a href="'+u+'">'+img+g[1]+'</a> ';
隨着生成:
<a href="..."><div class="i_blinklist"></div> Blinklist</a>
最后一點是,您應該在錨標記中使用跨度而不是div 。 同樣,這不是有效的HTML。 有關更多信息,請參見https://stackoverflow.com/a/1828032/1220302 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.