Assign src of image to a variable through JS in HTML - javascript

I want to assign content of the src tag of image to a variable on clicking on the image through JS:
Eg-
HTML
<div id="img">
<img src="image1.jpg">
<img src="image2.jpg">
</div>
<span id="source"/>
JS
???
I want to assign the image source of the clicked image to a variable and then display the source on HTML through span. This all should happen when I click the image. And the source that is going to be assigned to variable should be of the clicked image.
How can I do it?
Thanks in advance.

try the following:
<html>
<head>
<script>
function setImage(id){
var element = document.getElementById(id).src;
document.getElementById("source").innerHTML = "<img src='" + element + "' />";
}
</script>
</head>
<body>
<div id="img">
<img id="img1" src="image1.jpg" onclick="setImage(this.id)" >
<img id="img2" src="image2.jpg" onclick="setImage(this.id)" >
</div>
<span id="source"></span>
</body>
</html>

you can try this,
<img ng-src="{{myVar}}">

Related

Display image legend on hover (not as tooltip) using innerHTML?

I have a webpage with many images, each of which has a title attribute. When I hover over the image, I want the title text to display in a separate legend element I have created (not as a tiny hover tooltip). I have a mouseover function which works fine - i.e. when I hover over the image the legend changes value. But I want that value to be the title text of the individual image - which I don't know how to access. I have tried …innerHTML = this.title which is obviously incorrect.
[The number of images is large and changing (like an album), so I can't add separate code for each <img> tag. I can use alt or any other <img> attribute to make this work. I'm not wedded to the innerHTML method, either, but am hoping for some simple code to do the trick!]
Please help? Thanks! (FYI, I'm a novice coder.)
<!DOCTYPE html>
<html>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver()" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver()" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver()" title="Dinner">
</div>
<script>
function mouseOver() {
document.getElementById("legend").innerHTML = this.title;
}
</script>
</body>
</html>
It looks like you are trying to use this.title to represent the different images? If you want their titles to appear in the <h1> tag you need to pass the information to the function shown below.
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
</div>
<script>
function mouseOver(x) {
document.getElementById("legend").innerHTML = x.title;
}
</script>
I guess its helpful .
But i use Jquery
just need call this code in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" class="class_of_div" title="Breakfast">
<img src="image2.jpg" class="class_of_div" title="Lunch">
<img src="image3.jpg" class="class_of_div" title="Dinner">
</div>
<script>
$(document).on('mouseover', '.class_of_div', function () {
var thiss=$(this);
$('#legend').text(thiss.attr('title'));
});
</script>
</body>
</html>

Attempting to get a javascript variable to be an image source

<div id="companyLogo"></div>
<script type = "text/javascript">
var imageName = prompt("Client Logo Image:");
$('#companyLogo').html(<img src = imageName, style="-webkit-filter: invert(100%);">);
</script>
I am trying to get imageName to be the source for the "img src" tag. Any help is greatly appreciated. Thanks!
try this.
in the begining :
<div id="companyLogo">
<img src="" id="#companyImg" style="display:none;" />
</div>
On some event the prompt box is displayed to the user
<script>
$(document).ready(function(){
var imageName = prompt("Client Logo Image:");
$("#companyImg").attr('src', 'your image path' + imageName);
$("#companyImg").css('display','block');
});
</script>
It's a better practice to keep your javascript away from your html. So you could create an html document like so:
<!DOCTYPE html>
<html>
<body>
<img id="companyLogo" src="path/to/some/default.img" alt="Your Company Logo" />
<script>
//prompts user for input
var imgSrc = prompt("Please input name");
//changes src of the targeted image to the value input by the user
document.getElementById("companyLogo").src = imgSrc;
</script>
</body>
</html>
Here is a fiddle

css image gallery with inner zoom

I have a working inner-zoomable image using the code below and I would like to modify this to an image gallery with zoom of the selected image element, but cannot figure out how to begin. What I would like is for the image source in the second hyperlink below ("img_02" src=") to substitute for the first. Anyone shed any light please?
<html>
<head>
<script src="../jquery-1.8.3.min.js"></script>
<script src="../jquery.elevatezoom.js"></script>
</head>
<body>
<img id="zoom_01" src="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<img id="zoom_01" src="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<div id="zoom_01">
<a href="#" data-image="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<img id="img_01" src="../images/package_thumb.jpg" /></a>
<a href="#" data-image="../images/coffee.jpg" data-zoom-image="../images/coffee_big.jpg">
<img id="img_02" src="../images/coffee_thumb.jpg" /></a>
</div>
<!--initiate the plugin and pass the id of the div containing gallery images-->
<script>
$('#zoom_01').elevateZoom({zoomType: "inner", cursor: "crosshair",});
</script>
</body>
</html>
1) ID should never be used more then once in a single html ~ you have used "zoom_01" 3 times use it only on the first image.
2) To create a gallery you should use this code:
$("#zoom_01").elevateZoom({gallery:'gallery', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
Here is the fixed HTML:
<img id="zoom_01" src="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<div id="gallery">
<a href="../images/package_big.jpg" data-image="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<img id="img_01" src="../images/package_thumb.jpg" /></a>
<a href="../images/coffee_big.jpg" data-image="../images/coffee.jpg" data-zoom-image="../images/coffee_big.jpg">
<img id="img_02" src="../images/coffee_thumb.jpg" /></a>
</div>
And yes the demo site HTMl code is wrong :) ~ i will send them a mail.

Change an image with "onmouseover"

I'm trying to change an image src using JavaScript. Unfortunately this doesn't seem to work. Can anyone tell me what I am doing wrong?
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<div class="fill">
<img id="img" src="books\thumbnail\10.jpg\">
<img src='books\big\4.jpg' onmouseover='changeImage("books\bigger\4.jpg");'>
<img src='books\big\5.jpg' onmouseover='changeImage("books\bigger\5.jpg");'>
<img src='books\big\6.jpg' onmouseover='changeImage("books\bigger\6.jpg");'>
</div>
Try this:-
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<div class="fill">
<img id="img" src="books/thumbnail/10.jpg/">
<img src='books/big/4.jpg' onmouseover='changeImage("books/bigger/4.jpg");'>
<img src='books/big/5.jpg' onmouseover='changeImage("books/bigger/5.jpg");'>
<img src='books/big/6.jpg' onmouseover='changeImage("books/bigger/6.jpg");'>
</div>
Here's how I would've done it, makes it a bit more scalable
<script type="text/javascript">
function changeImage(img) {
document.getElementById("img").src = img.src.replace("/big/", "/bigger/");
}
</script>
<div class="fill">
<img id="img" src="books/thumbnail/10.jpg">
<img src='books/big/4.jpg' onmouseover='changeImage(this)'>
<img src='books/big/5.jpg' onmouseover='changeImage(this)'>
<img src='books/big/6.jpg' onmouseover='changeImage(this)'>
</div>
document.getElementById("img").src=a;
Finds element with ID "img". To find current image try
changeImage(this, "books\bigger\4.jpg");
And,
function changeImage(img, string)
{
img.src = string;
}
Try doing this in JavaScript:
document.getElementById("img").onmouseover=changeImage("http://placehold.it/500");
Worked for me.

javascript image source

img src tag
i want, when click on image the source of the image in javascript variable
i want to use the src in javascript
var imageSource = document.getElementById ( "yourimageid").src;
A sample one
<script type="text/javascript">
function GetSrc(elem)
{
alert ( elem.src );
}
</script>
<img src="images/yourimage.extn" id="img1" onclick="GetSrc(this);" />
<img src="image.png" id="image" alt="image">
<script type="text/javascript">
alert(document.getElementById('image').src);
</script>
This will alert the src of the element with the id 'image'
Also you can use document.getElementById("[elementName]").getAttribute("src") and setAttribute..

Categories

Resources