Tag: css sprites
通过链接替换精灵图像
我希望默认情况下在div中显示我的精灵的一部分，然后在div下方有一个文本菜单，当点击不同的链接时，显示的精灵部分会发生变化。 这是我到目前为止的地方，并让我的精灵全部显示以下内容： 指数 CSS .sprite { background-image: url(sprite1.png); background-repeat: no-repeat; display: block; } .sprite-caramel { width: 176px; height: 250px; background-position: 0 0; } .sprite-chocolate { width: 176px; height: 250px; background-position: -176px 0; } .sprite-empty { width: 176px; height: 250px; background-position: -352px 0; } .sprite-strawberry { width: 176px; height: 250px; background-position: -528px 0; } .sprite-vanilla { […]
使用图像精灵作为图库
由于图像太多和图像太大（文件大小）导致加载时间过慢。 我已经开始将一些PNG转换为JPG，并且正在考虑探索将当前图像滑块/图库（6个旋转JPG图像系列）更改为单个精灵的想法。 我不确定它是否可能或值得所有的努力。 我知道背景图像是问题的关键，我已经在努力将它们更改为JPG并减少文件大小。 链接在下面，如果任何有经验的html / css / js / jquery人可以建议是否可以使用图库精灵用于图库/滑块2）值得吗？ 它会帮助加载时间吗？ http://tinyurl.com/7ywoqpf
IE6：背景图像加载事件
我正在显示一堆缩略图，延迟可能非常高（通过VPN）所以我将所有缩略图发送到一个文件（如精灵）并设置div的CSS背景图像和背景位置属性显示缩略图。 我遇到的问题是使用IE6并弄清楚图像何时加载…我正在使用BackgroundImageCache hack： document.execCommand(“BackgroundImageCache”,false,true); 要检查图像何时加载，我使用以下代码： $(”).attr(‘src’, ‘ThumbSpriteTest.png’).load(function() { $(‘.Thumbnails’).css(‘background-image’, ‘url(ThumbSpriteTest.png)’); }); 这适用于我尝试过的每个浏览器，除了IE6 …即使有缓存黑客它正在加载图像，触发事件，设置背景图像属性并再次下载图像（我的.Thumbnail元素是空白的，而它重新下载）。 在我看来，缓存黑客只是改变了CSS引用的行为，而不是img标签。 如何加载背景图像而不下载两次？ IE6有可能吗？ 编辑：使用： document.execCommand(“BackgroundImageCache”,true,true); 似乎工作（两个参数都为’true’）。 我在找到有关BackgroundImageCache命令及其参数的任何文档时遇到了问题（我发现了很多使用它来解决CSS问题的例子，但它们都使用false,true作为参数而不解释它们）。 对于在BackgroundImageCache命令及其参数上有良好信息/文档的人来说，赏金仍然是好的！ （由于IE的缺点，我不知道为什么在浪费了这么多时间之后找到可行的东西我很兴奋）
用jqueryhover地图区域精灵
我正在研究我的第一个真正的wordpress网站，我遇到了一些问题。 我真的希望有人可以帮助我。 所以我想要做的是根据当前hover的地图区域来定位我的div背景。 我在这里找到了一个例子： http ： //ubytujnaslovensku.sk/sk/ 我得到了什么：HTML： CSS #front-cubus-wrapper{ width:355px; height:365px; position:relative; } #front-cubus{ width:355px; height:365px; position: absolute; background-image:url(images/insighttoimprove_website_cubus_index.png); z-index:1; } #front-cubus-hover{ width:355px; height:365px; position: absolute; background-image:url(images/insighttoimprove_website_cubus_index_hover.png); background-repeat:no-repeat; z-index:2; } #front-cubus-wrapper img{ position:absolute; width:355px; height:365px; z-index:3; } jQuery的： jQuery(document).ready(function($){ var default_value = $(“#front-cubus-hover”).css(“background-position”); if (default_value === “0px 0px”) { $(‘#map area’).each(function() { $(this).hover( function() […]
jQuery切换到更改图像
我有一个包含图像的div列表： 当用户点击div时，我希望它将图像更改为x-on.png，再次单击时，它将更改为x-off.png，第三次单击时应恢复为x。 PNG。 是否可以在不为每次图像更改手动指定jQuery的情况下执行此操作？ 我可以遍历div并找到图像名称，只需将-off / -on附加到图像上吗？ 谢谢！
