更改“源” type=“image”输入标签的 css 值

发布于 2024-11-02 14:12:27 字数 415 浏览 4 评论 0原文

是否可以更改的 src 属性值通过CSS？

问题是：我想指定哪张图片将仅使用 css 显示为提交按钮（因此设计团队将仅更改 css 文件！）。如果我使用像这样的替代方式并指定背景css 中的此元素 - 如果禁用图片，则效果不佳。 - 没有显示任何替代文本来代替图片。然而，第一种方法解决了这种情况...

请提出建议，

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深爱成瘾 2024-11-09 14:12:27

这是： http://jsfiddle.net/kizu/66JXn/

有关此解决方案的一些说明：

使用，因为它可以包含其他块。
您需要一些额外的代码才能使所有这些在 Fx 和 IE 中工作：
- 对于 Fx，您需要一个额外的包装器（存在定位错误）并重置一些额外的 -moz- 属性。
- 对于 IE，您必须缩小原始按钮，因为有一些额外的填充很难删除。
您将文本和另一个元素放入其中，该元素将覆盖文本。因此，当图像不存在时，文本就可以访问。

就是这样：）

回复收藏 0 原文

舂唻埖巳落 2024-11-09 14:12:27

不，这是不好的做法。 CSS 仅适用于静态内容。

您应该做的是定义一个包含变量的模板文件，例如：

template.js

my_backgroundImage = "url('somepic.png')";

，然后您的文件将加载

x = document.createElement('image');
x.src = my_backgroundImage

No, and this is bad practice. CSS is for static content only.

What you should do, is define a template file with variables in it such as:

template.js

my_backgroundImage = "url('somepic.png')";

then your file would load

x = document.createElement('image');
x.src = my_backgroundImage

回复收藏 0 原文

笔芯 2024-11-09 14:12:27

属性选择器可能有用，但它们不太灵活。试试这个：

img[src=""] {
  background-image: url('none.png');
  height: 100px; /* Height of BG image */
  width: 100px; /* Width of BG image */
}

它不会更改图像的 src= 属性，但执行相同的功能。

这是我的想法。

您可以使用 JavaScript读取标记的样式表，并相应地修改它们。

我说的是类白名单，例如大、小、中心，以及应用于图像的所有其他类都是通过 JavaScript 解释的。设计团队可以使用CSS，但它不会以预期的方式呈现，就像这样（Python + JavaScript）：

for every <img> tag:
  if tag.classes contains class not in whitelist:
    for every class not in whitelist:
      this.src = newClass.backgroundImage;
      this.removeClass(newClass)

它读取background-image属性的CSS，但它只是窃取了图像并使用该 URL 设置 src= 属性。然后，JavaScript 将删除该类，导致它无法呈现。

Attribute selectors might work, but they aren't very flexible. Try this one:

img[src=""] {
  background-image: url('none.png');
  height: 100px; /* Height of BG image */
  width: 100px; /* Width of BG image */
}

It doesn't change the image's src= attribute, but it performs the same function.

Here's my idea.

You can use JavaScript to read the stylesheets of <img> tags, and modify them accordingly.

I'm talking about a class whitelist, like big, small, center and all other classes applied to the images are interpreted via JavaScript. The design team could use CSS, but it would not render in the expected manor, like this (Python + JavaScript):

for every <img> tag:
  if tag.classes contains class not in whitelist:
    for every class not in whitelist:
      this.src = newClass.backgroundImage;
      this.removeClass(newClass)

It reads the CSS for the background-image property, but it just steals the URL of the image and sets the src= attribute using that URL. Then, the JavaScript would delete that class, causing it not to render.

回复收藏 0 原文

帅气称霸 2024-11-09 14:12:27

（这是一个用 JS 解决的问题，但忽略它：）

一种选择是包装按钮和一个额外的 div （我们称之为 div.overlay）在父容器中。

将容器设置为position:relative。

