悬停时来自文件夹的随机光标图像

Question

在一个简单的网页中，我试图在将鼠标悬停在我的元素上时获取随机光标图像。光标图像需要在 4 个 png 文件之间切换（为了简单起见，下面我使用了系统光标，这不是问题所在）。我希望每次用户将鼠标悬停在元素上时光标都会改变，而无需重新加载页面。
我在创建随机变化函数时遇到问题。我猜它需要是 javascript 或 php。我在这两个方面都不是很能干，而且在谷歌搜索解决方案方面也没有成功。有人有想法吗？

我试过使用作为基础，虽然这里你需要重新加载来改变光标，我希望光标在不重新加载的情况下改变。我已经将 javascript 放在脚本的头部，但它不起作用——但在 jsfiddle 中有效！！不知道为什么。由于重新加载问题，我不确定这与我需要的相差多远。
还尝试 使用 this php 片段作为基础，但根本没有用。再次不知道为什么。

这是我的代码，没有更改光标...我猜超级基本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
  <script>
  </script>

</head>

<body>


<div style="background: #ee1; width:300px; height:300px;cursor: help;">
  /* I'd like the cursor to change randomally every time the mouse returns to hover over the element. */
  /* change between ['help', 'wait', 'crosshair'] */
  
</div>

</body>
</html>

Answer 1

您可以执行以下操作：

function random(){
//images to be used
let images = ['https://data.whicdn.com/images/309487318/original.jpg?t=1521902468',
'https://data.whicdn.com/images/346786844/original.jpg','https://data.whicdn.com/images/346397546/original.jpg']

//getting component from DOM
let imgComponent = document.getElementById('myImg')
//getting random number from 0 to the length of the array
let randomNumber = Math.floor(Math.random()* images.length)
//assigning random image to DOM
imgComponent.src = images[randomNumber]


}

<img

style="height : 70px;" id="myImg">

<button onclick="random()"> random</button>

步骤：

制作要使用的图像数组
生成随机数来自零到数组的长度减一（将用作索引数组）
重新分配图像中的 src 属性

Answer 2

这是通过 JavaScript:

完成的

// The array for your cursors
var arrayOfCursors = ['help', 'wait', 'crosshair'];

// Selects the element
var el = document.getElementById('target');

//mouseover event
el.addEventListener("mouseover", function( event ) {
    // Changes the cursor to a random from cursors array
    el.style.cursor = arrayOfCursors[Math.floor(Math.random() * arrayOfCursors.length)];
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
  <script>
  </script>

</head>

<body>


<div id="target" style="background: #ee1; width:300px; height:300px;">
  /* The cursor changes randomally every time the mouse returns to hover over the element. */
  /* changes between ['help', 'wait', 'crosshair'] */
  
</div>

</body>
</html>

悬停时来自文件夹的随机光标图像

Random cursor image from folder on hover

javascript

php

html

random

cursor