• Страница 1 из 1
  • 1
Страничка 404
3DJER Оффлайн
Проверенный
3
Дата: Суббота, 2015-05-16, 18:25 | Сообщение # 1
В общем скачал шаблончик странички 404 - Клик и в голову как всегда пришла умственно-отсталая идея. Она заключается в том, что после каждой перезагрузки 404 странички, картинка котика менялась на другую (Не обязательно должно открывать котика, котик взят для примера), без повторений (То есть "картинка1" не идет после "картинка1"). Скрипт как делать - нашел, но я с детства дурачок, не умею воплощать идеи. Кому станет интересно сделать эту штуковину, буду очень благодарен.
Код 404 с котиком:


Код скрипта который нашел (Ну малоли):


Скрипт назовем "random.js"
<script type="text/javascript" src="random.js"></script>




Сообщение отредактировал 3DJER - Суббота, 2015-05-16, 18:36
Профиль
waak Оффлайн
Проверенный
41
Дата: Суббота, 2015-05-16, 22:15 | Сообщение # 2
Здравствуйте! я конечно же не силён в скриптах но по мойму ваш код не подойдет так как в данной ситуации вам нужно менять фон страницы

Вот мой вариант

Стили

<style>
.style-0{
background: url("../404/404.png");
}
.style-1{
background: url("..Тут ссылка на картинку 1");
}
.style-2{
background: url("..Тут ссылка на картинку 2");
}
.style-3{
background: url("..Тут ссылка на картинку 3");
}
.style-4{
background: url("..Тут ссылка на картинку 4");
}

</style>

В место "Тут ссылка на картинку" пропишите ссылки на ваши картинки

Вот скрипт который будет менять

<script>
document.body.className = 'style-' + parseInt(Math.random() * 10);
</script>

Данный скрипт меняет background у body при обновлении страницы

Добавлено (16.05.2015, 22:15)
---------------------------------------------
3DJER, Вы можете переписать код страницы и указать картинку в html и после использовать свой код для достижения результата

Ка установить мой вариант?

Откройте код страницы 404 в блокноте или в любом другом редакторе

После чего вставьте данный код после <body>

<style>
.style-0{background: url("../404/404.png"); }
.style-1{background: url("..Тут ссылка на картинку 1"); }
.style-2{background: url("..Тут ссылка на картинку 2"); }
.style-3{background: url("..Тут ссылка на картинку 3"); }
.style-4{background: url("..Тут ссылка на картинку 4"); }
</style>

А этот перед </head>

<script>
document.body.className = 'style-' + parseInt(Math.random() * 5);
</script>

на этом всё сохраняем изменения и загружаеи на сайт

так же если вы захотите увеличить список картинок просто добавьте в верхний код вот такую строчку

.style-4{background: url("..Тут ссылка на картинку 4"); }

изменив .style-4 на .style-5 и т.д.

после чего в js коде измените 5 на то количество что у вас получилось


Помог? ставь +
Разработка дизайна - верстка, помощь по установке шаблона на uCoz.
Связь
skype - tolik-waak
Мой сайт


Сообщение отредактировал waak - Суббота, 2015-05-16, 22:17
Профиль
3DJER Оффлайн
Проверенный
3
Дата: Суббота, 2015-05-16, 23:07 | Сообщение # 3
Разобрался, большое спасибо. Боди в скобки не взял.)
Так, мало ли кому то пригодится данный код:
Код
<!DOCTYPE html>
<html>
<head>
<title>Страница не найдена</title>
<meta name="robots" content="noindex" />
<body>
<style>  
.style-0 {height:100%; background: url("/404/404.png")right bottom no-repeat ;}
.style-1 {height:100%; background: url("/404/403.png")right bottom no-repeat ;}
.style-2 {height:100%; background: url("/404/402.png")right bottom no-repeat ;}
.style-3 {height:100%; background: url("/404/401.png")right bottom no-repeat ;}
.style-4 {height:100%; background: url("/404/400.png")right bottom no-repeat ;}
</style>  

<style type="text/css">
html {height: 100%;}
div#table{display:table;width:100%;height:100%;}
div#row{display:table-row;width:100%;height:100%;}
div#cell{display:table-cell;height:100%;width:100%;vertical-align:middle;}
h1 {margin:0px;margin-bottom:30px;font-size:23px;font-weight:bold}
a {color:#27579E;text-decoration:none}
a:hover {color:#0E1D34;text-decoration:none}
.tx {width:700px;padding:10px;font-family:Tahoma;font-size:15px;color:#565656; margin: 0 auto;text-align:left;}
@media only screen and (max-width: 1000px) {body {background:#FFF !important}}
</style>
<script>  
document.body.className = 'style-' + parseInt(Math.random() * 5);  
</script>  

</head>

<div id="table">
<div id="row">
<div id="cell">
<div class="tx">
<h1>Ошибка 404</h1>
<p>Страница, на которую вы попали, не существует. Вы можете попробывать следующее:</p>
<p>- <a href="/">Перейти к главной странице сайта</a></p>
<p>- Проверить правильность введенного адреса</p>
<p>- Вернуться туда, откуда пришли (<i>нажать кнопку «Назад» в своем браузере</i>)</p>
</div>
</div>
</div>
</div>
</body>
</html>




Сообщение отредактировал 3DJER - Суббота, 2015-05-16, 23:13
Профиль
  • Страница 1 из 1
  • 1
Поиск: