Ротация фона в таблице
Есть таблица с фоновой картинкой <table background="images/picture1.jpg"
Есть еще одна фоновая картинка images/picture2.jpg Надо, чтобы при загрузке страницы фон в таблице отображался случайным образом, picture1 или picture2 Знаю как сделать дивом, а вот тут туплю. Требуется именно такая конструкция, ибо там поверх много чего еще наворочено. |
А чем в этом плане див отличается от таблицы?
|
pumba177,
на jQuery пойдёт ? И у таблицы или её обрамления есть id или класс ? |
Цитата:
|
Да что здесь происходит? Объясните чем таблица хуже дива!! У нее что, фон намертво задается, что хрен сменишь??
|
danik.js,
Ничем - но есть те, кто могут всунуть лишь готовый код. (Поэтому спросил про селектор, - а раз: нет ответа, занчит пусть сам крутиться исходя из div |
Цитата:
|
Цитата:
|
Цитата:
|
|
<html>
<head>
<title>Тест таблицы</title>
<STYLE>
#img_prehome1{
background: url(http://www.sokzvezda.ru/index/img_prehome1.jpg) no-repeat center;
}
#img_prehome2{
background: url(http://www.sokzvezda.ru/index/img_prehome2.jpg) no-repeat center;
}
#prehome {
position:relative;
width:940px;
opacity:0.6;
margin: 0 auto;
}
</STYLE>
</head>
<body leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0 marginwidth=0 marginheight=0 bgcolor="#efefef" link="#000066" alink="#990000" vlink="#993399">
<div id="prehome">
<script language="Javascript">
<!-- BEGIN
var images = 2;
var whichImage = Math.round(Math.random()*(images-1))+1;
document.write('<img src="http://designforum.bestff.ru/i/blank.gif" width="100%" height="100%" style="position:absolute;z-index:-1" id="img_prehome'+whichImage+'">');
// END-->
</script>
<table align="center" width="100%" height=244 border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
таблица<br>
таблица<br>
таблица<br>
таблица<br>
таблица<br>
таблица<br>
</td></tr>
</table></div>
</body></html>
|
pumba177,
а в таблице будет контент страницы? |
Спасибо огромное!
|
pumba177,
Чуть поправил |
Цитата:
|
Цитата:
|
Цитата:
|
Deff, а при таком решении все варианты картинок фона сразу не подгружаются, а грузится лишь одна случайным образом в момент открытия страницы? Ну т.е. можно их туда и десяток напихать?
|
<html>
<head>
<title>Тест таблицы</title>
<STYLE>
#img_prehome1{
background: url(http://s3.uploads.ru/EdxaK.jpg) no-repeat center;
}
#img_prehome2{
background: url(http://s2.uploads.ru/gFMLP.jpg) no-repeat center;
}
#prehome {
position:relative;
width:940px;
opacity:0.6;
margin: 0 auto;
}
div.img_prehome{
position:absolute;
z-index:-1;
width:940px;
height:244px;
}
</STYLE>
</head>
<body leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0 marginwidth=0 marginheight=0 bgcolor="#efefef" link="#000066" alink="#990000" vlink="#993399">
<div ><div id="prehome">
<script language="Javascript">
<!-- BEGIN
var images = 2;
var whichImage = Math.round(Math.random()*(images-1))+1;
document.write('<div class="img_prehome" id="img_prehome'+whichImage+'"></div>');
// END-->
</script>
<table align="center" width="100%" height=244 border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
таблица<br>
таблица<br>
таблица<br>
таблица<br>
таблица<br>
таблица<br>
</td></tr>
</table></div></div>
</body>
</html>
Яркость регулируете этой цифрой opacity:0.6; В принципе можно и сотыми 0.66 0.99 |
Спасибо!
|
pumba177,
Поправил для Ие - пришлось размеры div.img_prehome прописать явно(в соответствии с таблицей |
Еще раз большое спасибо - всё как надо работает!
|
Deff, а при добавлении в стиле еще картинок в коде скрипта только здесь var images = 2; соответствующее им число меняется?
Вот здесь var whichImage = Math.round(Math.random()*(images-1))+1; ничего не трогаем? |
pumba177,
Да, только var images = N; Ну и в стиле прописать картинки фоном |
| Часовой пояс GMT +3, время: 13:19. |