Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)
-   -   Случайная картинка через CSS (http://forum.oszone.net/showthread.php?t=144420)

oIo_DeN_oIo 07-07-2009 13:30 1161002

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

Код:

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

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

proxy 07-07-2009 16:09 1161136

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

oIo_DeN_oIo 07-07-2009 18:16 1161266

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

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

proxy 08-07-2009 02:41 1161657

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

читать дальше »


Код:


<?
        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".
                '<br><b>link:</b> '.$images[$i]['link'].', <b>width:</b> '.$images[$i]['width'].', <b>height:</b> '.$images[$i]['height'].', <b>desc:</b> '.$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">
        <br><br>
        <br>Вывод случайной картинки с помощью PHP:
        <br><? get_rnd_image(); ?>
       
        <br><br>
        <br>Вывод случайной картинки с помощью javascript:
        <br>
        <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('<br><b>link:</b> '+images[i]['link']+', <b>width:</b> '+images[i]['width']+', <b>height:</b> '+images[i]['height']+', <b>desc:</b> '+images[i]['desc']+'\n');
        </script>
       
        <br><br>Page content
        <br><br>Это простой пример, реализация может быть любой и очень разной.
        <br>Если происходит генерация страницы с помощью PHP, то JS бесмысленно использовать.
        <br>Но все зависит от задачи, например вариант:
        <br>С помощью PHP выбрать случайную картинку, вывести её на страницу,
        <br>вывести на старинцу JS код, который в последствии, после загрузки страницы, будет менять картинку,
        <br>в любом порядке с любым спецэффекотм.
</div>
</body>
</html>



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


Время: 07:52.

Время: 07:52.
© OSzone.net 2001-