像往常一样，将按钮设置为仅显示文本。将 div.overlay 设置为 position:absolute，将 width 和 height 设置为 100% >、left 和 top 到 0，并且 z-index 高于按钮。将要显示的图像设置为 div.overlay 的 background-image。

启用图像后，用户可以看到图像，并且仅使用 CSS 即可更改图像。

禁用图像或 CSS 后，用户只能看到纯文本提交按钮。

您可能需要采取一些技巧才能单击 div.overlay 来提交表单，也许只需将 div.overlay 设为重复的提交按钮即可。另外，谁知道 Googlebot 如何利用这些覆盖技术。

回复收藏 0 原文

清秋悲枫 2024-11-09 14:12:27

它很丑陋，但我立即想到的唯一纯 CSS 解决方案是一种支持相对较差的图像替换。那是使用 :after 。由于滥用 :after，这是一种糟糕的做法，并且支持非常不稳定，并且根据我上次尝试在输入上使用 :after 的情况，我认为对于输入元素来说会更不稳定。请

.cssclass,
.cssclass:after{
display:block;
    width:100px;
    height:100px;
}
.cssclass{ position:relative; }
.cssclass:after{
    position:absolute;
    top:0;left:0;
    content:url("button.jpg");
}

参阅http://www.rachaelmoore.name/best-practices/ css-image-replacement-ii/ 了解更多。

或者将默认 src 设置为垫片并始终使用 CSS 将所需按钮设置为背景图像。我刚刚注意到你已经想到了。我想这应该很好用。

It's ugly, but the only pure CSS solution that immediately jumps to mind is a kind of image replacement with relatively poor support. That's using :after. It's kind of a poor practice due to the misuse of :after, and the support is pretty iffy, and I think it'd be iffier for an input element, based on the last time I tried to use :after on an input...

.cssclass,
.cssclass:after{
display:block;
    width:100px;
    height:100px;
}
.cssclass{ position:relative; }
.cssclass:after{
    position:absolute;
    top:0;left:0;
    content:url("button.jpg");
}

See http://www.rachaelmoore.name/best-practices/css-image-replacement-ii/ for more.

Or setting the default src to a shim and always using CSS to set the desired button as a background image. Which I just noticed you've already thought of. I imagine that should work just fine.

回复收藏 0 原文

南…巷孤猫 2024-11-09 14:12:27

好吧......所以我讨厌当我问一个特定的问题时，他们没有回答它，而是给了我一些蹩脚的解决方法，而不是回答我提出的原始问题......但出于某种原因，我决定我要对你做这件事。

如果我正确理解问题，您只想有一个带有背景图像的表单按钮，如果背景图像没有加载，您希望向用户显示某种带有标题的替代文本按钮的？如果那不对，请停止阅读并“向下箭头”我。

在我制作的应用程序中，我总是只使用背景图像设置输入样式，但将其留给 HTML 控件来插入文本...这有三个好处...按钮可以设置样式，开发人员可以更改按钮上文本的值，而不必打扰我制作新图像，并且如果背景图像未加载，按钮仍然可读。

所以我的 html 是这样的：

<input type="submit" id="btnSearch" class="searchButton" value="Search">

然后我的类可能会读到这样的内容：

.searchButton {
 backgorund-image: url('searchButtonImage.png');
 font-family: sans serif;
 font-size: 10px;
 color: #808080;
 padding-left: 50px 0px 0px 0px; // Assuming a magnifying glass icon or whatevs is on the left and is 20-ish pixels
 width: 100px; // you can put this as in-line style if you make a more generic class
}

如果你想让 BG 更通用，请移动按钮的宽度以使其内嵌在按钮上，以便开发人员可以使用文本值并使您的通用背景图像宽度为 200 像素。

根据浏览器的不同，文本可能不像其他浏览器那样漂亮且有别名，但在我看来，这是一个很小的代价。

（免责声明：如果您复制粘贴此内容不起作用，请原谅我。我只是手写，没有测试。）

