вывод случайной картинки в DIV

coldrain · April 30, 2007

привет всем,

я использую сл. код для вывода случайной картинки в заголовок страницы:

<script language="javascript" type="text/javascript">

 p=65*Math.random();
 d=parseInt(p);
 document.write ("<div background:url('../pics/site/"+d+".jpg')></div>")

как видите, в скобках я пытаюсь вписать в DIV полученную картинку.

но картинка не выводится. с таблицами я это проделываю без проблем, т.е. вписываю в background.

в чем моя ошибка?

DsKTY · April 30, 2007

хм.. во первых помоему надо писать:

а ещ? может попробуй через:

document.getElementById("elementId").style.backgroundImage = "";

coldrain · May 1, 2007

p=65*Math.random();

d=parseInt(p);

document.getElementById("divID").style.backgroundImage = "('../pics/site/"+d+".jpg')"

пробовал так, не получилось

PacMan · May 1, 2007

var p=parseInt(65*Math.random());

var screen = document.getElementById("divID");
if(!screen) {
 screen = document.createElement('div');
 screen.style.width = screen.style.height = '100px';
 document.body.appendChild(screen);
}
screen.style.background = "url(../pics/site/"+d+".jpg) no-repeat 50% 50%"

coldrain · May 1, 2007

var screen = document.getElementById("мой DIV ID");

setting a property that has only a getter - вот такой результат. тоже не помогает :/

LokiDi L0ck · May 1, 2007

Вместо screen используй другую переменную.

И где твоя голова?.. каждую проблему сюда отписываешь, ты хотя бы сам иногда думай, почему где и что не хочет работать, а не сюда за каждым пошаговым действием бегай.

coldrain · May 1, 2007

все равно не помогает.

LokiDi L0ck, это не пошаговые действия. это те мелочи, которые мне не понятны.

про те что понятны, я здесь не пишу.

yopopt · May 1, 2007

document.getElementById("divID").style.backgroundImage = "('../pics/site/"+d+".jpg')" - не правильно.

document.getElementById("divID").style.backgroundImage = "('../pics/site/'+d+'.jpg')" - правильно

PacMan прив?л вам хороший скрипт. Используйте его, слегка приспособив под свои нужды.

coldrain · May 1, 2007

yopopt, спасибо.

я почитал справочник по JS, но пока со скриптом не разобрался до конца.

получается, что:

var p=parseInt(65*Math.random()); /переменная р - возвращает случ. число

var screen = document.getElementById("divID"); /переменная screen - возвращает элемент по его ID

if(!screen) { /если переменная screen не соответствует условиям ниже

screen = document.createElement('div');

screen.style.width = screen.style.height = '100px';

document.body.appendChild(screen);

}

screen.style.background = "url(../pics/site/"+d+".jpg) no-repeat 50% 50%" /.... то задать фон случайной картинкой?

можете пинать ногами за тупость, но я прошу разъяснить мне этот код. особенно про загадочный screen

PacMan · May 1, 2007

Переименовал переменную screen в myScreen, исправил одну ашипку

var p=parseInt(65*Math.random());

var myScreen = document.getElementById("divID"); // Выбираем элемент

if(!myScreen) { // Если элемент не найден - создаем его (100х100 пикселей, запихиваем в <body>)
 myScreen = document.createElement('div');
 myScreen.style.width = screen.style.height = '100px';
 document.body.appendChild(myScreen);
}
myScreen.style.background = "url(../pics/site/"+p+".jpg) no-repeat 50% 50%"; // Задаем элементу стилевой параметр 'background'

coldrain · May 1, 2007

PacMan, ок.

я создал слой с именем divID и упростил код до:

var p=parseInt(65*Math.random());

var myScreen = document.getElementById("divID");

myScreen.style.background = "url(../pics/site/"+p+".jpg)";

но что-то опять не так, firebug выдает, что myScreen has no properties.

AKS · May 1, 2007

myScreen has no properties

Это потому, что нет у Вас элемента с id='divID'. А почему нет? Потому, что Вы вызываете метод document.getElementById до того, как браузер "дотопал" до него, читая ваш html-код слева-направо попорядку. Ваш код должен быть размещен в странице после искомого элемента или должен быть выполнен при событии load документа.

coldrain · May 1, 2007

нашел решение.

<script language="javascript" type="text/javascript">

p=65*Math.random();
d=parseInt(p);
document.write ("<div style="width: 560px; height: 160px; background: url('../pics/site/"+d+".jpg')"></div>");
</script>

работает в FF, IE, Opera, NN. размер слоя под размер картинки.

если кому надо - юзайте!

LokiDi L0ck · May 1, 2007

если кому надо - юзайте!

coldrain · May 1, 2007

LokiDi L0ck, рад, что ты повеселился.

PacMan · May 2, 2007

если кому надо - юзайте!

document.write - некошерный способ изменять структуру DOM. Чревато поломками особенно в IE

coldrain · May 12, 2007

камрады

что-то я подзапутался опять. need your help again

вопрос стоит по-прежнему об этом некошерном/плохом/чреватым, но все же рабочим скрипте.

значит-с, так:

<div align="center"Ю

<div style="background-color:#FFFFFF; width:600px">

