Случайная картинка

[VeD]

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

<!--HTML.BY-->
<script language="JavaScript">
<!--
var a=Math.round(Math.random()*4)
image = new Array();
image[0]="/01.jpg"
image[1]="/02.jpg"
image[2]="/03.jpg"
image[3]="/04.jpg"
document.write ("<img src="+image[a]+">");
//-->
</script>
</div>

помогите пожалуйста???

 

[Serg@NT]

Картинки то все разные по размеру чтоль? Сделайте массив размеров и так же подставляйте.

 

[marker]

Это совсем порнография массивов получиться.
Я поэксперементировал, получилось вот это.

ЧИТАТЬ КОММЕНТАРИИ К СКРИПТУ ОБЯЗАТЕЛЬНО.

// Случайное число от 0 - 4
var a = Math.round(Math.random()*4)
// Случайный индентификатор для элемента картинки
var mr = Math.random();
// Создаем массив с картинками
image = new Array();
// Создаем строки внутри массива
image[0]='/01.jpg';
image[1]='/02.jpg';
image[2]='/03.jpg';
image[3]='/04.jpg';
// Создаем картинку виртуально
var img = new Image();
// Даем виртуальной картинке путь к файлу
imgload.src = image[a];
// Выводим на страницу картинку без ширины и высоты, почему обьясню после
document.write("<img id="+mr+" src="+imgload.src+" />");

// Здесь мы ждем пока загрузиться в кеш браузера файл виртуальнйо картинки
// Когда это происходит ищем картинку в документе с заданным слуйчайным индентификатором 
// и даем объекту ширину и высоту
imgload.onload = function(){
	var usimg = document.getElementById(mr);
	usimg.width = imgload.width;
	usimg.heigh = imgload.heigh;
}

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

НЕ ЗАБЫВАЕМ СТАВИТЬ (+) СПРАВА СНИЗУ МОЕГО СООБЩЕНИЯ

 

[Serg@NT]

У вас ошибка в имени создаваемой виртуальной картинки. Уж либо везде img, либо везде imgload. Но, не в этом суть.

Я лично комментарий под кодом вообще не понял. Насколько я знаю, большинство популярных браузеров сначала загружает разметку, а уж потом картинки. Поэтому ваш код будет аналогичен описанному в первом посте, где размеры не указаны в принципе. Насколько я понял вопрос, VeD хочет задать какие-то свои размеры для картинок, а не взятые из размеров файла (ибо, как я писал выше, это не имеет смысла). Поэтому я и предложил сделать второй массив.

 

[marker]

У вас ошибка в имени создаваемой виртуальной картинки. Уж либо везде img, либо везде imgload. Но, не в этом суть.

Я лично комментарий под кодом вообще не понял. Насколько я знаю, большинство популярных браузеров сначала загружает разметку, а уж потом картинки. Поэтому ваш код будет аналогичен описанному в первом посте, где размеры не указаны в принципе. Насколько я понял вопрос, VeD хочет задать какие-то свои размеры для картинок, а не взятые из размеров файла (ибо, как я писал выше, это не имеет смысла). Поэтому я и предложил сделать второй массив.

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

на счет того что вы ничего не поняли из того что я написал, мне жаль вас.

 

[tigra60]

Уважаемый VeD!
Если Вы уж пишете document.write() (растопчем ненавязчивый javascript), то зачем Вам геморрой с массивами? Можно написать так:

<script type="Javascript">
// именно type, а не language
document.write ("<img src='/0"+Math.round(Math.random()*4)+".jpg' alt='картинко'>");
// alt - обязательный атрибут элемента IMG
// значения атрибутов должны быть в кавычках
</script>

А если Вы хотите выводить все картинки одного размера, то лучше сделать это заранее например, в Фотошопе, потому что:
1. Если масштабировать картинки разных соотношений ширины и высоты в одинаковые размеры - результат может превзойти все ожидания любителей ужасов.
2. Увеличение картинки приводит к тому же результату, что и п.1, а уменьшение замедляет загрузку страницы из-за большой картинки.

Если это Вас не пугает и Вы хотите, чтобы любая из картинок выводилась размером, например, 300 х 200, можно написать так:

<script type="Javascript">
document.write ("<img src='/0"+Math.round(Math.random()*4)+".jpg' alt='картинко' width='300' height='200'>");
</script>

на счет того что вы ничего не поняли из того что я написал, мне жаль вас.

И меня пожалейте! Я тоже ни хрена не понял!

 

[Serg@NT]

Вы, чем меня жалеть почём зря, лучше объяснили бы по-человечески, что вы хотели добиться этими ухищрениями. Я вроде доходчиво объяснил, что, на мой взгляд, это не имеет смысла.

 

[marker]

