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');
});
Related
Sorry to sound naive since I'm a beginner. I have been trying to load an image on my website with the image hosted somewhere else online and having a url "http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"
I have an image tag defined as below
<img id="image" src="" alt="" />
Moreover my javascript function executes the following on a button click
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg";
The URL seems to work fine, but the image doesn't show up onclick.
Am I making any mistake?
Thanks for any suggestion :)
I could see that you are using " inside here, may be the HTML would also have " so that, it might not work. You can use the following code:
<a href="#"
onclick='document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"; return false'>Change</a>
I created a Jsfiddle, and it seems to work fine.
https://jsfiddle.net/ltlombardi/jvts4m3y/
var coco = function(){
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2016/02/Vapor-Rage-Small-Logo-new.png";
};
<img id="image" src="" alt="" />
Click here
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;"
i want to preload all my Elements before manipulating them with jquery and co.
i considered that i could make a div with display: none and put all elements in there which im using for my site.
<div id="preload" style="display: none">
<img src="1.png" />
<img src="bla.gif" />
<img src="another_one.png" />
<img src="cutelittlekitten.png" />
</div>
and then this to fade in my site.
$('#preload img').load(function() {
/* Site fades in all elements are preloaded */
});
is there any disadvantage to do it like that? and if, why and maybe another better solution?
edit: i would like to pre-cache the images!
Disadvantage is you're making people wait. Just lazy load your images instead - any image above the fold you use a legit src attribute, and any image below the fold, you do something like this:
<img class="lazyload" src="images/clear.gif" data-src="path/to/real/image.jpg" />
Then you could use a plugin like this or write your own to fade in images with the class 'lazyload' on scroll if they appear in the visible window region:
http://www.appelsiini.net/projects/lazyload
You could also simply lazy load all those images on window.load so they'll begin to fade in after the above-the-fold images are visible and ready.
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.
So I am designing a website, and I want to be able to have each companies logo via an Image called via XHTML 1.0 Transitional fade in upon mouseover and fade out when no longer mousing over. I have jQuery installed and what not, I just don't know the code to this for each image or one image alone. I don't know JavaScript and or jQuery.
Thank you very much for future answers (and possible explanations),
Aaron Brewer
You need a container for each image, otherwise there will be no element to trigger the mouse over when the image has faded out.
HTML
<div class="img-container">
<img src="a.jpg" alt="a" />
</div>
<div class="img-container">
<img src="b.jpg" alt="b" />
</div>
<div class="img-container">
<img src="c.jpg" alt="c" />
</div>
jQuery
$('.img-container').each(function() {
// Get a reference to the image.
var img = $(this).find('img');
// Hide by default.
img.hide();
$(this).hover(function() {
img.stop().fadeIn(500);
}, function() {
img.stop().fadeOut(500);
});
});
perhaps this little live demo will get you in the right direction as it uses both CSS3 and jquery to do the fading, so if one fails, the other can take over. http://jsfiddle.net/robx/jrnFj/2/