Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Смена фона шапки при перезагрузке страница (https://javascript.ru/forum/dom-window/5340-smena-fona-shapki-pri-perezagruzke-stranica.html)

florchik 05.10.2009 23:42

Смена фона шапки при перезагрузке страница
 
Здравствуйте.
Просьба не закидывать тухлыми помидорами, но буду честна. Я не знаю ява-скрипта, самое большое на что способна, это немного подправлять чужие скрипты под свои нужды, просто догоняя по логике.
У меня возникла такая проблема. Есть необходимость подгружать через стили background в определенной ячейке таблицы картинку. Естественно, если бы картинка нужна была одна, то тут проблем нет, каскадными таблицами и отделалась бы. Но мне надо, чтобы пока пользователь ходит по страницам картинки сменялись, просто случайным образом. Картинок предположим три (но хотелось бы и больше).
Я перерыла весь форум и нашла подобные проблемы и решения к ним. Но ни один из этих вариантов у меня категорически не работает.

Итак, что лежит в основе поих потуг.

1. Стили
<style type="text/css">
<!--
.topimg0 {
	background: #FFF url(/fon/top01.jpg) no-repeat left bottom;
}
.topimg1 {
	background: #FFF url(/fon/top02.jpg) no-repeat left bottom;
}
.topimg2 {
	background: #FFF url(/fon/top03.jpg) no-repeat left bottom;
}
-->
</style>

2. Собственно скрипт
<script language="javascript">
<!--
var tdimg = new Array();
tdimg[0] = 'topimg0';
tdimg[1] = 'topimg1';
tdimg[2] = 'topimg2';
var img = Math.floor(Math.random() * 3);
document.getElementById('kartinka').className = tdimg[img];
// -->
</script>


3. Код html
<table border="0" cellpadding="0" cellspacing="0" >
  <tr>
   <td><img src="/images/logo.gif"></td>
    <td id="kartinka">А вот тут и должна подгружаться картинка</td>
  </tr>
</table>


Вообще это мой последний вариант, до этого были еще с десяток, не меньше, ни один упорно не работал. Сейчас даже не вспомню что я там химичила методом тыка.
Кроме этого, наверняка было бы проще, если надо было просто подгрузить картинку в ячейку, т.е. если б картинка была через тег <img src="">. Но мне надо, чтобы картинка была именно в качестве фонового изображения, т.к. дизайн резиновый, картинки размера разного, если у пользователя экран небольшой, то видно часть картинки, если больше, то видно уже больше. Если же сделать фиксированную ширину, то на маленьком экране картинка под большой будет растягивать диз, а не большом экране картинка оптимизированную под маленький будет казаться обгрызком.

Много понаписала, но это лишь для того, чтобы полностью составить картину.
Очень прошу помочь со скриптом, сама уже исчерпалась. Только, плиз, не тыкайте носом по типу "а ты подумала, что тут массив не такой, функция другая". Я все равно ничего не пойму. Мне бы кто помог просто поправленный вариант выложить. Возможно принаглела, но единственная надежда =)
Заранее спасибо огромное!!

Gozar 06.10.2009 09:24

<html><head>
<style type="text/css">
<!--
.topimg0 {
    background: #FFF url(/fon/top01.jpg) no-repeat left bottom;
}
.topimg1 {
    background: #FFF url(/fon/top02.jpg) no-repeat left bottom;
}
.topimg2 {
    background: #FFF url(/fon/top03.jpg) no-repeat left bottom;
}
-->
</style>
<script type="text/javascript">
var tdimg = new Array();
tdimg[0] = 'topimg0';
tdimg[1] = 'topimg1';
tdimg[2] = 'topimg2';
function Kar(){
	var img = Math.floor(Math.random() * 3);
	document.getElementById('kartinka').className = tdimg[img];
}
</script>

</head><body onload="Kar()">
<table border="0" cellpadding="0" cellspacing="0" >
  <tr>
   <td><img src="/images/logo.gif"></td>
    <td id="kartinka">А вот тут и должна подгружаться картинка</td>
  </tr>
</table>
</body>
</html>


Пишем функцию Kar(), которая выполняется когда body onload

type="text/javascript" можно не указывать

florchik 06.10.2009 14:12

Gozar,
Спасибо огромное! Все работает!
Такое счастие, чес слово =) Удачи вам!!!


Часовой пояс GMT +3, время: 00:39.