Вывести картинку из массива

@From_Tula · Регистрация: 22.05.2009

Author24 — интернет-сервис помощи студентам

Вопрос такой не могу понять как вывести картинку?))

Javascript

<script type="text/javascript">
 
slide[0] = new Image();
slide[0].src = 1.jpg;
 
</script>

@arvitaly · 26.09.2010, 22:46

Фрэймворк какой?

@Hurtsok · 27.09.2010, 03:11

Вот так надо выводить:

HTML5

1	<div id="img"></div>

Javascript

1	document.getElementById('img').innerHTML='<img scr=/"here youre pass/" width="" height="" /> '

и причем здесь Фреймворк???

@~~NightmareZ~~ · 27.09.2010, 04:26

Сообщение от arvitaly

Фрэймворк какой?

Без фреймворков нынче жизнь не мила?

Сообщение от Hurtsok

Javascript

1	document.getElementById('img').innerHTML='<img scr=/"here youre pass/" width="" height="" /> '

и причем здесь Фреймворк???

Неправильно. После такого кода получится вот такая структура:

HTML5

1
2
3

<img>
  <img src="here your pass" width="" height="">
</img>

Сообщение от From_Tula

Вопрос такой не могу понять как вывести картинку?))

Javascript

<script type="text/javascript">
 
slide[0] = new Image();
slide[0].src = 1.jpg;
 
</script>

Глупости потому что пишешь.
Во-первых, у тебя тут массив не создаётся. Ну, допустим, он создан где-то до этого момента, а тот фрагмент кода ты просто не привёл. Но на всякий случай, делается это так:

Javascript

1	slide = new Array();

Далее, у тебя ошибка в том, что имя файла без кавычек. Правильно так:

Javascript

1 2	slide[0] = new Image(); slide[0].src = "1.jpg";

Разумеется, должен существовать файл 1.jpg

Теперь, если у тебя уже есть где-нить тег image

HTML5

1	<img name="myImg">

то можно просто назначить полю src значение из slide[0].src

Javascript

1	document.images["myImg"].src = slide[0].src;

Если же тега нигде небыло, нужно его создать:

Javascript

1
2
3

var img = document.createElement('img');
img.src = slide[0].src;
document.childNodes[0].appendChild(img);

Первая строчка создаёт тег <img>, вторая назначает ему картинку, третья добавляет тег в корень страницы (в тег <html>).

@Hurtsok · 27.09.2010, 07:16

Структура в моем варианте будет не такая которую ты описал, что за бред. Там в диве будет рисунок!

@denisov · 27.09.2010, 17:38

Сообщение от From_Tula

Вопрос такой не могу понять как вывести картинку?))

Javascript

<script type="text/javascript">
 
slide[0] = new Image();
slide[0].src = 1.jpg;
 
</script>

правильный вариант.

Javascript

<script>
var slide = new Image();
slide.src = "1.jpg";
</script>

p.s. такой вариант загружает картинку, но не отображает. кстати, можно использовать как предварительную загрузку, чтобы на новой странице не ждать когда картинка загрузится.

upd: щас заметил тему «массив images». тогда можно попробовать так, только не знаю, будет работать, но вроде всё правильно:

Javascript

<script>
var slide = new Array();
slide[0] = new Image();
slide[0].src = "pic01.gif";
slide[1] = new Image();
slide[1].src = "pic02.gif";
</script>

@Hurtsok · 27.09.2010, 18:02

Сообщение от denisov

Код Javascript

Javascript

<script>
var slide = new Array();
slide[0] = new Image();
slide[0].src = "pic01.gif";
slide[1] = new Image();
slide[1].src = "pic02.gif";
</script>

что за бред ты написал. Так с объектами не работают, скорее только с методами и то когда они определяются в качестве литералов. Мне интересно как ты конструктор будешь писать к данному объекту и вообще где он?? Как вы создаете экземпляр если для него не существует конструктора? И вообще зачем такое извращение когда все это через DOM легко сделать можно??

@denisov · 27.09.2010, 18:37

Сообщение от Hurtsok

<...> Так с объектами не работают, скорее только с методами и то когда они определяются в качестве литералов. Мне интересно как ты конструктор будешь писать к данному объекту и вообще где он?? <...>

это тебе не ООП.

Сообщение от Hurtsok

И вообще зачем такое извращение когда все это через DOM легко сделать можно??

ну так напиши если не сложно

p.s. я вообще-то и сам не уверен что мой последний код работает, это только теория.

@Hurtsok · 27.09.2010, 19:06

Если на то пошло то JS это ООП язык, он конечно не такой типизированный как Java, что делает его универсальным. Но в нем есть поддержка конструкторов с помощью объявления функции с таким же именем как у класса. Так же есть поддержка наследуемых свойств, правда кривая и через прототипы.
P.S Прежде чем, что кому то давать стоит довести код до ума (не в обиду, лишь совет).

