Random background image on hover-CodePudding

On my main page website, I have 6 tiles and I would like to change the background on the hover effect. I found PHP script below but something is not working properly

In my index.php file below tag, U put below code

  <?php
  $bg = array('nasa1-400.jpg', 'nasa1-1200.jpg', 'nasa1-640.jpg'); // array of filenames
  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

and in my CSS file, I use the below code

 div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
  background: url(images/bg/<?php echo $selectedBg; ?>) no-repeat;
 }

Do I miss something?

CodePudding user response：

That css code does not work in css file. because there is some php code in there. so if you want to run it, you must use css code in the php/html file. example.php:

<html>
<head>
...
 <style>
 div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
  background: url(images/bg/<?php echo $selectedBg; ?>) no-repeat;
 }
</style>
</head>
<body>

so your index.php page could be like this:

<html>
<head>
<?php
  $bg = array('nasa1-400.jpg', 'nasa1-1200.jpg', 'nasa1-640.jpg'); // array of filenames
  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
 <style>
 div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
  background: url(images/bg/<?php echo $selectedBg; ?>) no-repeat;
 }
</style>
</head>
<body>

This code will show you a new background image whenever you refresh the page. If you want to show a new image in every hover without needing to refresh the page, so you have to either use javascript code or javascript ajax(for fetch new images as live).

EDITED:

for that purpose first build a page named rmdimage.php

<?php
  $bg = array('nasa1-400.jpg', 'nasa1-1200.jpg', 'nasa1-640.jpg'); // array of filenames
  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
  echo $selectedBg;

and you index.php file:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
 $("div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1)").hover(function(){
  $.get("[path-to-php-folder]/rmdimage.php", function(data, status){
  $("div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1)").css('background', 'url(images/bg/'   data  ') no-repeat;');
    
    //alert("Data: "   data   "\nStatus: "   status);
  });
 });
</script>
 
</head>
<body>
 <div  style="width:100px; height:100px;">this is my fav element!</div>

you must change [path-to-php-folder] to relation rmdimage.php file.
in the rndimage.php file you can dynamically moderate image array ($bg)

you can fetch them from mysql or a folder , ...