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

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

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

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

JavaScript
1
2
3
4
5
6
<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
1
2
3
4
5
6
<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
1
2
3
4
5
6
<script type="text/javascript">
 
slide[0] = new Image();
slide[0].src = 1.jpg;
 
</script>

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

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

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

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

JavaScript
1
2
3
4
5
6
7
<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
1
2
3
4
5
6
7
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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
1
2
3
4
5
6
7
8
9
10
</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
1
2
3
4
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
1
2
3
4
slide=new Array () 
slide[0]=new Image () 
slide[0].src ="1.jpg"
document.images [0].src=slide[0].src

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

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

JavaScript
1
2
3
4
5
6
7
<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
1
2
3
4
5
6
7
8
9
10
11
{ 
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

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

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

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

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

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