Видимо я слишком долго программировал на PHP меня заглючило.
У меня было ощущение что write() действует как print echo в PHP :biggrin:

Но суть моего скрипта все равно не меняеться.
Смотрите сами.

Почему я сделал так:

document.write("<img id='"+mr+"' src='"+imgload.src+"' alt='' />");
imgload.onload = function(){
        var usimg = document.getElementById(mr);
        usimg.width = imgload.width;
        usimg.heigh = imgload.heigh;
}

А Не так:

imgload.onload = function(){
        document.write("<img id='"+mr+"' width='"+imgload.width+"' src='"+imgload.src+"' alt='' />");
}

1. Чтобы узнать размеры изображения нужно чтобы изображение полностью загрузилось. Так? Да.
2. Если написать document.write в событии imgload.onload тогда изображение запишеться в body только после того как загрузиться само изображение в кеш браузера. Так? Абсолютно.
3. Если вначале вывести изображение и по окончанию его загрузки присвоить ему размеры так будет намного быстрее и понятнее для посетителя. Вы заходите на страницу с этой JS загрузкой и не видите ни какого изображения и только через какоето время когда загрузиться изображение а в зависимости от скорости вашегоинтернета вам нужно догадываться что происходит и происходит ли вообще.

 

[VeD]

Я немножко поработал над этим, и вот что получилось

<div style="width:300px; height:200px; overflow:auto">
<!--HTML.BY-->
<script language="Javascript">
<!--
var a=Math.round(Math.random()*4)
image = new Array();
image[0]="/01.jpg"
image[1]="/02.jpg"
image[2]="/03.jpg"
image[3]="/04.jpg"
document.write ("<img src="+image[a]+">");
//-->
</script>
</div>

но есть одно но... картинка не уменшилась, а просто появилась прокрутка(((((

 

[tigra60]

но есть одно но... картинка не уменшилась, а просто появилась прокрутка(((((

А что Вас удивляет?
Что написали, то и имеете.
Вы пробовали мой скрипт №2?

 

[VeD]

но есть одно но... картинка не уменшилась, а просто появилась прокрутка(((((

А что Вас удивляет?
Что написали, то и имеете.
Вы пробовали мой скрипт №2?

не пробовал, просто это каждую картинку нужно резать. а почему нельзя кодом это сделать???

 

[Serg@NT]

но есть одно но... картинка не уменшилась, а просто появилась прокрутка(((((

А что Вас удивляет?
Что написали, то и имеете.
Вы пробовали мой скрипт №2?

не пробовал, просто это каждую картинку нужно резать. а почему нельзя кодом это сделать???

Вы объясните толком, чего вы хотите добиться? Чтобы картинки были одного размера? Tigra60 во втором посте написал как. Кодом, ничего не надо резать. В этом случае картинки сожмутся до этого размера, вне зависимости от их реальных размеров. Тигра просто написал, что если соотношение ширины к высоте у картинок не 3 к 2м (300х200), то изображение исказится. Чтобы этого не было, можете зафиксировать, например, только ширину (добавить в тег img style="width: 300px"; ). Тогда по ширине картинки будут одинаковыми - по 300px, но высота будет разная (сожмётся пропорционально ширине).

 

[VeD]

я хочу типа такого -
<img src="http://sayt.com/logo.gif" width="200" height="300" border=0 alt="Сайт""></a></BODY></HTML>
что картинка если 400х600, то что бы она уменшалась до такого размера, которую я укажу в коде. Это реально, или нет???? просто как прописать сюда, я не знаю((((

<!--HTML.BY-->
<script language="Javascript">
<!--
var a=Math.round(Math.random()*4)
image = new Array();
image[0]="/01.jpg"
image[1]="/02.jpg"
image[2]="/03.jpg"
image[3]="/04.jpg"
document.write ("<img src="+image[a]+">");
//-->
</script>
</div>

 

[Serg@NT]

Так и пишите:

<!--HTML.BY-->
<script language="Javascript">
<!--
var a=Math.round(Math.random()*4)
image = new Array();
image[0]="/01.jpg"
image[1]="/02.jpg"
image[2]="/03.jpg"
image[3]="/04.jpg"
document.write ("<img src="+image[a]+" width=\"200\" height=\"300\">");
//-->
</script>
</div>

 

[VeD]

Так и пишите:

<!--HTML.BY-->
<script language="Javascript">
<!--
var a=Math.round(Math.random()*4)
image = new Array();
image[0]="/01.jpg"
image[1]="/02.jpg"
image[2]="/03.jpg"
image[3]="/04.jpg"
document.write ("<img src="+image[a]+" width=\"200\" height=\"300\">");
//-->
</script>
</div>

Большое спасибо Вам всем за помощ)))) Всё работает, как я хотел)))))