Change the value of 'src' to css for input tag with type = "image"

Question

Is it possible to change the value of the src attribute <input type='image' alt="Text will be shown if pics are disabled" src='somepic.png'../> to css?

The problem is this: I want to specify which pic will be displayed as a submit button, just using css (so the design team will only change the css files!). If I use an alternative method, for example, <input type="submit" class="cssclass" value=" " alt="Text will be shown if pics are disabled"/> , and specify the background of this element in css - this will not work, if photos are disabled. - No alternative text is shown instead of pic. However, the first method solves this situation ...

Please advise something

Thanks.

Answer 1

Here it is: http://jsfiddle.net/kizu/66JXn/

Some notes about this solution:

• Use <button></button> because it may include other blocks.

• You will need additional code for this to work in Fx and IE:

  • For Fx, you need an additional shell inside (there is a location error) and some additional properties -moz-properties reset.
  • For IE, you must compress the original button because there are additional add-ons that are difficult to remove.

• You put text and another element inside that overlays the text. Therefore, when images are missing, the text will be available.

What is it:)

Answer 2

Attribute selectors may work, but they are not very flexible. Try the following:

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

It does not change the image src= attribute, but performs the same function.

---

Here is my idea.

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

I'm talking about a whitelist, such as big, small, center , and all other classes that apply to images are interpreted using JavaScript. The development team could use CSS, but it will not appear in the expected estate, 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 CSS for the background-image property, but it just steals the image URL and sets the src= attribute using that URL. JavaScript will then remove this class without creating it.

Answer 3

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

What you have to do is define a template file with variables in it, for example:

template.js

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

then your file uploaded

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

Answer 4

(This is a problem for which JS is a solution, but ignoring it :)

One option is to wrap the button and add a div (allows you to call its div.overlay ) in the parent container.

Set the container to position:relative .

Set the button to display the text as usual. Set div.overlay to position:absolute , width and height to 100% and left and top to 0 , and << 211> higher than the button. Set the image you want to display as background-image div.overlay .

With the images turned on, the user sees the image, and the image can be modified using only CSS.

With images or CSS disabled, the user sees only the send text button.

You may need to do a few div.overlay to press div.overlay to submit the form, maybe just make div.overlay duplicate submit button. Also, who knows what Googlebot does for these overlay methods.

Answer 5

It's ugly, but the only clean CSS solution that catches your eye right away is a kind of image replacement with relatively poor support. This usage: after. This is kind of bad practice due to misuse: after, and support is pretty good, and I think it will be an iffier for an input element based on the last attempt to use: after 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 details.

Or set the default src value for padding and always use CSS to set the desired button as the background image. Which I only noticed that you already thought. I assume this should work fine.

Answer 6

Okay ... So I hate it when I ask a specific question, and instead of answering it, they give me some shitty work, instead of answering the original question that I asked ... But for some reason reason I I decided to do this with you.

If I understand the problem correctly, you just want to have a form button with a background image, and if the background image does not load, do you want some alt text to be displayed to the user with the button title? If this is not the case, stop reading me and the "down arrow".

In the applications I created, I always just entered the input with the background image, but left it up to the HTML control to insert the text ... This is useful for three reasons ... the buttons can be in style, developers can change the value of the text to button without bothering me to make a new image, and if the background image does not load, the button is still readable.

So my html was like this:

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

then my class can 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 BG more general, move the width of the button to make it in the line on the button, so developers can change the width with the text value and make your overall bg image equal to 200px.

Depending on the browser, the text may not be as pleasant and smooth as in others, but IMO, this is a small price to pay.

(Disclaimer: Please forgive me if you copy and paste this and it does not work. I just wrote it without protesting it.)

Answer 7

Can you do this with javascript?

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

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 this says is: set "app_frame" as a variable "element", then check the variable "element" for its width. if its width is not 0, then it gets the frame element using getElementById, and then sets the width attribute to 100%

you can see a little lower than using the same method, but use the SRC attribute, not the width, and set it anyway, in my case site / main / images / apps / show.gif

hope that helps