Создание изображений и вывод на страницу

newb_programmer

вот написал код! я предполагал что он должен мне на страницу вывести 4 изображения, но по всему видимому код работает нормально, но просто его цель какаято другая))) можете объяснить что делает мой код и как мне сделать что бы выводило картинки на страницу??
var loc = new Array("mout/1.jpg","mout/2.jpg","mout/3.jpg","mout/4.jpg");
var pics = new Array();
for (var i=0;i<loc.length;i++) {
    pics[i]=new Image(320,240);
    pics[i].src=loc[i];
}
тоесть мне нужно аналогично этому сделать->
<img src="mout/1.jpg" /> 
<img src="mout/2.jpg" /> 
<img src="mout/3.jpg" /> 
<img src="mout/4.jpg" />
5 ответов

newb_programmer

ваш скрипт - это один из вариантов т.н. предварительной загрузки изображений в кеш браузера т.е. файлы картинок предварительно загружаются в кеш браузера, чтобы потом, на странице, эти картинки в нужный момент появлялись быстрее, чем при обычной загрузке с сервераобычно используется для ролловеров (смена картинки при наведении/отведении курсора мыши)существует, кроме этого "скриптового", ещё два варианта - чисто HTML (
и в нём теги ) и чисто CSS (создаются неиспользуемые классы, в которых прописываются правила background-image: url(здесь путь к картинке))для вашего случая - просто статические теги в HTML-коде - этот скрипт совершенно не нужен


newb_programmer

ну ладно да фиг с ним оно не создает изображения, но изменять ведь текущее изображение должно??? а у меня не получается...вот к примеру абстрактный пример
<script>
    document.images["somename"].src="folder/image.jpg";
</script>
<img src="pic.jpg" name="somename"/>
я создаю тегами html картинку и скриптом хочу ее изменить, проще уже некуда и всеравно не работает...


newb_programmer

Вот скрипт:
//Создание массивов для хранения изображений 
//Массив с 6 элементами, так как 0 мы не будем использовать 
numerals=new Array(11); 
letters=new Array(11); 
//В цикле создаем объекты изображений и загружаем рисунки 
for(var i=1;i<6;i++){ 
//Создаем объекты изображений 
numerals[i] =new Image(); 
letters[i] =new Image(); 
//Загружаем все рисунки 
numerals[i].src ="images/img"+i+".gif"; 
letters[i].src ="images/pic"+i+".gif"; 
} 
//Функция, сменяющая изображение при событии onMouseOut 
function ImageOut(img){ 
document.images[img-1].src=numerals[img].src; 
} 
//Функция, сменяющая изображение при событии onMouseOut 
function ImageOver(img){ 
document.images[img-1].src=letters[img].src; 
}
А вот код страницы:
<!-- Создаем пять ссылок с рисунками --> 
<div>
<a href="javascript:void(0)" 
onMouseOver="ImageOver(1)" 
onMouseOut="ImageOut(1)"> 
<img src="images/img1.gif" width=81 height=81> 
</a> 
<a href="javascript:void(0)" 
onMouseOver="ImageOver(2)" 
onMouseOut="ImageOut(2)"> 
<img src="images/img2.gif" width=81 height=81> 
</a> 
<a href="javascript:void(0)" 
onMouseOver="ImageOver(3)" 
onMouseOut="ImageOut(3)"> 
<img src="images/img3.gif" width=81 height=81> 
</a> 
<a href="javascript:void(0)" 
onMouseOver="ImageOver(4)" 
onMouseOut="ImageOut(4)"> 
<img src="images/img4.gif" width=81 height=81> 
</a> 
<a href="javascript:void(0)" 
onMouseOver="ImageOver(5)" 
onMouseOut="ImageOut(5)"> 
<img src="images/img5.gif" width=81 height=81> 
</a>
</div>


newb_programmer

я создаю тегами html картинку и скриптом хочу ее изменить, проще уже некуда и всеравно не работает...
словами вы написали всё верно - СНАЧАЛА создаёте картинку и ЗАТЕМ скриптом её меняете а вот в коде сделали ровно наоборот - СНАЧАЛА скриптом обращаетесь к ещё несуществующей картинке, и только ЗАТЕМ создаёте картинку тегами htmlбраузер читает вами написанное точно также как и вы - построчно сверху вниз и когда ему говорят - смени файл картинки в теге с именем "somename" - он удивлённо оглядывается по сторонам: а где же такой тег? ах, тег, оказывается, ниже прописан? извините, ещё не дочитал


newb_programmer

kalabuni, во спасибо, свою проблему я уже решил, но этот вопрос оставался непонятным)) теперь все ясно!