<img src="../pics/site/l_u_c.gif" align="left" alt="" />
<img src="../pics/site/r_u_c.gif" align="right" alt="" />


<script language="javascript" type="text/javascript">

p=65*Math.random();
d=parseInt(p);
document.write ("<div style="width: 560px;height: 160px; background: url('../pics/site/"+d+".jpg')"><div style="width: 200px; height: 60px; background-color: #FFFFFF"></div></div>");
</script>
</div>
</div>
</div>

1 слой - контайнер, по центру

2 слой - собсно шапка. слева-справа - картинки-углы, посередине div с random-картинками.

проблема в том, что надо втиснуть внутрь еще один слой в созданный скриптом слой и в него впихнуть картинку с лого и ссылкой. слой впихнуть не сложно, вся сложность его правильно расположить - я и padding, и margin пробовал - сдвигается вся страница вниз.

что скажете, как можно это разрешить?

thx

dreamer_ · May 31, 2007

ребята, вы чего тут устроили беспредел? Нельзя вас 1-них оставить даже на минуту!

Итак, суть объекта (кому не интересно - не переспрашивайте!)).

Объект - слой DIV

имеет св-ва - (1-но из них style - стиль)

содержимое, или данные

это данные!

зная это, мы будем для св-в, и данных применять РАЗНЫЕ методы (это так про100) :

div = document.getElementById('div1'); //получили ссылку на див

div.innerHTML = 'это другие данные!'; //получим

это другие данные!

(кстати, есть ещ? outerHTML, специально ведь для вас программисты сидели, парились, а вы.. )

div.style.width = '100px'; //получим style={width:100px}

кстати, у кого не заработает, пишите, это лишь инструкция, или введение в js для новичков))

для картинки можно и так

image = document.getElementById('img1');

image.setAttributes('border',0);

{учите матчасть = спасибо за внимание}

PacMan · May 31, 2007

div.innerHTML = 'это другие данные!'; //получим
это другие данные!

div.childNodes[0].nodeValue = 'это другие данные!'

PS Я до сих пор не могу понять что за свойство такое innerHTML ...

Дядя Саша · May 31, 2007

Все содержимое, или данные ни что иное как дочерние узлы по отношению к обьекту div, могут быть следующего типа:

Элемент 1 Имя дескриптора

Атрибут 2 Имя атрибута

Текст 3 #text

Комментарий 8 #comment

Документ 9 #document

Тип документа 10 doctype

Фрагмент 11 #document-fragment

Это в соответствии со спецификацией W3C DOM

Когда вы используете свойство innerHTML - изменяется объектная модель документа, потому как добавляются новые узлы. Не зря этот метод не поддерживается спецификацией W3C.

Лутше например использовать метод appendChild(), а свойство innerHTML лутше применять тогда, когда надо заменить текст в ячейке.

И если мы сделаем так:

div1.innerHTML = 'это другие данные!';

мы никак не получим

это другие данные!

Мы получим

_________________

| это другие данные! |

|_________________ |

Учите матчасть, гы...

PacMan · May 31, 2007

когда надо заменить текст в ячейке

И даже тут лучше использовать replaceChild

xaero · May 31, 2007

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
 <title>Untitled</title>
</head>

<script>
function ShowDiv(id,n)
{
 var div_object;
 var div_rand;

 div_rand = Math.ceil(Math.random()*n);

 if(document.getElementById(id)){
 div_object = document.getElementById(id);
 div_object.style.background = "url('im/"+div_rand+".gif')";
 }

}
</script>

<body>

<div id="m" style="border: 1px solid silver; padding: 5px;">asdfasdf</div>
<script> ShowDiv('m',3); </script>

</body>
</html>

Дядя Саша · May 31, 2007

И даже тут лучше использовать replaceChild

Вы как всегда правы

dreamer_ · June 1, 2007

извиняюсь)) видно была жара и мозги расплавились))) сейчас я понял, что автор хочет от скрипта - динамически поменять фон слоя

как 1 из варриантов:

никаких doc.write помещаем уже готовый слой, невидимый, с картинкой

#sloy{visibibility: hidden: background: url(1.gif)}

потом делаем в нужный моммент:

div = document.getElementById('sloy');

div.style.visibility = 'visible';

если надо поменять вдруг и фон:

img = '2.gif';

div.style.background = 'url(' + img +')';

сам ещ? не пробовал..)))

иногда полезно помещать слой, в н?м картинка с шириной-высотой=0, а потом через св-ва меняем е? ширину-высоту( "включаем"

Дядя Саша · June 1, 2007

я использую сл. код для вывода случайной картинки в заголовок страницы:

Вывод - ее не надо прятать и показывать. Надо каждый раз динамически создавать слой и в него вписывать картинку, имя которой генерится скриптом

dreamer_ · June 2, 2007

я бы не создавал каждый раз слой, а пользовал бы свою шаблонную систему, где уже слою, при загрузке ставил бы нужный фон. впрочем, как кому удобнее, т.о был бы всего 1 файл шаблона, и 1 таблица БД, откуда я бы вынимал имена картинки-фона при загрузке

Sign In

вывод случайной картинки в DIV

Question

Link to comment

Share on other sites

30 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information