I have a webpage in PHP in which there is an image.
Post this image on a blog with this script.
<div id="x"></div>
<script>
let div = document.getElementById("x");
let aTag = document.createElement("a");
aTag.href = 'http://www.meteoarachova.com/ws';
aTag.title = 'Εικόνα Κάμερας Μετεωρολογικού Σταθμού Αράχωβας';
aTag.target = '_blank';
aTag.outline = 'none';
let img = document.createElement("img");
img.src = "http://www.meteoarachova.com/webcam/arachova1.jpg";
img.style.width = '100%';
img.style.height = '80%';
aTag.append(img)
div.append(aTag);
console.log(document.getElementsByTagName('a')[0])
</script>
But I also want to post a second images at a different point on the same blog.
The two images to be in completely different places on the page and not next to each other.
I put the same code but it does not work.
How can I customize it to work?
Id's are unique to the page, hence you can only have a single div with the id "x".
That is why it probably won't work, or you're appending to the same place on the page.
Related
Surely there are better options, but I was trying this:
images = document.getElementsByTagName("img")
links = []
for (let img of images){
const alt = img.getAttribute("alt")
if( alt && alt.substring("code")){
var save = document.createElement('a');
save.href = img.src
save.download = `${img.src}`
save.click()
break//test with one for now
}
}
from the console. Now instead of automatically downloading it just opens it in a different page and I'd need to manually download.
Any ideas what am I missing?
I'm pretty new to JS and programming altogether so I'm sorry in advance if the explanation is a little sloppy, but I'll try to make it as clear as possible.
So what I'm trying to do is have a JS code that reads and displays (in an HTML page) photos from a PC folder, makes them clickable and on the click it redirects you to a page with the same photo but in high resolution.
Now, I have this piece of code that displays the said pictures, but the thing is I don't seem to be able to figure out how to "connect" it to the pictures and make them clickable. What makes it more difficult is that I'm trying to make all of this code dynamic (as you can see I've done in the below code), so I would like not to have any hardcoded titles of pictures and so on.
var index = 1;
var tempImg = new Image();
tempImg.onload = function(){
appendImage();
}
var tryLoadImage = function(index){
tempImg.src = 'img/' + index + '.jpg';
}
var appendImage = function(){
var img = document.createElement('img');
img.src = tempImg.src;
document.body.appendChild(img)
tryLoadImage(index++);
}
tryLoadImage(index);
Any help is very much appreciated, thank you very much!
You can make your images clickable by adding an onclick function to them. Try something like this:
var appendImage = function(){
var img = document.createElement('img');
img.src = tempImg.src;
img.onclick = e => {
// do something you want to show the full picture like this maybe
var el = document.getElementById("fullpictureid");
if (el && e.target.src) {
el.src = e.target.src;
// so that it sets "src" in <img id="fullpictureid"> for example
}
};
document.body.appendChild(img)
tryLoadImage(index++);
}
I am setting up a timeline using examples from http://visjs.org/docs/timeline/#Example. Can someone tell me what I need to add a local link to the graphic I have?
I have tried a.href, but maybe I am doing something wrong. Here is a snippet with my code commented out:
var item5 = document.createElement('div');
item5.appendChild(document.createTextNode('item 5'));
item5.appendChild(document.createElement('br'));
var img5 = document.createElement('img');
// img5.a.href = 'attachments/AddDuties.pdf';
img5.src = 'icons/pdf1.png';
img5.style.width = '48px';
img5.style.height = '48px';
item5.appendChild(img5);
Here is the some more code (I cut parts out to reduce size, it works before I add my own code below on image 5:). Image 5 is the one I want link the graphic to a file.
<title>Timeline | Basic demo</title>
<script src="vis-4.21.0/dist/vis.js"></script>
<link href="vis-4.21.0/dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>'
<script>
// create a couple of HTML items in various ways
var item1 = document.createElement('div');
item1.appendChild(document.createTextNode('item 1'));
var item4 = 'item <span class="large">4</span>';
**var item5 = document.createElement('div');
item5.appendChild(document.createTextNode('item 5'));
item5.appendChild(document.createElement('br'));
var img5 = document.createElement('img');
// img5.a.href = 'attachments/AddDuties.pdf';
img5.src = 'icons/pdf1.png';
img5.style.width = '48px';
img5.style.height = '48px';
item5.appendChild(img5);**
</body>
I expect to be able to click the graphic and follow the assigned link. I know how to use href in HTML, I just dont know what code needs to tell javascript how to link the graphic in image 5.
href is an attribute for the <a> tag. you can't add href to an image.
What you should do is create an <a> element assign the href you want to it and
append the img as a child of that <a> element.
<a href="{whatever you want}">
<img src=....>
</a>
edit:
if for some reason you can't wrap the image with an <a> you could assign and id to the image and then add an event listener for a click that will redirect you.
I have a question of document.getElementById().src under jQuery Template.
Firstly I created an array of 5 pictures(only the first element was depicted) as showed below:
var Image = function(src){
this.src = src;
}
var images = [];
images[0] = new Image("images/hedgehog.jpg");
Then I created a function which includes passing the src of the array to an ID(only relevant code was depicted):
document.getElementById("theQ").src = images[0].src;
The final part is the place expected to present the picture, but it didn't work:
<p style="text-align:center;" id="theQ"></p>
The navigation is correct as I could see the picture when I hover on the URL in text editor. Thank you for the help!
A paragraph is not an image. You can't attach a source to it. And it makes no sense to shadow the image constructor, just use the native one:
const img = new Image();
img.src = "images/hedgehog.jpg";
Now you can easily append that image to the dom:
document.getElementById("theQ").appendChild(img);
Since you already use jQuery in your template.
var Image = function(src){
this.src = src;
}
var images = [];
images[0] = new Image("https://thumbs.dreamstime.com/b/woman-wearing-yellow-floral-top-116695890.jpg");
$("#theQ").append("<img src=\""+images[0].src+"\" width=\"150\" />");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="text-align:center;" id="theQ"></p>
I want to show different images in a DIV, the turn of an image depend on a random number.
The image name is like 1.gif, 2.gif, .. 6.gif
to do that I coded
var img = document.createElement("IMG");
img.src = "images/1.gif";
document.getElementById('imgDiv').appendChild(img);
but it does not replace the old image how ever it add an another image right in the bottom of first image.
syntax for DIV is:
<div id="imgDiv" style="width:85px; height:100px; margin:0px 10px 10px 375px;"></div>
may u halp me ?
var img = document.createElement("IMG");
img.src = "images/1.gif";
var oldImg = document.getElementById('oldImg');
document.getElementById('imgDiv').replaceChild(img, oldImg);
var dv = document.getElementById('imgDiv');
// remove all child nodes
while (dv.hasChildNodes()) {
dv.removeChild(dv.lastChild);
}
var img = document.createElement("IMG");
img.src = "images/hangman_0.gif";
dv.appendChild(img);
If you want to replace an element, you need to use replaceChild, not appendChild.
I would not recommend changing the src of the element in question. That would cause a lag in the display of the next image while the browser downloads the next image. If you have a set number of images you would want to preload them the way you are doing so now.
If you have the following code:
<div id="imgDiv" style="width:85px; height:100px; margin:0px 10px 10px 375px;"></div>
You can do this:
<script type="text/javascript>
var nextImage = document.createElement("img");
nextImage.src = "your source here";
document.getElementById("imgDiv").appendChild(nextImage);
</script>
Now that you have an image in place you can use the replaceChild() method:
var imageDiv = document.getElementById("imgDiv");
imageDiv.replaceChild(nextImage, imageDiv.childNodes[0]);