Ok... So I hate it when I ask a specific question and, instead of answering it, they give me some crappy work-around instead of answering the original question that I asked... But for some reason, I've decided that I'm going to do it to you.

If I understand the problem correctly, you just want to have a form button with a background image and if the background image doesn't load, you want some sort of alt text displayed to the user with the caption of the button? If that's not right, stop reading and "down arrow" me.

In apps that I've made, I've always just styled the input with a background image, but left it up to the HTML control to insert text... It's good for three reasons... buttons can be styled, developers can change the value of the text on the button without having to bother me to make a new image, and if the background image doesn't load, the button is still readable.

So my html was like this:

<input type="submit" id="btnSearch" class="searchButton" value="Search">

then my class may read something like:

.searchButton {
 backgorund-image: url('searchButtonImage.png');
 font-family: sans serif;
 font-size: 10px;
 color: #808080;
 padding-left: 50px 0px 0px 0px; // Assuming a magnifying glass icon or whatevs is on the left and is 20-ish pixels
 width: 100px; // you can put this as in-line style if you make a more generic class
}

If you want to make the BG more generic, move the width of the button to make it in-line on the button, so the devs can change the width with the text value and make your generic bg image like 200px wide.

Depending on the browser, the text might not be as nice and ani-aliased as in others, but IMO, it's a small price to pay.

(Disclaimer: Please forgive me if you copy and paste this and it doen't work. I just hand-wrote it without testing it.)

回复收藏 0 原文

如梦亦如幻 2024-11-09 14:12:27

你能用 JavaScript 做到吗？

我的页面上有一个图像，单击该图像时，将显示另一个按钮，并且还会更改第一个按钮的 src 属性。

这是我使用的：

<script type="text/javascript">
 function apps()
 {
 var element = document.getElementById("app_frame");
 if (element.width != "0%")
 {
    parent.document.getElementById("frame").setAttribute("width","100%");
    parent.document.getElementById("app_frame").setAttribute("width","0%");
    parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/show.gif");
    parent.document.getElementById("wthrbutton").style.visibility="hidden";
 }
 else
 {
    parent.document.getElementById("frame").setAttribute("width","65%");
    parent.document.getElementById("app_frame").setAttribute("width","35%");
    parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/hide.gif");
    parent.document.getElementById("wthrbutton").style.visibility="visible";
 }
 }
 </script>

也就是说：将“app_frame”设置为变量“element”，
然后检查变量“element”的宽度。
如果它的宽度不为0，那么它获取元素“frame”，
通过使用 getElementById，然后将属性“width”设置为 100%，

您可以看到稍低一点，您使用相同的方法，但使用 SRC 属性而不是宽度，并将其设置为您想要的任何内容，在我的例子中为 site /main/images/apps/show.gif

希望有帮助

Can you do it with javascript?

I have an image on my page that, when clicked, will show another button, and also change the src attribute of the first.

Here is what I use:

<script type="text/javascript">
 function apps()
 {
 var element = document.getElementById("app_frame");
 if (element.width != "0%")
 {
    parent.document.getElementById("frame").setAttribute("width","100%");
    parent.document.getElementById("app_frame").setAttribute("width","0%");
    parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/show.gif");
    parent.document.getElementById("wthrbutton").style.visibility="hidden";
 }
 else
 {
    parent.document.getElementById("frame").setAttribute("width","65%");
    parent.document.getElementById("app_frame").setAttribute("width","35%");
    parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/hide.gif");
    parent.document.getElementById("wthrbutton").style.visibility="visible";
 }
 }
 </script>

What that says, is: set the "app_frame" as variable "element",
then check variable "element" for its width.
if its width is not 0, then it gets the element "frame",
by using getElementById, and then sets the attribute "width" to 100%

you can see slightly lower down that you use the same method, but use the SRC attribute rather than width, and set it to whatever you want, in my case, site/main/images/apps/show.gif

hope that helps

回复收藏 0 原文

~没有更多了~