I'm trying to put a string and a number together so a variable is in an image link, and so the variable formed by the string and number's value would display in the link, but instead the raw name just displays, not the variable's value.
var link1 = 'restOfLink.gif';
var myFunction = function(number){
var imgLink = 'http://i60.tinypic.com/';
var randomNumber = Math.floor((Math.random()*5)+1);
$("div").append("<img src = '"+imgLink+'link'+randomNumber+"'/>");
}
randomNumber won't always be 1 but let's just assume it is.
The link shows up as http://i60.tinypic.com/link1.gif
Any help on that? I'm trying to make an app that displays a new random image when a div is clicked. (the code above isn't all of the code, but it's enough to cover my problem)
If you wanted to create a dynamic img element with a variable as the link or part of it you could do:
//These are just example variables, you can use your own the same way.
var imgPath = '/images/blog/';
var size = '200x450';
document.createElement('img').src = imgPath + 'yourImage' + size + '.png';
JsFiddle Demo.
For your example i would suggest creating an array of links that you can access using a random number, for example:
var links = ['restOfLink.gif', 'anotherexample.png', 'yetanother.jpg'];
To select a particular image from inside the links array you need to pass it the index it occurs at, with 0 being the first.
So for example:
links[0] --> "restOfLink.gif"
links[1] --> "anotherexample.png"
links[2] --> "yetanother.jpg"
See this JsFiddle demo using this method.
You should create the link string by concatenating the different parts in Javascript, and update the img src attribute afterwards. Something like:
var bar = 3;
var linkString = "http://www.foo.com/image_number_" + bar + ".jpg";
document.getElementById("yourImgId").src = linkString;
Best.
Dont know what you want. A JSFiddle would help as suggested but here is my try at a answer:
string = "lol";
number = 1;
source = string+number;
$(".element").attr('src', source+".jpg");
You need JQuery for this though.
Related
I want to set more than 1 url variable in JavaScript.
I am preparing a map, where only 1 url has been linied. I want to have more than 1.
I tried to use code like this:
var url = 'Peterborough.json';
var url = 'test.json';
but unfortunately only 2nd one is working. First one looks like switched off.
Does anyone knows how to place more than 1 url in the 1 line, to make them both working?
Thanks
A variable can have only one value at a certain time, what about using an array instead:
var url = ['Peterborough.json', 'text.json'];
console.log(url[0]); // => 'Peterborough.json'
console.log(url[1]); // => 'text.json'
You cannot declare two variables with the same name. You have two options here:
1- Simply renaming one of your variables, e.g.:
var url = 'Peterborough.json';
var url2 = 'test.json';
2- Use an array:
var urls = ["Peterborough.json", "test.json"];
//here urls[0] will be "Peterborough.json" (the first element of the array)
//and urls[1] will be "test.json" (the second element of the array)
You can do this:
var url0 = 'Peterborough.json';
var url1 = 'test.json';
console.log(url0);
console.log(url1);
I hoped it helped!
How do i link all this images to an array, so as this links can work when i click each image slide
jQuery(document).ready(function() {
var bgImageArray = ["banner1.jpg", "banner2.jpg", "banner3.jpg"],
var links = ['http://google.com', 'http://hotmail.com', 'http://yahoo.com', 'http://kimjoyfox.com'],
base = window.location.origin + "/wp-content/themes/fbnquest/img/home/",
secs = 4;
bgImageArray.forEach(function(img){
new Image().src = base + img;
// caches images, avoiding white flash between background replacements
});
The way I understand your problem is the following :
For each time you click on one of each of the images, you want to redirect the user to one of the URLs, changing the URL each time the user click on the image.
Is it what you want ? If not, please can you precise your problem
[EDIT]
So yes,
Here is my way of solving your problem, If you don't matter, I won't give you code, obviously, you do this for training, let's do it :
Create an eventListener on click that will trigger a function called ChangeImageUrl (for example) and assign that eventListener to all the img elements
Then create a function that will detect the current URL of the image clicked, using imgElement.src ( i advice you to devide the src string using split or equivalent, that way you can directly access by index the current url )
Once you have the URL Use yourUrlArray.indexOf(currentImageSrcUrl), to catch the index of the current URL in your array, store it and increment it ( bonus if the increment value is upper than the URL array length, set it to 0 )
access the new src using yourUrlArray[newindex]
assign current img element the new src that we juste have extracted
Tell me if this answer is good for you, I hope it will
I was trying to understand what do you really want and I did something that I hope help you.
Inside of the loop you can do in this way below.
var i = new Image();
i.src = base + img;
I have a HTML String, called tinymceToHTML in my example and I had the problem that when I download this html String the images sources or hrefs were set wrongly.
My image sources looked like "/file/:id" in the original String, if I convert it into a DOM object and output the source it looks like "http://localhost:3000/file:id" which is the desired output, because then the external document can load this file. So I came up with this solution.
var div = document.createElement('div');
div.innerHTML = tinymceToHTML;
var images = div.getElementsByTagName('img');
for(var i = 0; i < images.length; i++) {
images[i].src = images[i].src;
}
var a = div.getElementsByTagName('a');
for(var i = 0; i < a.length; i++) {
a[i].href = a[i].href;
}
tinymceToHTML = "<html><head></head><body>" + div.innerHTML +
"</body></html>";
My problem is that I don't know why assigning the variable to itself makes a difference in that scenario: images[i].src = images[i].src or a[i].href = a[i].href.
If I let the program show me the output with an alarm Box it tells me the URL I want, but without that assignment the program doesn't do what it should.
I hope that anybody can explain me that effect, in order to change maybe the code to make it more clear that this line is required.
I also created a fiddle example that makes it easier to show what I mean, comment out the line with the assignment, to see the other result
https://jsfiddle.net/1vabgubh/5/
The full URL of an image is just what imageElement.src returns, by definition. From MDN:
HTMLImageElement.src Is a DOMString that reflects the src HTML
attribute, containing the full URL of the image including base URI.
If that's how you need them to come out in your final string, then images[i].src = images[i].src seems a reasonable and succinct way of doing it. I would just add a comment to aid understanding, something like
images[i].src = images[i].src; // force the src to be the full URI
I've tried searching for several hours but cannot find an answer that works. I want to load a different image for each day of the year.
I have some js that creates a variable based on the date function. I concatenate this with other text strings to get this variable:
photo2load = http://www.example.com/photos/pic132.jpg
How do I then get this photo to load. What is the scripting required? I'm at a total loss.
Thanks in advance.
You need to add an id attribute to your image and then onload call a function with inside something like this:
function loadMyImage(){
var img = document.getElementById("id-of-image");
img.src = photo2Load;
}
Or if you want to pass directly your variable call the function like this
loadMyImage( photo2Load);
function loadMyImage(imgUrl){
var img = document.getElementById("id-of-image");
img.src = imgUrl ;
}
I am trying to insert some new links using ‘innerHTML’. As there may be a number of calls on the same ‘ids’ I thought it would be wise to use variables. The following does not respond beyond the alert? The process works fine if I don’t use ‘var link’ and just enter it in full. Is there an issue perhaps trying to do this with xhtml?
Thanks.
var newlink = '<a title="new link" href="newlink.htm">New Link</a>';
var link = "document.getElementById('idlink')";
if( link ) {
alert("link confirmed");
link.innerHTML = newlink;
}
var link = "document.getElementById('idlink')";
should be
var link = document.getElementById('idlink');
You are assigning a string to the variable. Just because the contents of the string looks like code that could be run doesn't mean that it actually runs. It's just a string.
Call the method and assign the result to the variable:
var link = document.getElementById('idlink');