I want to change background image pattern on page refresh. i have tried many codes but not working as i required
Question
Here is my complete code i want to change image on page refresh. here is the code that i am using but its not working.
<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array()
theImages[0] = 'images/1.png'
theImages[1] = 'images/2.png'
theImages[2] = 'images/3.png'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
if(whichImage==0){
document.write('<a href ="link.html">
<img src="'+theImages[whichImage]+'"');
}
else if(whichImage==1){
document.write('<a href ="link.html">
<img src="'+theImages[whichImage]+'"');
}
else if(whichImage==2){
document.write('<a href ="link.html">
<img src="'+theImages[whichImage]+'"');
}
else if(whichImage==3){
document.write('<a href ="link.html">
<img src="'+theImages[whichImage]+'"');
}
else if(whichImage==4){
document.write('<a href ="link.html">
<img src="'+theImages[whichImage]+'"');
}
}
</SCRIPT>
..here is my html code where i want to change that images. where i have called script function.
<div class="under_header" style="height:600px;margin-top:0px; background:url(<script>showImage();</script>) , url(images/latest_movie/<?php echo $movie_image; ?>) center 76px fixed no-repeat; -moz-background-size:auto, over; background-size:auto, cover;
box-shadow: inset 945px 0px 645px -645px black, inset -945px 0px 645px -645px black;">
</div>
3 answers
solution1
3 2015-11-24 12:49:19
You can't put a script tag inside a style attribute's CSS string.
Try something like this in the JavaScript, not in the CSS:
document.getElementsByClassName("under_header")[0].style.background = "url("+showImage()+") , url(images/latest_movie/<?php echo $movie_image; ?>) center 76px fixed no-repeat";
solution2
1 2015-11-24 13:12:39
Don't know if you already solved your problem, but as Jacques said your way of calling the script won't work.
checking the value of "whichImage" is unnecessary, you could do something like this:
function showImage() {
$('.under_header').append('<a href ="link.html"><img src="' + theImages[whichImage] + '"></a>');
}
Here is a fiddle, people loves fiddles. https://jsfiddle.net/Sprazer/va9j5sb0/
I am sorry for using jQuery
solution3
1 2015-11-25 13:21:36
The way you try to combine javascript and css will not work. The example below randomly sets a background image to the target div.
The function showImage is called on the onload event. So, every time you refresh the page, that div will have a different background image.
Use this example to build whatever functionality you want on page refresh.
<html>
<head>
<script language="JavaScript">
var theImages = new Array();
theImages[0] = 'images/1.jpg';
theImages[1] = 'images/2.jpg';
theImages[2] = 'images/3.jpg';
var p = theImages.length;
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.getElementById('myDiv').style.backgroundImage="url('" + theImages[whichImage] + "')";
}
</script>
</head>
<body onload="showImage()">
<div id="myDiv" style="width:300px; height: 200px;" />
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.