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>
Related
At the moment I'm working with Elementor on Wordpress. What I'd like to do is have one of "modules" in Elementor filled with random images that also have each a different link to some page. I looked for a random image widget but those I found didn't provide a function to define a different link for each randomized image. So I decided to use the html widget on Elementor to use my own code. I'm not super skilled at this. So I have a code, the randomizing is working, so are the links but I don't know how to define a max. width for the images because they just fill the whole page with this code. My english isn't very good I hope someone might be able to help me and where to put something in the code to define the images size?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var imageUrls = [
"IMAGE1“
, "IMAGE2“
, "IMAGE3“
];
var imageLinks = [
"LINK1“
, "LINK2“
, "LINK3“
];
function getImageHtmlCode() {
var dataIndex = Math.floor(Math.random() * imageUrls.length);
var img = '<a href=\"' + imageLinks[dataIndex] + '"><img src="';
img += imageUrls[dataIndex];
img += '\" alt=\"\"/></a>';
return img;
}
</script>
</head>
<script type="text/javascript">
document.write(getImageHtmlCode());
</script>
</body>
Psuedo Code:
if currentCondition is snow {
aFunction()
} else {
// something else
}
function aFunction {
look inside the snow folder at /images/condition/snow
chose random jpeg/jpg from that folder
use JQuery to set the css background-image property of a div
}
How would I make the above in JavaScript? I can accomplish everything except choosing the random picture inside the snow folder. Thanks.
EDIT: The files are incrementing (file_1.jpg, file_2.jpg, etc.)
Here's how to pick a random image, provided the number of images is set:
var totalBGs = 15;
var rnd = Math.floor(Math.random() * totalBGs) + 1; // 1 - 15
Next you need to set that as CSS background (jQuery):
$(document).ready(function () {
$("#some_element").css({ backgroundImage: "url(path/to/img/file_" + rnd + ".jpg)" });
});
This example shows you that, if you have image in 'images/' directory with all the images named as image_0.jpg, image_1.jpg, image_2.jpg incrementing ...
change the image file name structure according to your requirement. (Javascript directly cannot search file in server directory, as this might be helpful)
<img src="" align="middle" border="0" name="RandomImg" >
<script language="JavaScript">
// Genarate random value from 0-5, change 6 to any number you want
var rand_no = Math.floor(6*Math.random());
// This defines the source of the preview image (For example images/image_0.jpg)
document.images['RandomImg'].src="images/image_" + rand_no + ".jpg";
</script>
I used this Pinterest button on my blog
<li><a class='pinterest share-tooltip share-tooltip-top' data-share-tooltip='Share on Pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
as you can see I'm using data:post.firstImageUrl as the source of the image ... but the problem is i made my fist image doesn't show in a full size only a thumbnail (medium size) ... so when i used this data:post.firstImageUrl ... the image that being shared only a thumbnail not the real one
here is the sample of thumbnail URL which i got from data:post.firstImageUrl
https://3.bp.blogspot.com/-W-g2qYS-Kh0/V5gs0FvhpKI/AAAAAAAAFSY/yh_3p00aSA4-fRa65NH4cQ83iEngZhDeACLcB/s640/BMW-M5-30-Jahre-2014-1.jpg
and here is the full size image URL that i want
https://3.bp.blogspot.com/-W-g2qYS-Kh0/V5gs0FvhpKI/AAAAAAAAFSY/yh_3p00aSA4-fRa65NH4cQ83iEngZhDeACLcB/s1600/BMW-M5-30-Jahre-2014-1.jpg
as you can see the different only come to this part xxx://xxx/xxx/s640/xxx and xxx://xxx/xxx/s1600/xxx ...
my question is how do i change this URL part s640 into this s1600 and how to assign it into my pinterest button ?
i had been seen someone using a JavaScript to change this URL part /s640/, he used it for auto resize thumbnail, I'm not familiar with JavaScript so I'm not really understand it, here is the code
img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" alt="'+post_title+'"/
You can use script from this pastie. But it need a bit change.
<script type='text/javascript'>
//<![CDATA[
function thumbnail_resize(image_url) {
var image_size = 1600;
image_tag = image_url.replace('/s640/','/s' + image_size + '/');
if(image_url != "") {
return image_tag;
} else {
return "";
}
}
//]]>
</script>
Here we replaced the URL of image.
<script type='text/javascript'>document.write('<a class="pinterest share-tooltip share-tooltip-top" data-share-tooltip="Share on Pinterest" href="http://pinterest.com/pin/create/button/?url=<data:post.url/>&media=' + thumbnail_resize("<data:post.firstImageUrl/>") + '&description=<data:post.title/>">PING</a>');</script>
And here we pasted the link via JavaScript.
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.
this is my first question here so excuse me if I did anything wrong.
I'm doing the layout of a website and I want the header to change colors randomly when the user refresh the page. I already did some research and got these javascript codes:
<script type="text/javascript">
var randnum = Math.random();
var inum = 2;
var rand1 = Math.round(randnum * (inum-1)) + 1;
var colors = new Array;
colors[1] = "#385c78";
colors[2] ="#9d302f";
var color = colors[rand1]
document.getElementById('navbar').style.backgroundColor = image;
</script>
This one goes inside the head tag. It picks a random hexadecimal code between the two ones I want and store it on the var color.
The second one I'm using goes on the body.
<script type="text/javascript">
//writes "<div id="header" style="background-color:#something">"
document.write('<div id="header" style="background-color:' + color + '">')
</script>
<!-- continuation of div id="navbar" -->
*Header code here*
</div>
The problem is that this way of doing it is giving me some troubles, since the div id="header" is written inside javascript. I can't wrap other divs properly and Google Chrome's inspect element tells me that the body size is 1333px x 80px (as it can be seen here http://puu.sh/2yjKi), exactly and only the header size, and it doesn't wraps the rest of the website content.
So my question is: Is there any way to improve that code? Make the background color of that div change via javascript or something like that?
I thank you all in advance for reading and appreciate your help.
Though the post is little old but my answer may help others who would land here just like me!!
DEMO
HTML:
<div style="height:150px">
<div>
<h1><center>That's how i change color!!</center></h1>
</div>
<br><br>
<div class="bordered" id="fancy">
<center>I behave like a chameleon!!</center>
</div>
</div>
JS:
setInterval(function () {
document.getElementById("fancy").style.background= '#'+Math.floor(Math.random()*16777215).toString(16);
document.body.style.background= '#'+Math.floor(Math.random()*16777215).toString(16);
}, 1000);
Hope this would help someone!!
Output your header as normal HTML, and then use JavaScript to update the color onDomReady. Something about like this:
$(document).ready(function() {
var colors = ["#385c78", "#9d302f"],
selectedColor = colors[Math.floor(Math.random()*colors.length)]
header = $("div#header");
header.css("background-color", selectedColor);
});
http://jsfiddle.net/ryanbrill/GD3qB/
function changecolor() {
var colors = ["#B40404", "#0000FF", "#FE2E9A", "#FF0080", "#2EFE2E", ];
var rand = Math.floor(Math.random() * colors.length);
$('#controls-wrapper').css("background-color", colors[rand]);
setTimeout('changecolor()', 1000);
}