Use google chart API url to dynamically set img source - javascript

How can I change the src attribute of an img tag with a google chart api url?
At first, I've this in the html body.
<img class="image2" />
Then I want to change the src with a chart URL.
So far I've tried with JQuery
$("#image2").attr('src', 'https://chart.googleapis.com/chart?cht=p3&chs=250x100&chd=t:60,40&chl=Hello|World');
Javascript
var image = document.getElementsByClassName("image2");
image.src = "https://chart.googleapis.com/chart?cht=p3&chs=250x100&chd=t:60,40&chl=Hello|World"
However no image is displayed.
Is it possible to do this? Thanks!

when using jquery to select by classname,
use a period instead of pound sign.
<img class="image2" />
$(".image2")
pound sign is for id selector
<img id="image2" />
$("#image2")
see following working snippet...
$(".image2").attr('src', 'https://chart.googleapis.com/chart?cht=p3&chs=250x100&chd=t:60,40&chl=Hello|World');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image2" />

Related

Add an image id by finding the image alt

There is an image without an id on a page that I can't manually access to change the html. I'd like to be able to add an id value in a javascript file that I do have access to.
I found this thread:
Finding An image tag using the alt text
And this one:
Replace image and image title/alt text with Javascript
And I've been trying a few variations to get it to work.
Can someone show me where I'm going wrong? I'm currently using:
$('img[alt="close_pop"]').attr('id','close');
I don't think I'm fully understanding, as this is what I thought it was doing:
$('img[alt="close_pop"]') //getting the image based on the alt tag using jquery.
.attr('id','close'); //then I was applying a new id to that image.
All help appreciated!
Inspect the element and search for the id. It gets alt's value:
$(window).load(function() {
var img = $('img[alt="test"]');
var alt = img.attr('alt');
console.log(alt);
img.attr('id', alt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img alt="test" src="" />
<img src="smiley.gif" class="smile" id="smiley" alt="Smiley face" width="42" height="42">
$(window).load(function(){
$("img").click(function() {
var img = $("img[alt='Smiley face']");
img.attr("id", "fool");
console.log(img.attr("id"));
});
});

JS : Getting image id using onmouseover

i have 4 images in my document , 1 at the top and three at the bottom now what i want when i hover over any of the bottom 3 images i get its id and replace the above image with this image using onmouseover , like this
<script >
function chanageimg(id)// here i want to pass hovered image src
{
document.getElementById("top_image").src=id;
}
</script>
<div id="top" >
<img src="top.jpg" id="top_image" />
</div>
//here is the bottom image ,
<div class ="floats one">
<img src="img1.jpg" id="img1" onmouseover="changeimg()" />
</div>
how do i get its src to be passed in aboce function . i dont want to use Jquery . here as its for learning purpose
One small change to your HTML:
<img src="img1.jpg" id="img1" onmouseover="changeimg(this.id)" />
this is the image being moused over, and this.id is the parameter you want to pass to your function.
Inside the function changeimg(e), use e.target.id to get the id. If you do this, you don't need to add this.id to every onmouseover="" in your images. Just use onmouseover="changeimg".
To change the image you have to change the src
<img id="img-top" src="">
<img src="img1.jpg" onmouseover="changeimg(this.src)">
function changeimg(src){
document.getElementById("top_image").src = src;
}
EXAMPLE

I’m using a multilanguage script to change from lanquage. Now I’m having troubles in using by the image

I am new for script and jQuery
I’m using a multilanguage script to change from language. Now I'm having troubles to change from a language by using the image,
<img src="/flags/us.png" alt="en_EN" />
<img src="/flags/it.png" alt="it_IT" />
<img src="/flags/fr.png" alt="fr_FR" />
here after i dnot know how to use this image tag
what i want from this image tag , when i am click this image i want the alt value of corresponding image click.
Hoe to get it...
its possible or else give any other idea
thanks
Kumar
Put a class in your anchor and try this
<img src="/flags/us.png" alt="en_EN" />
<img src="/flags/it.png" alt="it_IT" />
<img src="/flags/fr.png" alt="fr_FR" />
$('a.lang img').click(function(){
var alt=$(this).attr('alt');
});
<a class='lang_link' href="#"><img src="/flags/us.png" alt="en_EN" /></a>
Assuming your links have a class of lang_link, you can look inside the link to see what language should be chosen.
$('.lang_link').click(function(){
var lang = $(this).find('img:first').attr('alt');
});

Javascript loading an image on hover over a link

i am new to java script and i am designing my web site but i want to load a new image on a particular place of my web page when a user hover over the home,here is the code.
<html>
<head>
</head>
<body>
<img src="yourImage.jpg" alt="Home" id="image1" onmouseover="image1.src='home.jpg';" onmouseout="image1.src='myImage.jpg';" /> <br />
Hoover Me!
</body>
</html>
This code is not working.Please Help me to find out the error in code.
You have to use the method document.getElementById() to get the image object before try to manipulate it:
<body>
<img src="yourImage.jpg" alt="Home" id="image1" onmouseover="document.getElementById('image1').src='home.jpg';" onmouseout="document.getElementById('image1').src='myImage.jpg';" /> <br />
Hoover Me!
</body>
You should consider using JQuery to do this kind of stuff.
image1 doesn't have any meaning. You will need to use
document.getElementById('image1').src instead of just image1.src.
You're missing the starting quote for the onmouseover attribute of
the a tag.
In addition to not using document.getElementById, you'll also encounter a lag on mouse over, unless the image has been pre-loaded.
You can not refer to the img as image1.src first you have to assign image1=document.getElementById('image1') then you can refer it as image1.src. There is also a much simpler method to do that. You can also refer to the current image or object as this.src in JavaScript. See the corrected code with changes bellow:
<html>
<head>
</head>
<body>
<img src="yourImage.jpg" alt="[ Home ]" id="image1" onmouseover="this.src='home.jpg';" onmouseout="this.src='myImage.jpg';" /><br />
Hoover Me!
</body>
</html>
To access the img element from it's own inline attributes, you need to use the 'this' keyword:
<img src="yourImage.jpg" alt="Home" id="image1" onmouseover="this.src='yourOtherImage.jpg';" />
Rather than do it inline, you could also use a javascript library, like jQuery, as detailed here, which would give you more flexibility if you want to do more later e.g. add animations, but that's up to you and how much of a challenge you feel like :)

how to get image height and width from href?

I tried to get the image height and width from a href link image, but no luck. is there anyone know how to solve this problem?
here is the code:
<a href="/images/int_kit_a_set.jpg" class="upload">
<img src="/Assets/images/int_kit_a_set_thumb.jpg"
ondragstart="return false" height="108" width="144" alt="" />
</a>
Your HTML:
<img src="/Assets/images/int_kit_a_set_thumb.jpg" ondragstart="return false" height="108" width="144" alt="" />
Javascript w/jQuery:
var image = $("<img />").attr("src", $(".upload").attr("href"));
$(document).append(image);
alert(image.height());
alert(image.width());
image.remove();
I didn't test the javascript... but I'm not really sure your question is clear... so maybe this is what you wanted, maybe not.
Essentially, I'm grabbing the HREF attribute of the link, creating a new image on the page with that url, measuring the image, and then removing it from the DOM.
You could add a style to the image which placed it off screen or something... but you'd have to mess with it to find something that worked cross-browser. Some browsers don't consistently load images which aren't visible. I'm also not sure if you'd run into any timing issues with my script.
Putting it all together:
alert( new Image().src = $('.upload').attr('href')).width );

Categories