@From_Tula · 27.09.2010, 23:09 **[ТС]**

Всем спасибо))
Создал простую тему а такие разборки тут=)

мне прост надо было сделать простое слайд шоу,
нашел вчера пример, выкладываю полностью...

Javascript

<script language = "JavaScript"> 
 
num=0 
slide=new Array () 
slide[0]=new Image () 
slide[1]=new Image () 
slide[2]=new Image () 
slide[3]=new Image () 
slide[4]=new Image () 
slide[5]=new Image () 
 
slide[0].src ="1.jpg" 
slide[1].src ="2.jpg" 
slide[2].src ="3.jpg" 
slide[3].src ="1p.jpg" 
slide[4].src ="2p.jpg" 
slide[5].src ="3p.jpg" 
 
function next(n) 
 
{ 
if (n==1) 
{ num++ 
if (num==6) 
num=0; 
} 
else 
{num-- 
if (num== -1) 
num=5; 
} 
document.images [0].src=slide[num].src 
} 
 
</script>

HTML5

</head> 
 
<body> 
 
<img src = "1.jpg" width="400" height="300"> 
 
<form> 
<input type=button value=Назад onClick="next(0)"> 
<input type=button value=Вперед onClick="next(1)"> 
</form>

работает все прекрасно, но я не могу понять... если сделать так то картинка не отоброжается

Javascript

slide=new Array () 
slide[0]=new Image () 
slide[0].src ="1.jpg"
document.images [0].src=slide[0].src

как я понял она тут только загружается???

И я просто не могу понять как именно эту картинку мне будет нужно отобразить!!!

И честно не пойму за счет чего тогда работает этот слад шоу, ведь первоначально у нас

HTML5

1	<img src = "1.jpg" width="400" height="300">

Надеюсь что вы разъясните.

@denisov · 28.09.2010, 00:00

Сообщение от From_Tula

работает все прекрасно, но я не могу понять... если сделать так то картинка не отоброжается

Javascript

slide=new Array () 
slide[0]=new Image () 
slide[0].src ="1.jpg"
document.images [0].src=slide[0].src

как я понял она тут только загружается???

Попробуйте так. У меня этот код заработал.

Javascript

<img src="1.jpg" width="400" height="300" id="test"> // добавил атрибут id
<script>
var slide= new Array();
slide[0] = new Image();
slide[0].src = "2.jpg";
document.getElementById("test").src = slide[0].src; // заменил image[0] на getElementById
</script>

@n2o · 13.06.2015, 12:02

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

Javascript

{ 
if (n==1) 
{ num++ 
if (num==6) 
num=0; 
} 
else 
{num-- 
if (num== -1) 
num=5; 
}

Чтобы при нажатии на одну кнопку показывались кадры поочерёдно с промежутком скажем в 1 секунду.

@alexsamos33 · 13.06.2015, 16:17

n2o, Через setTimeout или setInterval

@arvitaly Благотворец 142 / 122 / 13 Регистрация: 29.04.2009 Сообщений: 537
	26.09.2010, 22:46	2
	Фрэймворк какой? 0

@Hurtsok bigMatherHacker 112 / 81 / 12 Регистрация: 18.08.2010 Сообщений: 237
	27.09.2010, 07:16	5
	Структура в моем варианте будет не такая которую ты описал, что за бред. Там в диве будет рисунок! 0

@denisov 6 / 6 / 3 Регистрация: 30.01.2010 Сообщений: 31
	27.09.2010, 18:37	8
	Сообщение от Hurtsok <...> Так с объектами не работают, скорее только с методами и то когда они определяются в качестве литералов. Мне интересно как ты конструктор будешь писать к данному объекту и вообще где он?? <...> это тебе не ООП. Сообщение от Hurtsok И вообще зачем такое извращение когда все это через DOM легко сделать можно?? ну так напиши если не сложно p.s. я вообще-то и сам не уверен что мой последний код работает, это только теория. 0

@Hurtsok bigMatherHacker 112 / 81 / 12 Регистрация: 18.08.2010 Сообщений: 237
	27.09.2010, 19:06	9
	Если на то пошло то JS это ООП язык, он конечно не такой типизированный как Java, что делает его универсальным. Но в нем есть поддержка конструкторов с помощью объявления функции с таким же именем как у класса. Так же есть поддержка наследуемых свойств, правда кривая и через прототипы. P.S Прежде чем, что кому то давать стоит довести код до ума (не в обиду, лишь совет). 0

@alexsamos33 669 / 640 / 335 Регистрация: 26.04.2014 Сообщений: 2,122
	13.06.2015, 16:17	13
	n2o, Через setTimeout или setInterval 0