I want to change the image and anchor link on refresh for my banners. I have 4 different banner images and 4 different links for each banner. So I need when user refresh the page each banner will load with own URL.
HTML code :
<div class="ad_body">
<a href="http://www.domain.com/" target="_blank">
<img src="images/banner/partner1.jpg">
</a>
</div>
Thanks for any help.
You could add images sources you have in array then choose from this array randomly :
$(function(){
var links = ["link1", "link2", "link3"];
var arr = ["partner1.jpg", "partner2.jpg", "partner3.jpg"];
var random = Math.floor(Math.random() * arr.length) + 0;
$(".ad_body a").attr("href", links[random]);
$(".ad_body img").attr("src", "images/banner/"+arr[random]);
});
Hope this helps.
Related
i have this code and want to know how to add website links to the images, once the random image is generated i want the image can be clicked to go to a predetermined list of websites, it's a really beginner question since i don't really understand javascript functions.
Thank you.
<html>
<head>
<script type="text/javascript">
//preload the six images first
var face0=new Image()
face0.src="d1.gif"
var face1=new Image()
face1.src="d2.gif"
var face2=new Image()
face2.src="d3.gif"
var face3=new Image()
face3.src="d4.gif"
var face4=new Image()
face4.src="d5.gif"
var face5=new Image()
face5.src="d6.gif"
</script>
</head>
<body>
<img src="d1.gif" name="mydice">
<form>
<input type="button" value="Throw dice!" onClick="throwdice()">
</form>
<script>
function throwdice(){
//create a random integer between 0 and 5
var randomdice=Math.round(Math.random()*5)
document.images["mydice"].src=eval("face"+randomdice+".src")
}
</script>
</body>
</html>
You don't need to use the (dangerous) eval() function nor do you need to pre-load the images for this.
Just place all your image links (d1.gif, d2.gif, etc) in an array and similarly, place all the links you want the images to respectively link to in another array.
In your HTML, wrap the <img> element in an anchor tag <a> and now you can just update the anchor tag's href value as well as the img src value whenever the button is clicked.
Also, you don't need a form for the button. Just create the button as a separate element and add the click event listener to that button.
Check and run the following Code Snippet for a practical example of the above approach:
//get the anchor tag that has the image and the button
const image = document.querySelector('a');
const btn = document.querySelector('#btn');
//assign the src links and href links to arrays
const links = ["someLink1", "someLink2","someLink3","someLink4","someLink5","someLink6"]
const images = ["d1.gif","d2.gif","d3.gif","d4.gif","d5.gif","d6.gif"]
//update the src link and href link
function throwdice(){
const randomIndex = Math.round(Math.random()*5);
image.href= links[randomIndex];
image.firstChild.src= images[randomIndex];
}
//run the function when the button is clicked
btn.addEventListener('click', throwdice)
<h3>Right-click the image and inspect it to see the anchor tag link and the img src link change whenever the button is clicked</h3>
<img src="d1.gif" name="mydice">
<button id="btn">Throw dice!</button>
Here is how you can make it with JavaScript
function getRandom(){
var RandomNumber1 = Math.floor(Math.random() * 6) + 1;
var link =["Link1","Link2","Link3","Link4","Link5","Link6"]
var resultDiv = document.getElementById('result');
resultDiv.innerHTML = '<img src="dice' + RandomNumber1 + '.png">';
}
<input type="button" value="Throw Dices" onClick="getRandom()">
<div id="result">
<img src="d1.gif" name="mydice">
</div>
I am trying to make it so that clicking each randomize images will link to the respective url that it belongs to, i.e. clicking on facebook image will go to facebook.com, and clicking on twitter will go to twitter.com
Currently my code here is:
<p id="background" style="width:12%;height:23%"></p>
<script type="text/javascript">
function randomImage() {
var fileNames = [
"image1.png",
"image2.jpg",
"image3.png"
];
var randomIndex = Math.floor(Math.random() * fileNames.length);
document.getElementById('background').style.background = 'url(' +
fileNames[randomIndex] + ')';
}
randomImage();
setInterval(randomImage, 2000);
</script>
I've tried adding in various other methods to add the url, however my image will always disappear after adding. Thank you for looking at this post.
it is not displaying because you set height of image in a percent, below is the working example:
<div style="height: 100vh;"><p id="background"style="width:12%;height:23%" ></p></div>
I have this photo switcher below that I want to modify the HTML content using jQuery only. If you click on the "Show Next Photo" link jQuery will replace the "fruits.png" with another image example "airplane.png". (note: No changes to the HTML block is allowed).
I'm not sure how complicated it can be for jQuery. If I could avoid JavaScript, would be perfect.
<!--Do Not Change Inside this DIV-->
<div id="imageSwitcher">
<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" id="fruits" />
<img src="https://homepages.cae.wisc.edu/~ece533/images/tulips.png" id="tulips" style="display:none;" />
<p>Show Next Photo</p>
</div>
Problem:
This is my script below and isn't working properly because when I refresh the page it just shows the airplane.png, and if I click on the link "Show Next Photo" it makes the airplane disapear.
Please give it a try at https://codepen.io/mrborges/pen/QQjJOq
<script>
//Go away fruits.png
document.getElementById('fruits').style.cssText = "display:none;";
$(document).ready(function () {
$('p').click(function () {
$('#imageSwitcher img').attr("src", "https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
//$('#fruits').toggle("hide");
$('#tulips').toggle("slow");
})
});
</script>
<script>
$(document).ready(function () {
let count = localStorage.getItem('count') || 0; // "0, 1, 2" or 0
count = parseInt(count, 10); //If we get it from storage then convert to number
const images = [
"https://homepages.cae.wisc.edu/~ece533/images/fruits.png",
"https://homepages.cae.wisc.edu/~ece533/images/tulips.png",
"https://homepages.cae.wisc.edu/~ece533/images/airplane.png"
];
$('#fruits').attr("src", images[count]);
$('p').click(function () {
count = (count + 1) % images.length;
$('#fruits').attr("src", images[count]);
localStorage.setItem('count', count);
});
});
</script>
The const images is a list (array) of links to the switch between. I added all the possible images and then i just change the src for each image. a pure jQuery solution would be very ugly, so you have to accept some vanilla JavaScript.
this line count = (count + 1) % images.length counts 1 up each time you click on the <p> if we reach the end of the images, then it just resets to 0. e.g. (2 + 1) % 3 = 0
I have 5 image links that will display another image within that same id when clicked to an active page. So far I got the all images to change to one image, but I want them to revert back to the original image when another image link is clicked. I understand I can do this using HTML and CSS, but I'd like to know how to use JavaScript for this feature.
Here is the HTML:
<img src="images/tn_wolverine.jpg" id="imgBox1">
<img src="images/tn_wolverine.jpg" id="imgBox2">
Here is the JavaScript:
function changeImg(ID) {
var obj = document.getElementById("imgBox"+ID).src="images/tn_wolverine2.jpg";
}
You need to use a flag to record the index of the lastest clicked image. Use this index to revert the image back to the original picture when user click another image. And then replace the prev index flag with the new one.
I wrote a simple "poker" example: Live DEMO
HTML
<a href="#">
<img class="poker" src="http://pic1a.nipic.com/2009-03-03/200933143727699_2.jpg"/>
</a>
<a href="#">
<img class="poker" src="http://pic1a.nipic.com/2009-03-03/200933143727699_2.jpg"/>
</a>
JavaScript
(function(){
var pokers = document.getElementsByClassName("poker"),len=pokers.length,imgs=["http://pica.nipic.com/2007-10-16/20071016115825247_2.jpg","http://img.teapic.com/thumbs/201210/23/141801plfndrdzabzjdaok.jpg.middle.jpg"];
var defaultImg = "http://pic1a.nipic.com/2009-03-03/200933143727699_2.jpg";
var prevIndex = -1;
for(var i=0;i<len;i++){
pokers[i].addEventListener("click",(function(index){
return function(){
//no action if user clicked the same poker
if(prevIndex===index) return;
if(prevIndex!==-1)pokers[prevIndex].src=defaultImg;
prevIndex = index;
this.src=imgs[index];
};
})(i));
};
})();
I want add images to my lightbox gallery using javascript links.
for example, I tried,
<script>
imageArray =[
"image1.jpg",
"image2.jpg",
"image3.jpg"
];
function assignUrl(img_num)
{
return "www.website/images/" + imageArray[img_num];
}
</script>
And in my gallery, I used,
<a href="javascript:document.location.href=assignUrl(0);"
data-lightbox="imagegallery" >
<img src="javascript:document.location.href=assignUrl(0);" <!-- thumbnail-->
</a>
But it doesn't work.. The thumbnail doesn't show, and when u click, the image keeps loading but nothing happens.
When I use a test link like this, It displays the image.
TEST
Please help? what am I doing wrong? Is there any other workaround this?
I wrote an example function to dynamically create and append a and img elements based on the imageArray variable. Then activated the plugin by calling lightbox function.
I didnt want to touch your code as much as possible.
Here how it looks:
<script>
imageArray =[
"image1.jpg",
"image2.jpg",
"image3.jpg"
];
function assignUrl(img_num)
{
return "www.website/images/" + imageArray[img_num];
}
$(function() {
for (var i = 0; i < imageArray.length; i++){
var div = $("<a/>").attr("href",assignUrl(i)).attr("data-lightbox","imageGallery");
div.append($("<img/>").attr("src",assignUrl(i)).attr("width","20%").attr("height","20%"));
console.log($);
$("body").append(div);
}
$('a[rel="lightbox"]').lightBox();
});
</script>
Fiddle : http://jsfiddle.net/nilgundag/jTDk9/7/