HTML таблица со случайным фоном

Question

Как сделать случайный фон при загрузке HTML page?

У меня есть одна таблица на HTML-странице, и я использую эту строку HTML-кода для make background для Table.

<table background="image/1.jpg">

В Image folder У меня есть 5 изображений, и я хочу произвольно менять фон при каждой загрузке HTML-страницы.

Answer 1

Вот решение, использующее только Apache.Сценарии (на стороне клиента / сервера) вообще не требуются.

Для этого, однако, вы должны иметь возможность изменить конфигурацию Apache, чтобы разрешить перезапись URL-адресов и перезапись карт.Обратитесь к инструкциям для получения справки о том, как это сделать.

После того, как вы выполнили начальную настройку, все, что вам нужно сделать, это определить карту (images.txt) всех суффиксов изображений (1, 2, 3 ...).Затем вы настраиваете apache для получения URL /images/random.jpg и случайной замены его URL-адресами, такими как /images/image_1.jpg и /images/image_3.jpg.

. Строки ниже могут перейти на ваш httpd.conf, или вы можете поставить второйодна строка внутри .htaccess.

RewriteMap images rnd:/path/to/images.txt
RewriteRule ^/(.*)images/random.jpg /images/image_${images:dynamic}.jpg

Примечание: Определение RewriteMap нельзя использовать внутри .htaccess.Но вы можете использовать директиву RewriteRule как в .htaccess, так и в основной конфигурации.

Содержимое карты.Поместите images.txt в путь, определенный в директиве RewriteMap выше.

## images.txt

dynamic 1|2|3|4|5

Конечно, вам придется изменить свой HTML-код на:

<table background="/images/random.jpg">

Этот способподобрать такие случайные изображения очень просто по сравнению с решениями для сценариев.Единственный недостаток, который я вижу, - это возможность доступа к основной конфигурации Apache (httpd.conf, конфигурация виртуального хоста) для размещения там определения карты.Многие компании, предоставляющие общий хостинг, накладывают ограничения на это.Если вы можете преодолеть это препятствие, это действительно прогулка по пирогу.

Answer 2

создайте массив изображений и установите для него функцию загрузки страницы, см. пример

Answer 3

Как указал adarshr в своем комментарии, возможно, будет легче иметь дело с ним на стороне сервера.

Тем не менее, если вы хотите сделать это на стороне клиента, вы можете попробовать этот видjavascript:

window.onload=function(){  
   var thediv=document.getElementById("yourid");  
   var imgarray = new Array("imageone.gif", "imagetwo.gif", imagethree.gif");  
   var spot =Math.floor(Math.random()* imgarry.length);  
   thediv.style.background="url("+imgarray[spot]+")";  
}  

Вот другой пример из сообщения в блоге

Answer 4

Вы можете использовать JavaScript. Используйте функцию Math.random () и сделайте так, чтобы она возвращала число от 1 до 5. Затем просто измените фон таблицы на число, которое дала вам функция. Я не знаю, как ты должен делать это в HTML.

Надеюсь, это поможет вам. Приветствия.

Answer 5

Вот некоторые jQuery плагины:

• Случайное изображение jQuery Plugin
• Простой jQuery Image Rotator

Answer 6

Вы можете использовать PHP:

$images = array();

if ($dir = opendir("your/image/folder"))
{
    while (false !== ($file = readdir($dir)))
    {
        if (preg_match('~(png)|(gif)|(jpg)|(jpeg)|(bmp)~', $file) > 0) // Use this to filter just images you want
        {
            $images[] = $file;
        }
    }
}

echo '<table background="image/' . $images[mt_rand(0, (count($images) - 1))] . '">';