Add Links to Images in a Script - javascript

This script replaces the background of the DIV 'middle' with the images listed in the array. Currently the script works perfect but I want to be able to assign a link to each image, tried just replacing with but then the image doesn't show up nor does the link work.
<script>
var images=new Array('/images/home/imgone.jpg', '/images/home/imgtwo.jpg', '/images/home/imgthree.jpg', '/images/home/imgfour.jpg', '/images/home/imgfive.jpg');
var nextimage=0;
doSlideshow();
function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('.middle')
.css('background-image','url("'+images[nextimage++]+'")')
.fadeIn(500,function(){
setTimeout(doSlideshow,5000);
});
}
</script>
What I'm looking for is something like this.
<script>
var images=new Array('/images/home/imgone.jpg', '/images/home/imgtwo.jpg', '/images/home/imgthree.jpg', '/images/home/imgfour.jpg', '/images/home/imgfive.jpg'); To: var images=new Array('<img src="/images/home/imgone.jpg"', '<img src="/images/home/imgtwo.jpg"', '<img src="/images/home/imgthree.jpg"', '<img src="/images/home/imgfour.jpg"', '<img src="/images/home/imgfive.jpg"');
</script>

Although this does not fully answer your question, maybe you can get some ideas from DOM functions.
Example
<script>
// Creates Image
var image = document.createElement("img");
// Sets Image Attributes
image.src = "http://i.imgur.com/gqdqudn.png";
image.width = "30";
image.height = "30";
// Adds Image to Body
document.body.appendChild(image);
</script>
This appends an image to the body. If you would like to add it to a specific ID, you could do the following (assuming your div id is "destination").
Example
<!DOCTYPE html>
<html>
<body>
<div id="destination">
<!-- Destination Div -->
</div>
<script>
// Creates Image
var image = document.createElement("img");
// Sets Image Attributes
image.src = "http://i.imgur.com/gqdqudn.png";
image.width = "30";
image.height = "30";
// Adds Image to Body
document.getElementById("destination").appendChild(image);
</script>
</body>
</html>
Good luck!

Related

What is the function to add a link to a graphic in javascript under document.createElement?

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.

document.getElementById().src could not present images under Jquery template

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>

How to change the image a source is associated with

