悬停时随机背景图像

发布于 2025-01-20 05:23:17 字数 635 浏览 1 评论 0原文

在我的主页网站上，我有 6 个图块，我想更改悬停效果的背景。我发现下面的 PHP 脚本，但有些东西无法正常工作

在我的 index.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
?>

我的 CSS 文件中，我使用下面的代码

 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;
 }

我错过了什么吗？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

宣告ˉ结束 2025-01-27 05:23:17

该 css 代码在 css 文件中不起作用。
因为里面有一些php代码。
所以如果你想运行它，你必须在php/html文件中使用css代码。
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>

所以你的index.php页面可能是这样的：

<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>

每当你刷新页面时，这段代码都会向你显示一个新的背景图像。
如果您想在每次悬停时显示新图像而不需要刷新页面，那么您必须使用 javascript 代码或 javascript + ajax（用于实时获取新图像）。

已编辑：

为此目的，首先构建一个名为 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;

，然后创建 index.php 文件：

<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 class="my-element" style="width:100px; height:100px;">this is my fav element!</div>

您必须将 [path-to-php-folder] 更改为关联 rmdimage.php 文件。< /p>
在 rndimage.php 文件中，您可以动态调节图像数组 ($bg)

您可以从 mysql 或文件夹中获取它们，...

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 class="my-element" style="width:100px; height:100px;">this is my fav element!</div>