Is this possible to get the image URL which is inside a DIV
For example
<div id="smallImage" style="display: block;">
<img width="270" height="270" alt="Vitra" name="large" src="http://example.com/598441_m2.jpg" style="display: block;">
</div>
I want to read this in a javascript . i.e. in newImg.src
<script>
var newImg = new Image();
newImg.src = " ?? ";
</script>
Can anyone help me with this?
Thanks
Sheikh
Try this:
var myImgSrc = document.getElementById("smallImage").getElementsByTagName("img")[0].src;
You may find further information about document here.
You could simply use document.querySelectorAll like in this fiddle.
If not using jQuery - http://jsfiddle.net/FyBbY/
var image_source = document.querySelector('#smallImage img').src
var newImg = new Image();
newImg.src= image_source;
newImg.src = document.getElementsByName("large")[0].src;
Add this line and it will work, You don't have to use jQuery just for this.
So complete answers is as following.
<script>
var newImg = new Image();
newImg.src = document.getElementsByName("large")[0].src;
</script>
Related
How to access a web page after having embedded it into a div? Trying normally just returns null. Here's an example of what I mean:
var replaceThis = document.querySelector('.div1');
var withThis = document.querySelector('.div2 a').getAttribute("href");
replaceThis.innerHTML = '<object type="text/html" data="' + withThis + '" style="width: -webkit-fill-available; height: -webkit-fill-available;"></object>';
var thingFromEmbeddedSite = document.querySelector('.div2'); //returns div2
console.log(thingFromEmbeddedSite);
thingFromEmbeddedSite = document.querySelector('h2'); //returns null
console.log(thingFromEmbeddedSite);
https://jsfiddle.net/zhhL9rjr/3/
You would have to wait for the content to load and then access the content, i have made a small update to your fiddle, it does not work in there due to cross-origin.
HTML:
<body>
<div class="div1">
stuff
</div>
<div class="div2">
link
</div>
</body>
JS:
function embed(src, target){
return new Promise(function(resolve, reject){
let iframe = document.createElement("iframe");
iframe.src = src;
iframe.style = "width: -webkit-fill-available;height: -webkit-fill-available;";
iframe.onload = function(){
resolve(iframe.contentWindow.document);
};
target.parentNode.replaceChild(iframe, target);
});
}
let href = document.querySelector('.div2 a').getAttribute("href"),
target = document.querySelector('.div1');
embed(href, target).then(function(doc){
console.log( doc.querySelector('h2') );
});
https://jsfiddle.net/zhhL9rjr/6/
but should work if you load something from the same domain.
I am trying to add an image as an element into my webpage. I am unable to do so. There are instructions on how to preview an image, but I was unable to find a solution.
What I want it to do is to add a div with an image into the webpage and keep loading it with different images. So after I add image 1, I would load image 2 under image 1 in the same webpage.
html body code:
<input type='file' id='getval' /><br/><br/>
<span onclick="readURL()" class="addBtn">Add</span>
<div id="myUL"></div>
javascript code:
<script type="text/javascript">
// grabs image
var file = document.createElement('image');
file.src = document.getElementById('getval').files[0];
// creates div & assigns id
var div = document.createElement('div');
div.id = 'item';
// adds file to div
file.type = 'image';
div.appendChild(file);
//adds item
document.getElementById("myUL").appendChild(div);
}
</script>
edit1*
I think adding the output of the code I want to display would be better inside the html document.
javascript generates html code inside document:
<div style="background-image":url("image");"><div>
You can use this script
count = 0;
function viewImage(){
var imagefile = document.querySelector('#image');
if (imagefile.files && imagefile.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var content = '<img id="temp_image_'+count+'" style="border: 1px solid; width: 107px;height:107px;" >';
document.querySelector('#all_images').innerHTML += content;
document.querySelector('#temp_image_'+count).setAttribute('src', e.target.result);
}; reader.readAsDataURL(imagefile.files[0]);
this.imagefile = imagefile.files[0];
count++;
}else{
console.log("Image not selected");
}
}
<div id="all_images">
</div>
<input id="image" name="image" type="file" onChange="viewImage()">
Here you go, although pay attention to the comment at line 3.
<script type="text/javascript">
var file = document.createElement("img");
file.setAttribute("src", document.getElementById('getval').files[0]); //You can use HTML5 File API here
file.setAttribute("height", "250");
file.setAttribute("width", "250");
var divTocreate = document.createElement('div');
divTocreate.id = 'item';
divTocreate.appendChild(file);
document.getElementById("myUL").appendChild(divTocreate);
</script>
I am new with HTML and JavaScript. I am trying to load image using onload event through JavaScript.
My code is as below:
<script>
function createImage() {
('testimonialhulk').src='photo.jpg';
</script>
and the HTML is
<body onload="createImage()">
<div class="testimonialhulk">
</div>
</body>
</html>
I have to display image in div tag.
This works in my jsfiddle
<body onload="createImage();">
<div id="testimonialhulk">
Hello
</div>
</body>
Js:
function createImage()
{
var myElement = document.getElementById("testimonialhulk");
myElement.style.backgroundImage = "url('https://placehold.it/350x150')";
}
JS fiddle
https://jsfiddle.net/wuskc68d/1/
Try this
function createImage() {
var par = document.getElementsByClassName("testimonialhulk")[0];
var img = document.createElement('img');
img.src = 'put path here';
par.appendChild(img);
}
or use <div id="testimonialhulk">
document.getElementById('testimonialhulk')
.innerHTML = '<img src="imageName.png" />';
In a given database using MYSQL, I am storing image file paths to be displayed. I retrieve the path using a query. The returned value is stored in a 'var' type variable. How can I use this as input to the img src attribute to display the image?
For Example:
var x = "http://www.w3schools.com/jsref/compman.gif";
<img src=x>
I am not able to use the above, so is there a way to display the image?
Thanks in advance.
You can create a new image in Javascript using the Image Constructor.
var x = "http://www.w3schools.com/jsref/compman.gif";
var myImage = new Image();
myImage.src = x;
document.body.appendChild(myImage);
Try this code :
var x = "http://www.w3schools.com/jsref/compman.gif";
document.getElementById("YOUR_IMAGR_ID").src = x;
You can create the image tag dynamically in javascript
Javascript Code
function myFunction() {
var x = document.createElement("IMG");
x.setAttribute("src", "http://www.w3schools.com/jsref/compman.gif");
x.setAttribute("width", "304");
x.setAttribute("width", "228");
x.setAttribute("alt", "The Pulpit Rock");
document.body.appendChild(x);
}
HTML Code
<body>
<button onclick="myFunction()" >Display Image</button>
</body>
Please check the demo
check this out:
function set(){
document.getElementById('tmp').style.visibility = "visible";
var x = "http://www.w3schools.com/jsref/compman.gif";
document.getElementById("tmp").src = x;
}
<img src="" id="tmp" style="visibility:hidden">
<input type="button" onclick="set();" value="Click Me!">
I'm just learning some java. I am currently learning if, else statements.
In the game I am creating, the user picks a number between 0 and 10 and puts it into an input box. If correct, the image on screen changes to one picture, if incorrect, it switches to a different picture. However, I cannot seem to get the images to change at all. I've tried a few different ways of coding; I'm currently using an img array. However, when I do the code I receive an ObjectHTMLImageElement error.
Here is my current code:
<div id="top">
<h1>Pie in the Face</h1>
<p>Guess how many fingers I'm holding up between 0 and 10.
<br /> If you guess correctly, I get a pie in the face.
<br /> If you guess wrong, you get a pie in the face.</p>
<input id="answer" />
<button id="myButton">Submit</button>
</center>
</div>
<div id="container">
<div id="image"></div>
<div id="manpie"></div>
<div id="girlpie"></div>
</div>
<script type="text/javascript">
var x = Math.random();
x = 11 * x;
x = Math.floor(x);
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = "images/manpie2.jpg";
imgArray[1] = new Image();
imgArray[1].src = "images/girlpie2.jpg";
document.getElementById("myButton").onclick = function() {
if (x == document.getElementById("answer").value) {
document.getElementById("image").innerHTML = imgArray[0];
// what I had document.getElementById("image").innerHTML=imgArray[0];
} else {
document.getElementById("image").innerHTML = imgArray[1];
}
}
</script>
</body>
I have also tried using lines such as: document.getElementById("image").innerHTML=document.getElementById("manpie");
and then nothing works. Here is a link to the "live" site it's on.
http://176.32.230.6/mejorarcr.com/
any help would be appreciated. Thank You!
You have to change the innerHTML value in your code:
if (x==document.getElementById("answer").value) {
document.getElementById("image").innerHTML='<img src="'+imgArray[0].src+'" />';
// what I had document.getElementById("image").innerHTML=imgArray[0].src;
} else {
document.getElementById("image").innerHTML='<img src="'+imgArray[1].src+'" />';
}
DEMO or this
change:
document.getElementById("image").innerHTML=imgArray[0];
to:
document.getElementById("image").setAttribute("src", imgArray[0]);
make sure imgArray[0] is the actual image path:
imgArray[0]="images/manpie2.jpg";
imgArray[1]="images/girlpie2.jpg";