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>
Related
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 don't think I explained this properly, but I ended up answering my own question, basically I was looking remove the head code because it made the document look ugly and was very tedious everytime when it came to scrolling, I put the head javascript code into it's file and removed the code from index head section and it seems to be working just fine.
Thanks all for the help!
/close
/answered
Can anybody point towards an easier method to load random images on my index.html page?
This is the current method I'm using
In the head section:
// It currently goes to css/images/images/410.png, I have just put six here so it isn't long and annoying
<script type="text/javascript">
var imageURLs = [
"css/images/avatars/1.png"
, "css/images/avatars/2.jpg"
, "css/images/avatars/3.png"
, "css/images/avatars/4.png"
, "css/images/avatars/5.png"
, "css/images/avatars/6.png"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Oh no, the image is broken!\"/>';
return img;
}
</script>
In the body section:
<!-- RANDOM IMAGE 1 -->
<script type="text/javascript">
document.write(getImageTag());
</script>
<!-- RANDOM IMAGE 2 -->
<script type="text/javascript">
document.write(getImageTag());
</script>
I currently have 410 images altogether so you can image how annoying it is within the head section code
If your images are all named like that, this should work:
<script type="text/javascript">
var imagesCount = 410;
function getImageTag() {
var img = '<img src=\"css/images/avatars/';
var randomIndex = 1+Math.floor(Math.random() * imagesCount );
img += randomIndex;
img += '.png\" alt=\"Oh no, the image is broken!\"/>';
return img;
}
</script>
On my website index, I'm currently displaying 18 random images, here's the code I currently use to display these images:
Here's my website I want to implement this feature on:
http://www.freevatars.co.uk
HTML:
<script type="text/javascript">
document.write(getImageTag());
</script>
JS:
var imageURLs = [
"css/images/avatars/1.png"
, "css/images/avatars/2.jpg"
, "css/images/avatars/3.png"
, "css/images/avatars/4.png"
, "css/images/avatars/5.png"
, "css/images/avatars/6.png"
, "css/images/avatars/7.png"
, "css/images/avatars/8.jpg"
, "css/images/avatars/9.jpg"
, "css/images/avatars/10.png"
, "css/images/avatars/11.jpg"
, "css/images/avatars/12.jpg"
, "css/images/avatars/13.jpg"
, "css/images/avatars/14.png"
, "css/images/avatars/15.jpg"
, "css/images/avatars/16.png"
, "css/images/avatars/17.jpg"
, "css/images/avatars/18.jpg"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Oh no, the image is broken!\"/>';
return img;
}
// Images in JS code go up to 410, so I have only placed 18 here to shorten it.
I was hoping to achieve a download button or a like system on the hover, however, with the image being displayed randomly with JS, I'm not able to use the standard HTML ahref download code because I would need an absolute path to the image.
Does anybody know how I could achieve this and keep the random images?
Thanks in advance!
To start of, I would like to notify that I am pretty new to javascript, I hope you will bear with me.
I have this code that on mouse down it counts the beats per minute. What I would like to do is display a Heart Icon in the space of the division so that when someone clicks the heart it will display the BPM.
This is what I have now:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="tapDiv" style="height:200px;width:200px;background-color:#000;color:#FFF"></div>
<script>
lastTapSeconds = 0;
bpm = 0;
var tapDiv = document.getElementById("tapDiv");
function bpmCounter() {
var tapSeconds = new Date().getTime();
bpm = ((1 / ((tapSeconds - lastTapSeconds) / 1000)) * 60);
lastTapSeconds = tapSeconds;
tapDiv.innerHTML = "<h1>" + Math.floor(bpm) + "</h1>";
}
tapDiv.onmousedown = bpmCounter;
</script>
</body>
</html>
How do I implement a heart icon (image) so that it will display that and interact with the js?
I though perhaps I could enter a source in the division and direct to the heart.png in my directory so that it will display that and work with the tapDiv id. But I am not sure of this.
I hope I have given you enough info.
thanks
Mieer
The Simple Way:
Replace:
tapDiv.innerHTML = "<h1>" + Math.floor(bpm) + "</h1>";
with:
tapDiv.innerHTML = '<h1 style="display:inline">' + Math.floor(bpm) + '</h1><img src="/Images/heart.png"/>';
//specify your own source path for heart.png
this simply adds an image element to your dynamically created content and is probably the easiest to implement with your current code set:
Working Fiddle
Alternate Way:
You can use CSS to set an image by specifying a class, and this is the more preferred method: how to put an image in div with css
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);
}