Develop Reference

Load external photo with javascript

I am trying to set the image source of an image object with javascript.
I have tried
<img src="" id="image" alt="">
<p id="change">Change</p>
$("#change").click(function () {
$("#image").attr("src", "some source");
});
The problem is that it seems it does change the src, but it doesn't work if the image wasn't loaded when the page loaded. So I cannot suddenly change to the logo of Stackoverflow. Can this be true? How can I then load the image while changing the source?

I had an issue similar to this a couple weeks ago, the easiest way I managed to solve the issue was by loading all image's you will need, and set all of the ones you don't need right away as hidden. Then when your action that causes the change is triggered, you can change the image visibility on the one you want to disappear and the one you want to be shown.
If you have bootstrap installed, it is as easy as adding and removing a class via jQuery
HTML
<img src="" id="image1" alt="">
<img src="" id="image2" alt="" class="hidden">
<p id="change">Change</p>
Javascript
$("#change").click(function () {
$('#image1').addClass('hidden');
$('#image2').removeClass('hidden');
});

Javascript replaceing img file

I am working on a website that needs to use javascript. I need the Javascript to use an external page. I don't quite understand how to do this. I have 5 files on my computer that needs to be able to replace an image file's name and alt. I cant use an http though.
I have the code for an image:
<img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
I need use javascript to change the cablecare and alt part to a new image file and description while using onmouseover.
The code I have so far is
Javascript:
function switchPix(file, desc){
var line = '<img src= asian.jpg width=\'480\' height=\'270\' alt= +desc+/>';
document.getElementById("pix").write(line);
}
html:
<figure id="pix" class="right">
<script src="scripts/gallery.js">
</script>
<img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
</figure>
<ul>
<li>Asian Art Museum</li>
I have to use the word file to replace cablecar with asian so the file name is asian.jpg
at the end the code is suppose to change the image on the page to another image when the mouse is put over one of five links.
Sorry if this is a bit confusing I really am having trouble understanding it myself and wasn't given nearly enough information to understand how to do it myself.

Hi try to use this code
<figure id="pix" class="right">
<script src="scripts/gallery.js">
</script>
<img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
</figure>
<ul>
<!-- fix onmouseover (all small case) and string parameters -->
<li>Asian Art Museum</li>
and the javascript code like this work
function switchPix(file, desc) {
var $elm = document.getElementById("gallery");
$elm.src = file;
$elm.alt = desc;
}

show loading icon while loading video javascript

I am trying to load a video onclick a image in my web page. For that i used the following code.
<script type="text/javascript">
(function($) {
$('a.newID').click(function(){
$('#newID').html('<iframe src="http://www.youtube.com/embed/TJ2X4dFhAC0?autoplay=1" frameborder="0" class="slide" allowtransparency="true" style="width:512px; height:288px;" id="ifm" title=""></iframe>');
});
}(jQuery));
</script>
The html code:
<a href="#" title="" id="newID"><span class="play_icon"><img src="img/play_overON.png" alt=""></span>
<img src="images/slider1.jpg" alt="" class="slide" />
</a>
If i click the image the image will be replaced by the iframe video. What i need is to display a loading icon until the video is loading. How to do that?

Please add following css properties in your click function:
#newID {background-image:url(http://mysite/myloadingimage.gif)}
You will also need to add css property display:inline-block; to #newID, if the display is inline (default).
Replace http://mysite/myloadingimage.gif with actual loading image. Use animated gif for the nice loading effect.
Loading image needs to be centered using css background property. This may depend on size of image.

Dojo Query need help in selecting the elements in a page

I have HTML page with following elements
<img src='some link' id='_id_portlet1_1234' > link </img>
<img src='some link' id='_id_portlet2_4567' > link </img>
I has to select all the id elements with a pattern of _id_portlet* with dojo.query. Can you guys help in providing the dojo.query to get list of above id elements. Here the source code is generated by a template file and every time the page is rendered a random number will be appended to the id. I need to select all the elements which are following the pattern of _id_portlet*. Thanks for your help

The very first thing - the <img> has no closing tag, so instead of invalid
<img src="some link" id="_portlet1_1234" class="portlet"> link </img>
you should use
<img src="some link" id="_portlet1_1234" class="portlet" />
And for selecting the images try this
dojo.query('img[id^="_id_portlet"]').style("border", "5px solid red");
DEMO

You should use classes:
<img src="some link" id="portlet1_1234" class="portlet"> link </img>
<img src="some link" id="portlet2_4567" class="portlet"> link </img>
And then I don't know dojo, but in normal javascript you can use
document.getElementsByClassName("portlet");
Adding _id_ at the beggining of the id it's a pleonasm.

Make html valid if adding new tag for <img>

I have html img list like this one:
<img src="over.png" width="150" heigh="72" />
<img src="2_over.png" width="150" heigh="72" />
<img src="3_over.png" width="150" heigh="72" />
but these images are quite large. I need to make it that it will load one by one "like ajax". But I cant load it from javascript in the begining, becouse it is our cms desing like that and we will have big troubles if i will change it. So what i am planning to do is:
<img src="" width="150" heigh="72" path="over.png" />
and load it one by one with javascript and replace src, but the html will not be valid. Can any one give me any solution how to implement it with valid html?

If putting the data somewhere is your sole problem, HTML5 supports data- attributes, which let you add arbitrary attributes to elements. It remains valid as long as the attribute name starts with data-. For instance:
<img src="" width="150" height="72" data-path="over.png" />
This feature, while not "valid" HTML4, should still work on all browsers as unknown attributes on tags are simply ignored (and kept as is).
Though, you may also search for a way to do it only with JavaScript. I don't really understand how dynamically adding images could break your CMS.
Also, the alt attribute is required for images (make it blank if you don't have anything useful to write instead), and I'm not sure a blank src attribute is valid (you may want to put a loading image's path instead).

set a valid url in the image before you call the javascript function, for instance like this:
<img src="blank.gif" alt="Blank Image" width="10" height="10" />
And as for the "path" attribute, you could put the link to the image in the alt attribute. That way your image tag will be valid.
<img src="blank.gif" alt="myImage.jpg" width="10" height="10" />
Then you can use javascript to fetch the image path from the alt attribute, and insert it in the src attribute when loaded.

Those images should be thumbnails, correct? So you're downscaling large images via HTML to small sizes. The best way would be, honestly, to provide already downscaled images as thumbnails.

One solution is to have a small image loading image and set that as the source for all the images until your javascript has loaded the relevant image.
<img src="loading.png" data-path="over.png" height="50" alt="Over" width="150">

You may want to check out JAIL, the jQuery Asynchronous Image Loader:
While it may be slightly more than what you need, its got lots of options available and its less code you have to write!