Случайная картинка через CSS [Версия для КПК]

oIo_DeN_oIo

07-07-2009, 13:30

Как сделать так чтоб картинка каждый раз загружалась в случайном порядке из указанной папки.
Шаблон от DLE, картинка прописывается из css.

#header
{
width:100%;
height:220px;
background: url(../images/header.jpg) no-repeat top left;
}

хочу сделать несколько рисунков header.jpg и чтобы они в случайном порядке загружались. Как это сделать?
спасибо.

proxy

07-07-2009, 16:09

может быть css на это и способен, но я о таком не слышал - даже интересно... :)
а вот с помощью php (при генерации старницы) или с помощью javaScript (при загрузке страницы) - это легко.
если надумаюшь, могу и примеры накинуть...

oIo_DeN_oIo

07-07-2009, 18:16

готов выслушать примеры на яве и php

Но так же кто знает как это сделать через css отпишитесь.

proxy

08-07-2009, 02:41

сааамый банальный пример:

<?
function get_rnd_image(){
$images[] = array('link' => 'images/image0.gif', 'width' => 200, 'height' => 100, 'desc' => 'image 0');
$images[] = array('link' => 'images/image1.gif', 'width' => 100, 'height' => 150, 'desc' => 'image 1');
$images[] = array('link' => 'images/image2.gif', 'width' => 150, 'height' => 200, 'desc' => 'image 2');

$i = rand(0, 2);

echo '<img border="1" id="rnd_image" src="'.$images[$i]['link'].'" width="'.$images[$i]['width'].'" height="'.$images[$i]['height'].'" alt="'.$images[$i]['desc'].'" />'."\n".
' link: '.$images[$i]['link'].', width: '.$images[$i]['width'].', height: '.$images[$i]['height'].', desc: '.$images[$i]['desc']."\n";
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
</head>
<body>
<div id="root_wrapper">
 
 Вывод случайной картинки с помощью PHP:
 <? get_rnd_image(); ?>

 
 Вывод случайной картинки с помощью JavaScript:
 
<script type="text/javascript">
function rand(min, max){ return Math.floor(Math.random() * (max - min + 1)) + min; }

var images = [
{'link':'images/image0.gif', 'width':200, 'height':100, 'desc':'image 0'},
{'link':'images/image1.gif', 'width':100, 'height':150, 'desc':'image 1'},
{'link':'images/image2.gif', 'width':150, 'height':200, 'desc':'image 2'},
];

var i = rand(0, 2);

document.write('<img border="1" src="'+images[i]['link']+'" width="'+images[i]['width']+'" height="'+images[i]['height']+'" alt="'+images[i]['desc']+'" />\n');
document.write(' link: '+images[i]['link']+', width: '+images[i]['width']+', height: '+images[i]['height']+', desc: '+images[i]['desc']+'\n');
</script>

 Page content
 Это простой пример, реализация может быть любой и очень разной.
 Если происходит генерация страницы с помощью PHP, то JS бесмысленно использовать.
 Но все зависит от задачи, например вариант:
 С помощью PHP выбрать случайную картинку, вывести её на страницу,
 вывести на старинцу JS код, который в последствии, после загрузки страницы, будет менять картинку,
 в любом порядке с любым спецэффекотм.
</div>
</body>
</html>

Это простой пример, реализация может быть любой и очень разной.
Если происходит генерация страницы с помощью PHP, то JS бесмысленно использовать.
Но все зависит от задачи, например вариант:
С помощью PHP выбрать случайную картинку, вывести её на страницу,
вывести на старинцу JS код, который в последствии, после загрузки страницы, будет менять картинку,
в любом порядке с любым спецэффекотм.