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..
Related
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}}">
If I have an img in index.html:
<script src="script/script.js" type="text/javascript"></script>
<img id="imgb" src="picture/banner1.jpg" border="0">
then in a separate file, such as gallery.html, I need to get the src element of the img in index.html.
I tried writing this function:
function imgbbs(){
var x = document.getElementById('imgb').src;
document.getElementById('imgbb').src = x;
}
Then try using it in gallery.html:
<script src="script/script.js" type="text/javascript"></script>
<body onload="imgbbs()">
<img id="imgbb" src="" border="0">
But it doesn't seem to be working. How can I get the src attribute of an img in a different file?
A way to do this is to load a partial part of the index page using jquery it would be like this:
$( "#your_image_container_in_gallery.html" ).load( "index.html #imgb" );
do i have a syntax error? , could it be that im using notepad++?
nothing is happening when i click a thumbnail image
i am new to javascript so that may be the case.
my general idea was to create an event "changeimage" that onclick would change the source of my main image for my thumbnails image to make it bigger.
<head>
<script type="text/javascript">
function changeimage(event)
{
event = event;
var targetElement = event.target;
if (targetElement.tagName == "IMG")
{
document.getElementbyid("Main").src = targetelement.getattribute("src");
}
}
</script>
<meta charset="utf=8">
<style>
#Main
{
height:540px;
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img id="Main" src="img/rickroll1.jpg" </img>
<br />
<div id="thumbnail" onclick="changeimage(event)">
<img class="imgthmb1" src="img/rickroll1.jpg" />
<img class="imgthmb1" src="img/rickroll2.jpg" />
<img class="imgthmb1" src="img/rickroll3.jpg" />
<img class="imgthmb1" src="img/rickroll4.jpg" />
<img class="imgthmb1" src="img/rickroll5.jpg" />
</div>
</body>
</html>
Yes, you have a syntax error:
targetElement is spelled targetelement in the following line:
document.getElementbyid("Main").src = targetelement.getattribute("src");
Change it to the following:
document.getElementbyid("Main").src = targetElement.getattribute("src");
On a related note, the following line is extraneous and can be removed:
event = event;
Javascript is case-sensitive.
in place of
document.getElementbyid("Main").src = targetelement.getattribute("src");
write
document.getElementbyId("Main").src = targetElement.getAttribute("src");
Also your html markup has an error:
<img id="Main" src="img/rickroll1.jpg" </img>
should be
<img id="Main" src="img/rickroll1.jpg">
<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
I am new to jquery and javascript. I want some picture in a div to change on click on another picture. I did look around here and found something similar to what i want but can't seem to make it work.
Here is my code:
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script type="text/javascript">
$(document).ready(function(){
$('#changeImage').click(function(){
var rel = $(this).attr('rel');
$("#imageBox img").attr('src', 'image' + rel + '.jpg');
})
});
</script>
</HEAD>
<BODY>
<div id="imageBox"><img src=placeholder.jpg></div>
<BR>
<img class="thumb" src="image1-thumb.jpg" />
<img class="thumb" src="image2-thumb.jpg" />
<img class="thumb" src="image3-thumb.jpg" />
</BODY>
</HTML>
You can see it life here: http://www.thebruises.be/TEST/test.html
But as I said above it doesn't work; tried moving the ... inside the body but doesn't change anything.
Any help would be appreciated ... and as I mentionned above I has zero javascript/jquery skills.
Thx
you're using the same id for all <a> tags. an ID has to be unique within the page your javascript is applying the on click function only to the first image
change id to class and your code should work
your code should look like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.changeImage').click(function(){
var rel = $(this).attr('rel');
$("#imageBox img").attr('src', 'image' + rel + '.jpg');
})
});
</script>
...
<img class="thumb" src="image1-thumb.jpg" />
<img class="thumb" src="image2-thumb.jpg" />
<img class="thumb" src="image3-thumb.jpg" />
Change your id="changeImage" to class="changeImage" since id is unique.
Then you can use each to iterate over all of your anchors with class changeImage:
$('.changeImage').each(function() {
$(this).click(function(){
var rel = $(this).attr('rel');
$("#imageBox img").attr('src', 'image' + rel + '.jpg');
})
});
Copy and paste this to your jQuery code:
$(document).ready(function(){
$('.changeImage').each(function() {
$(this).click(function(){
var rel = $(this).attr('rel');
$("#imageBox img").attr('src', 'image' + rel + '-thumb.jpg');
})
});
});
Demo