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');
});

How to open an image by clicking the image button

I am trying to open another image when I press the image button - I am completely new to html. I heard that you need to use the onclick to get that. Here it is what I am trying:
input type="image" src="img/gallery/5.jpg" onclick="img/floor.jpg"
Where 5.jpg is the thumbnail view and floor.jpg is the target image (present in another directory).
But the above piece of code is not working for me.
What is the correct approach?
Why this is failing ??
i used the solution to open a number of images
<img src="img/gallery/5.jpg"/>
<img src="img/gallery/6.jpg"/>
<img src="img/gallery/7.jpg"/>
<img src="img/gallery/8.jpg"/>
<img src="img/gallery/9.jpg"/>
<img src="img/gallery/10.jpg"/>
but every time it opens only the 10.jpg
Help
thanks

Why use an input and javascript in the first place ?
Just use a link
<img src="img/gallery/5.jpg">

Just use a an onclick javascript event to toggle the visiblity of the second image.
something like below.
<input type="image" onclick="image.style.display=inline;">
<img src="../5.jpg" id="image" style="display:none;"

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.

Cchanging image opacity on mouseup event

I've been trying to work out how to change image opacities on mouse events. so far I've come up with:
<img src="image.png" style="opacity:1;filter:alpha(opacity=100)"
onmouseup="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
This works great when the image I want to change is the one that is clicked, but I want to change the opacity of another image when you click this on; click an image, make another one appear sort of thing.
I know that the answer has something to do with this.style.opacity but I can't seem to work it out.

I think you need something like this
<img src="image.png" style="opacity:1;filter:alpha(opacity=100)"
onclick="ChangeImage()" />
<img src="image.png" id="image2" style="opacity:20;filter:alpha(opacity=100)"
onclick="ChangeImage()" />
And javascript
<script type="text/javascript">
function ChangeImage(){
var image2= document.getElementById('image2');
//do your work here for image2
image2.style.opacity='1';
}
</script>

JQuery Fade out & content replace

I'm currently working on a recommend box for my tumblr. I have a slight issue though. On my blog I have a recommend box that floats on the left of the blog div, #cage. When you click yes, it redirects to a recommend link. When you hit no, I JUST want the div to fade out. For me, once I click no, it fades out fine, but then the #cage div moves over to the left and replaces the space that #recommend was in. Is there any way to just simply fade out the div, then once it's faded out, replace it with an INVISIBLE div, (the same size as #recommed) to it just fades out & the content doesn't move? Thanks. Here's what I have so far, hopefully someone can help.
<div id="recommend">
<img id="Recommend" src="http://i56.tinypic.com/2z7nz9e.png" usemap="#Recommend" border="0" width="200" height="200" alt="" />
<map id="Recommend" name="Recommend">
<area shape="rect" coords="78,113,142,163" href="http://www.tumblr.com/directory/recommend/entertainment/epicjamess" alt="Yes" title="Yes" />
<div id="no"><area shape="rect" coords="144,113,195,163" href="#" alt="No" title="No" /></div>
</map>
</div>
<script>
$("#no").click(function () {
$("#reccommend").fadeOut("fast");
});
}
</script>

Instead of fading, change the opacity:
$("#reccommend").animate({opacity: 0}, 200);
The second argument is the duration of the animation in milliseconds.

U could try
$("#reccommend").animate({opacity: 0}, fast );
But keep in mind, opacity is not supported by all browsers.

Opacity also causes issues with text in IE... Maybe try this:
<script>
$("#no").click(function () {
//wrap it in a div with an id
$("#reccommend").wrap('<div id="reccomend-wrap" />');
//set width of the wrapper to match width of #reccomend, and float it
$("#reccommend-wrap").width($("#reccomend").width()).css("float","left");
//now fade the #recommend out
$("#reccommend").fadeOut("fast");
});
}
</script>
EDIT: To prevent jumpiness it might actually be best to have #reccomend-wrap have the same CSS as #reccomend in your CSS file, rather than adding the float property on the fly..