We Keep Coding

Set image src to a url in javascript

I have an image in my page. I want to change it's src in a script tag.
this is code :
<asp:Image ID="ImgSecode" runat="server" ImageUrl="~/CImage.aspx" CssClass="lblSec"/>
in page CImage , an image will create.
it works.
but when i want to change the picture in script tag,it doesn;t work.
here is javascript code :
document.getElementById('<%= ImgSecode.ClientID %>').src = "CImage.aspx";
In addition when i set the source to an image which is in solution it works.
Can you help me what should i do?

Assuming you use strictly JavaScript based solution you need to use SetAttribute method like this-
document.getElementById("<%=ImgSecode.ClientID %>").setAttribute('src', '<Full Web Path of your Image>');
Or if you are open to Jquery as well the use .attr.
$("[id='ImgSecode']").attr("src", "<Full Web Path of your Image>");
Also as per your question setting .aspx to src is by mistake I guess.

Replace images with jQuery in userscript

I'm currently working on a userscript, but I have a problem.
I'm trying to replace an image with another one.
I thought I could do it this way:
$(".subforumicon.ajax_mark_read").each(function() {
$(this).html($(this).html().replace(/http:\/\/x\.hackforums\.net\/images\/modern_pl\/minion.gif/g, "http://megaviews.net/hf/designcostumizer/themes/green/minion.png"));
});
However, this will do nothing. When I paste this code in the javascript console, it just displays all img-tags with this picture:
I don't want to replace everything by using $("body").html(), as this can cause problems with the website (somehow).
Before I started working with jQuery, I used document.body.innerHTML, what caused issues on the page, but with document.getElementById() it worked, so I don't think it was my fault. ;)
I'm quite new to jQuery, so could somebody please explain me why my above code doesn't work?

It does not work because the selected elements are img and there is nothing below the img elements.. as .html() selects or sets the INSIDE content (like innerHTML). not outerHTML so you cannot access the attributes of the img element itself by this mean.
You should work on the img's src attribute as already proposed in other posts.

Use .prop()
you need $('img') as you are changing image src only.
so replace img attribute src only.
why traverse through all full html you need to focus on src property only.
$('img').prop('src', function (_, old_src) {
return old_src.replace(/http:\/\/x\.hackforums\.net\/images\/modern_pl\/minion.gif/g, "http://megaviews.net/hf/designcostumizer/themes/green/minion.png");
});
or better if you want to change all images attribute src
$('img').prop('src','http://x.hackforums.net/images/modern_pl/minion.gif');

javascript or jquery method of getting the source of an image if.. matching a certain pattern

I have a very old site with lots of files, for years it was put together and orgainized by year and in a particular fashion. Well I am upgrading the site. But in one section an "Articles" section I have close to 1,000 files, that I don't want to go through and manually edit one or two images per.
So I am hoping i can figure out a way to match the source tag where when the source is ../imgs/ I can find the actual file name being used and just change the source. My problem is finding the source attribute matching it to the dired and then getting the image name off the end of it. when the full path could be like
../imgs/i2012/image-file.png, ../imgs/i2011/image-file.png, ../imgs/i2010/image-file.png, ../imgs/i20xx/image-file.png "image-file.png" just being an arbitrary example
Its hard to visualize a image tag, so I am adding one here for reference..
<img src="../imgs/i2012/example-image.png" alt="example-image" vspace="5" hspace="5" align="left" />
And to try and re-elaborate, not all images on the site stopped working, and all else, but the ones that have use an image source attribute similar to the above, but the i20xx and file name are different. So. I am trying to figure out how to take that image src tag. Find if it has ../imgs/ in it, and and if it does, I'd like to grab the "example-image.png" from it, so I can apply a new URL overall to the src attribute in the end using JS, which changing it isn't my problem, matching it so I can then get the file, and change the url appending that file to the url is my problem

You can use the attribute starts with selector to match any images with a source starting with
../imgs/, and then iterate over those images, getting the filename into an array:
var images = [];
$('img[src^="../imgs/"]').each(function(i, el) {
images.push( $(el).attr('src').split('/').pop() );
});

Create new (not change) stylesheets using jQuery

We've got a little tool that I built where you can edit a jQuery template in one field and JSON data in another and then hit a button to see the results immediately within the browser.
I really need to expand this though so the designer can edit a full CSS stylesheet within another field and when we render the template, it will have the CSS applied to it. The idea being that once we've got good results we can take the contents of these three fields, put them in files and use them in our project.
I found the jQuery.cssRule plugin but it looks like it's basically abandoned (all the links go nowhere and there's been no development in three years). Is there something better or is it the only game in town?
Note: We're looking for something where someone types traditional CSS stylesheet data in here and that is used immediately for rendering within the page and that can be edited and changed at will with the old rules going away and new ones used in their stead. I'm not looking for something where the designer has to learn jQuery syntax and enter in individual .css("attribute", "value") type calls to jQuery.

Sure, just append a style tag to the head:
$("head").append("<style>p { color: blue; }</style>");
See it in action here.
You can replace the text in a dynamically added style tag using something like this:
$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);
See this in action here.

The cleanest way to achieve this is by sandboxing your user-generated content into an <iframe>. This way, changes to the CSS won't affect the editor. (For example, input { display:none; } can't break your page.)
Just render out your HTML (including the CSS in the document's <head>, and write it into the <iframe>.
Example:
<iframe id="preview" src="about:blank">
var i = $('#preview')[0];
var doc = i.contentWindow || i.contentDocument;
if (doc.document) doc = doc.document;
doc.open('text/html',true);
doc.write('<!DOCTYPE html><html>...</html>');
doc.close();

If the user should be able to edit a whole stylesheet, not only single style attributes, then you can store the entered stylesheet in a temporary file and load it into your html document using
$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');

sounds like you want to write an interpreter for the css? if it is entered by hand in text, then using it later would be as simple as copy and pasting it into a css file.
so if you have a textarea on your page to type in css and want to apply those rules when you press the button, you could use something like this (only pseudocode, needs work):
//for each css id in the text area
$.each($('textarea[name=cssTextArea]').html().split('#'), function({
//now get each property
$.each($(this).split(';'), function(){
$(elem).css({property:value});
});
});
then you could write something to go through each element that your designer typed in, and get the current css rules for it (including those that you applied using some code like the snippet above) and create a css string from that which could then be output or saved in a db. It's a pain and much faffing around with substrings but unfortunately I don't know of a faster or more efficient way.
Hope this atleast gives you some ideas

Finding images on page that have a specific filename with jquery

I need to do a check on a page to check if certain images have loaded ie. not returned 404. If they arent available I want to replace the image with a default images.
I am aware I can assign an onerror handler to the images.
Firstly I need to use a selector to find all the images that have a source which contains the following image name -> /folder/Product_1234_P.jpg OR /folder/Product_9876_Q.gif
Any ideas how I can create a high performance selector that I can use to find such images so that I can check if the images loaded, if not replace the image name with: Product_Default_P.jpg or Product_Default_Q.gif
Any help or advice would be great.

You can use the image's error handler and the attribute contains selector like so:
$("img[src*=Product]").error(function() {
$(this).attr('src', 'notfound.jpeg');
});

$('img[src*="substring"]')
It's an attribute selector. Check it out http://api.jquery.com/attribute-contains-selector/

I guess you mean something like
$("img[src^=/folder/Product_][src$=_P.jpg]")
i.e. "Find all img with a src starting with "/folder/Product_" and ending with "_P.jpg".