问题标签 [image-replacement]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1766 浏览

html - 带有 H1 图像替换的语义徽标...没有什么可点击的?

我正在编写一个在左上角有一个大公司徽标的网站。

所以我用徽标作为背景图像,H1 中的公司名称,并使用图像替换技术隐藏 H1。

但是网站导航的其余部分没有“主页”链接。该徽标可能旨在成为“主页”链接。但是由于语义/图像替换技术,没有什么可以点击的。

在这个情况下,你会怎么做?在徽标上放置一些透明的东西是我的第一个想法,但我想听听其他建议。

0 投票
1 回答
225 浏览

html - CSS 图像替换在 MSIE 7 和 8 中不起作用

我在 IE 7 和 8 中使用空跨度 css 图像替换技术时遇到问题。我的徽标(透明 png)丢失。我假设它与负文本缩进有关?在所有其他浏览器中完美运行。任何帮助将不胜感激!

0 投票
1 回答
1240 浏览

jquery - 取决于滚动位置的jquery图像替换仅在首次加载后才能正常工作

我有一个水平滚动网站,根据滚动位置,我有一个图像替换。在第一次加载页面时,当您需要交换第一张图像时,图像会消失然后重新出现。之后问题就消失了。下面是我的jQuery代码:

是因为图像没有预加载还是我的代码有问题?

测试站点在: http: //karpouzaki.com/fade/

任何帮助,将不胜感激。

谢谢

0 投票
1 回答
2086 浏览

css - 与背景图片链接

我有大约 10 个按钮,每个按钮都有图像文本和悬停状态。我想要做的是使用背景位置、宽度和高度来仅显示背景图像精灵的一部分,并使用悬停背景位置来显示悬停样式。我还将在元素上使用图像替换类,以便它保持可访问性和可索引性。

所以(测量是随机的):

[CSS]

[HTML]

我想知道的是,这是否是这样做的好方法,还是应该以不同的方式完成,例如:

<a href="someLink.html"><img src="image.png" width="200" height="30" alt="Button 1"/></a>

然后使用 JavaScript 在悬停时交换图像。

两者在可访问性和机器人方面有什么区别吗?

谢谢你。

0 投票
1 回答
4328 浏览

jquery-mobile - jQuery Mobile - CSS Retina 图像替换

我有一个使用 jQuery Mobile 运行的移动网站。我想为非视网膜(没有高像素密度的设备)设备提供标准图像,但希望这些图像替换为在高像素密度设备上查看时是原始尺寸的 2 倍的视网膜(高像素密度)图像。我在这里找到了这篇文章:http: //flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/

我用于实现的 jQuery 查找带有 的图像class="replace-2x",并将标准图像替换为同一路径中的一个并@2x添加到文件名中。因此logo.pnglogo@2x.png在 Retina 设备上替换为。我的 jQuery 看起来像这样:

然而,当页面加载时,这个函数没有被调用或工作(一个或另一个)所以我不确定我是否需要类似的东西$(".page").live('pageinit', function() {,或者当页面加载时函数触发或“工作”?帮助??:)

0 投票
1 回答
225 浏览

css - Firefox 中的图像替换不会隐藏文本

我使用的是旧版本的 FlexSlider(v1.4,主要是因为我还没有时间测试新版本),出于某种原因,控件的文本显示在 Firefox 中。

问题

这是箭头的 CSS:

我试过改变text-indent周围,但文本没有移动。text-align: left当我在 Firebug 中更改它时,这似乎不是问题。此问题未在 Chrome 中显示。

为什么文本不隐藏自己?

0 投票
1 回答
739 浏览

css - 为什么 html5 样板图像替换在这里不起作用?

http://jsfiddle.net/hydroplane/r4Kn6/

我需要将“reblog”文本移出屏幕。有人知道为什么 h5bp .ir 类在这里不起作用吗?

0 投票
2 回答
2998 浏览

html - 使用 CSS 交换图像和文本(包括图片)

好吧,伙计们,我在实习时把自己搞砸了。即使是我的计算机理论教授,他是 Wolfram Alpha 的前系主任,也没有真正给我任何有用的信息。看来我必须在您的指导下着手构建这组网页,因为我在其他地方找不到任何有用的网站。

我正在整理页面来解释我们已集成到课堂环境中的不同技术。我想使用类似这样的 CSS 图像库,因为当您将鼠标悬停在图像上时,会弹出一个更大的图像。

但是,我希望它能够在 iframe 中交换图像以及随附的文本和链接。这是我的意思的说明。当鼠标悬停在左侧画廊中的一张图片上时,我希望更改图像、其下方的文本以及其左侧文本框中的信息。我的想法是在 iframe 中呈现所有必要的信息,以便您在一个地方获得与该技术相关的所有信息。

“Podium Components”下的框是 iframe。我知道图像的交换可以通过 CSS 完成,因为我为我的 Web 开发课程建立了一个使用它的网站(Wolfram Alpha 老师:D)

如果可能的话,我想避免使用 Java 或 JavaScript 并坚持使用纯 CSS。我们用于网站的 CMS 是 Drupal,所以事情已经相当复杂了。将 JavaScript 混入其中只会让事情变得太古怪。

作为补充说明,当我处理项目时,我总是对使用 StackOverflow 感到内疚。感觉就像我在作弊:/。因此,如果您能指出我的教程或告诉我搜索字词将带我去我需要去的地方,我将不胜感激。帮我自学,让我更有市场?:D 提前谢谢,伙计们!

0 投票
1 回答
591 浏览

javascript - 如何使用悬停来提示使用 JavaScript 更改不同 div 中的文本?

所以我建立了这个网页,左侧有一个照片库。理想情况下,将鼠标悬停在它上面应该会改变向右爆炸的图片(确实如此),但它也应该改变缩略图下方框中的文本。使用我之前被引导的本指南,我开始构建。

即使我更改了所有内容的名称,该论坛上的代码也可以正常运行。但是,当我将它放在画廊所需表格内的 div 中时,它似乎坏了。文本永远不会改变我设置的默认值。我尝试更改标题中的实际脚本以响应单个 div 的鼠标悬停,但这似乎也没有完成这项工作。

我是否正确使用了 document.getElementById().innerHTML?我能想到的唯一事情是更改脚本破坏了它,或者通过将标识图片的 JavaScript div 放置在与输出文本框不同的 div 中,我让它不开心。请你们中的任何人指出我正确的方向吗?

0 投票
2 回答
152 浏览

javascript - 我网页上的 JavaScript 在 IE 9 中不起作用是有原因的吗?

我写这个页面是为了成为一个图片库。当您将鼠标悬停在图片上时,它会向您显示图像的放大版本。当您单击其中一张较小的图像时,其上方的较大图片应更改为该图像。它在 Chrome 和 Firefox 中运行良好,但由于某种原因,大图在 IE9 中不会改变。有任何想法吗?