Is there anyway that I can put an image on my site that changes.
I know how to change the source of an image element. What I mean is like:
the image is located here
http://mywebsite.com/image.png
this doesn't change but I want the actual image to change.
More examples:
https://huggle.jdf2.org/
This site creates a bbcode element that contains the img username.png
[url=http://huggle.jdf2.org/hug/username][img]http://huggle.jdf2.org/sig/username.png[/img][/url]
This image changes depending on how many huggles you have.
How would I do this?
You can dynamically set the image source URL with:
var yourURLHere = 'ADD YOUR URL HERE';
image.src = yourURLHere;
If you want the your image to randomly change, you can use Math.random() to select a random URL from an array.
Example: Random teddy bear images (see below).
<image src="#" id="my-image"/>
Click to change image randomly.
<button id="my-btn">Change it!</button>
<script>
var imageURLs = [
'https://s-media-cache-ak0.pinimg.com/originals/4e/da/9f/4eda9f56de08463bcc18d154f654ab6d.jpg',
'http://lcdn.inthelighturns.com/media/product/e85/sweet-memories-blue-teddy-bear-urn-b83.jpg',
'https://s-media-cache-ak0.pinimg.com/originals/3c/80/3c/3c803ce72e8c0325d7ea0fcd32f81ed9.jpg',
'http://cliparting.com/wp-content/uploads/2016/07/Cartoon-teddy-bear-clipart.gif',
'http://cliparts.co/cliparts/rcn/Kox/rcnKox65i.png',
'https://s-media-cache-ak0.pinimg.com/originals/f2/d6/25/f2d6258ef0fa6de2160778066ccec832.jpg',
'https://s-media-cache-ak0.pinimg.com/236x/90/3a/6c/903a6c59c0a2f42e7d6e7cb9427a8337.jpg',
'https://s-media-cache-ak0.pinimg.com/564x/a9/ee/30/a9ee30a4f8d196a111aa5c3db7b13b6e.jpg',
'http://cdn3.volusion.com/9nxdj.fchy5/v/vspfiles/photos/BB-1433-2.jpg?1415360799'
];
var image = document.getElementById('my-image');
function pickRandomURL() {
return imageURLs[Math.floor(Math.random() * imageURLs.length)];
}
image.src = pickRandomURL();
image.width = 200;
var btn = document.getElementById('my-btn');
btn.onclick = function() {
image.src = pickRandomURL();
image.width = 200;
};
</script>

JavaScript trying to change image

There are four files at the same folder directory
- 1.jpg
- 2.jpg
- index.html
- 1.js
I am hoping to write the code so it will load 1.jpg at first, but it will load 2.jpg next
The JavaScript is
var img = new Image(); // Create new img element
img.src = '2.jpg';
var getElementIMG = document.getElementById("imageid");
getElementIMG.src = img.src;
And the HTML is
<img id="imageid" src="1.jpg">
but when the page finishes loading it still displays 1.jpg
Try this:
<!doctype html>
<html>
<body>
<img id="imageid" src="1.jpg">
<script>
var getElementIMG = document.getElementById("imageid");
getElementIMG.src = '2.jpg';
</script>
</body>
</html>
If your Javascript is on the header you need to specify when do you want the image to be replaced, which is when it exists.
After the window has been loaded:
window.onload = function () {
document.getElementById("imageid").src = "2.jpg";
}
Demo: http://jsfiddle.net/5a6Jx/2/
Or you can just stick the script at the end of the page:
<img id="imageid" src="1.jpg" />
<script type="text/javascript">
document.getElementById("imageid").src = "2.jpg";
</script>
On both ways your image will be there already, so you can manipulate it.
<head> <script type="text/javascript" src="1.js"></script> </head>
The script is loaded in the head and executed immediately. There is no element '#imageid', so document.getElementById returns null. An error is probably thrown on the getElementIMG.src = img.src; line. If something doesn't work, one of the first things you should do is check for errors in the debugger/console. (F12 in most browsers.)
Later on the page, the browser sees an image. It displays it.
What you want to do is load the script after the image. If you put it at the end of the page, the <img> will be seen by the browser, and only after that, its src will be changed.
You will have to make your move when the document and your image are both loaded.
window.onload = function () {
var img = new Image();
img.src = '2.jpg';
img.onload = function() {
var getElementIMG = document.getElementById("imageid");
getElementIMG.src = img.src;
}
}

How can i return img.src by clicking on an image with javascript?

I am trying to create a function with javascript where a user upon clicking on an image can retrieve that images src as a URL. I am very new to javascript and my attempts so far at creating a function activated by "onclick" of an image are:
var showsrc = function(imageurl)
var img = new Image();
img.src = imageurl
return img.src
to call the results i have been trying to insert the image.src into my html using
document.getElementById("x").innerHTML=imageurl;
Im having very little success. Any help would be greatly appreciated. Thank you.
I tested this in IE9 and Chrome 17. Add an onclick handler to the body (or nearest container for all your images) and then monitor if the clicked element is an image. If so show the url.
http://jsfiddle.net/JbHdP/
var body = document.getElementsByTagName('body')[0];
body.onclick = function(e) {
if (e.srcElement.tagName == 'IMG') alert(e.srcElement.src);
};​
I think you want something like this: http://jsfiddle.net/dLAkL/
See code here:
HTML:
<div id="urldiv">KEINE URL</div>
<div>
<img src="http://www.scstattegg.at/images/netz-auge.jpg" onclick="picurl(this);">
<img src="http://www.pictokon.net/bilder/2007-06-g/sonnenhut-bestimmung-pflege-bilder.jpg.jpg" onclick="picurl(this);">
</div>​
JAVASCRIPT
picurl = function(imgtag) {
document.getElementById("urldiv").innerHTML = imgtag.getAttribute("src");
}​
Image tags do not have an 'innerHTML', since they're singleton tags - they cannot have any children. If your x id is the image tag itself, then:
alert(document.getElementById('x').src);
would spit out the src of the image.
Here's a naïve solution with just javascript (probably not cross-browser compatible):
<!doctype html>
<html>
<head>
<script>
function init() {
var images = document.getElementsByTagName('img');
for(var i = 0, len = images.length; i < len; i++) {
images[i].addEventListener('click', showImageSrc);
}
}
function showImageSrc(e) {
alert(e.target.src);
}
</script>
</head>
<body onload="init()">
<img src="http://placekitten.com/300/300">
</body>
</html>

Categories