var images_path = new Array(pict1,pict2,...,pictN);
pics = new Array();
for(i=0;i<images_path.length;i++) {
pics = new Image();
pics.src = images_path;
}
как рандомить картинки?
Есть у меня таблица, в ней 12 клеток и в каждой клетке по 1 картинке, собсно вопрос в том как заставить их меняться местами при запуске скрипта, тоесть чтобы картинки просто поменялись местми и все
есть мысли менять код хтмл но вот как зацепиться за чтото незнаю.
спасибо
есть мысли менять код хтмл но вот как зацепиться за чтото незнаю.
спасибо
создай массив Array со своими рисунками,что бы было легко обращаться по индексам к элементам этого массива + рандомайзер поможет установить картинки в произвольные ячейки!
Код:
<script language="JavaScript">
function randomPIC(){
i = Math.round(Math.random()*12);
pic0 = new Image();
pic0.scr = 'image\\твойРисунок0.расширение'
pic1 = new Image();
pic.scr = 'image\\твойРисунок1.расширение'
-...........-
picA = new Array(pic0,pic1,...picN);
for(j=0;j<=picA.length;j++) {
клетка_таблицы.scr = picA.scr;
}
}
</script>
function randomPIC(){
i = Math.round(Math.random()*12);
pic0 = new Image();
pic0.scr = 'image\\твойРисунок0.расширение'
pic1 = new Image();
pic.scr = 'image\\твойРисунок1.расширение'
-...........-
picA = new Array(pic0,pic1,...picN);
for(j=0;j<=picA.length;j++) {
клетка_таблицы.scr = picA.scr;
}
}
</script>
покажи пожалуйста на примере с таблицей. заранее огромное спасибо
Вот пример написанный за 3 минуты. Показывает как менять местами содержимое элементов:
[HTML]<table>
<script><!--
for(var i = 1; i <= 12; i++) {
document.write('<tr><td id="cell-' + i + '"><img src="image-'+i+'.png" alt="Image ' + i + '"></td></tr>');
}
function shiftImages() {
var prev = null;
var first = document.getElementById('cell-1').innerHTML;
for(var i = 1; i <= 12; i++) {
var obj = document.getElementById('cell-' + i);
if(obj) {
if(prev)
prev.innerHTML = obj.innerHTML;
prev = obj;
}
}
prev.innerHTML = first;
}
--></script>
</table>
<input type="button" value="Сдвиг" onclick="shiftImages()" />[/HTML]
[HTML]<table>
<script><!--
for(var i = 1; i <= 12; i++) {
document.write('<tr><td id="cell-' + i + '"><img src="image-'+i+'.png" alt="Image ' + i + '"></td></tr>');
}
function shiftImages() {
var prev = null;
var first = document.getElementById('cell-1').innerHTML;
for(var i = 1; i <= 12; i++) {
var obj = document.getElementById('cell-' + i);
if(obj) {
if(prev)
prev.innerHTML = obj.innerHTML;
prev = obj;
}
}
prev.innerHTML = first;
}
--></script>
</table>
<input type="button" value="Сдвиг" onclick="shiftImages()" />[/HTML]
Nixus использование атрибута обьектов innerHTML это не лучший стиль в программировании,так как неправильная обработка свойства innerHTML может привести к атакам, связанным со script-инъекциями в частности XSS...
_sky вот написал пример получше и нагляднее для тебя с использованием таблицы и картинок(в частности с авиками),так что тебе легко будет разобраться и изменить сценарий под свой нужды...все (авики в табличной форме + html страница небольшая в папке и ) я упаковал в один архив..
вот код написаного мною скрипта:
чтобы картинки менялись при открытии страницы можешь кнопку на странице с обработкой события нажатия удалить и просто поместить функцию RandoAdd(); в раздел <BODY> в тег <script>
или если хочешь чтобы при каждом обновлении страницы картинки рандомились,то добавь обработчик события onload в тег тела следующим образом <BODY onLOAD="RandoAdd();">
если будут вопросы пиши мне в пм,или можешь просто тут отпостить;)
archive file : http://slil.ru/26110177
_sky вот написал пример получше и нагляднее для тебя с использованием таблицы и картинок(в частности с авиками),так что тебе легко будет разобраться и изменить сценарий под свой нужды...все (авики в табличной форме + html страница небольшая в папке и ) я упаковал в один архив..
вот код написаного мною скрипта:
Код:
<script language="JavaScript">
function loadimage() {
pic0 = new Image();
pic0.src = '304921697-5.jpg';
pic1 = new Image();
pic1.src = '594485739-5.jpg';
pic2 = new Image();
pic2.src = '599383315-5.jpg';
pic3 = new Image();
pic3.src = '755950542-5.jpg';
pic4 = new Image();
pic4.src = '793548241-5.jpg';
pic5 = new Image();
pic5.src = '801801555-5.jpg';
pic6 = new Image();
pic6.src = '1031654033-5.jpg';
pic7 = new Image();
pic7.src = '1435289265-5.jpg';
pic8 = new Image();
pic8.src = '1468196437-5.jpg';
pic9 = new Image();
pic9.src = '1760358145-5.jpg';
pic10 = new Image();
pic10.src = '2381839517-5.jpg';
pic11 = new Image();
pic11.src = '2641119681-5.jpg';
pic12 = new Image();
pic12.src = '2664437012-5.jpg';
pic13 = new Image();
pic13.src = '2718056597-5.jpg';
pic14 = new Image();
pic14.src = '2746236068-5.jpg';
pic15 = new Image();
pic15.src = '3648024516-5.jpg';
pic16 = new Image();
pic16.src = '3806461483-5.jpg';
pic17 = new Image();
pic17.src = '3886815905-5.jpg';
pic18 = new Image();
pic18.src = '3886815905-5.jpg';
pic18 = new Image();
pic18.src = '3938220240-5.jpg';
pic18 = new Image();
pic18.src = '4000882095-5.jpg';
picA = new Array(pic0,pic1,pic2,pic3,pic4,pic5,pic6,pic7,pic8,pic9,pic10,pic11,pic12,pic13,pic14,pic15,pic16,pic17,pic18);
}
//программа вывода в случайные ячейки!
function RandoAdd() {
for (i=0;i<=18;i++) {
index = Math.round(Math.random()*18);
if (document.images[index].src == picA.src) {
index++;
}
else {
document.images[index].src = picA.src;
index++;
}
}
}
function checkload() {
if (pic18.complete == false)
timer = setTimeout("checkload()",100);
}
function loadimage() {
pic0 = new Image();
pic0.src = '304921697-5.jpg';
pic1 = new Image();
pic1.src = '594485739-5.jpg';
pic2 = new Image();
pic2.src = '599383315-5.jpg';
pic3 = new Image();
pic3.src = '755950542-5.jpg';
pic4 = new Image();
pic4.src = '793548241-5.jpg';
pic5 = new Image();
pic5.src = '801801555-5.jpg';
pic6 = new Image();
pic6.src = '1031654033-5.jpg';
pic7 = new Image();
pic7.src = '1435289265-5.jpg';
pic8 = new Image();
pic8.src = '1468196437-5.jpg';
pic9 = new Image();
pic9.src = '1760358145-5.jpg';
pic10 = new Image();
pic10.src = '2381839517-5.jpg';
pic11 = new Image();
pic11.src = '2641119681-5.jpg';
pic12 = new Image();
pic12.src = '2664437012-5.jpg';
pic13 = new Image();
pic13.src = '2718056597-5.jpg';
pic14 = new Image();
pic14.src = '2746236068-5.jpg';
pic15 = new Image();
pic15.src = '3648024516-5.jpg';
pic16 = new Image();
pic16.src = '3806461483-5.jpg';
pic17 = new Image();
pic17.src = '3886815905-5.jpg';
pic18 = new Image();
pic18.src = '3886815905-5.jpg';
pic18 = new Image();
pic18.src = '3938220240-5.jpg';
pic18 = new Image();
pic18.src = '4000882095-5.jpg';
picA = new Array(pic0,pic1,pic2,pic3,pic4,pic5,pic6,pic7,pic8,pic9,pic10,pic11,pic12,pic13,pic14,pic15,pic16,pic17,pic18);
}
//программа вывода в случайные ячейки!
function RandoAdd() {
for (i=0;i<=18;i++) {
index = Math.round(Math.random()*18);
if (document.images[index].src == picA.src) {
index++;
}
else {
document.images[index].src = picA.src;
index++;
}
}
}
function checkload() {
if (pic18.complete == false)
timer = setTimeout("checkload()",100);
}
чтобы картинки менялись при открытии страницы можешь кнопку на странице с обработкой события нажатия удалить и просто поместить функцию RandoAdd(); в раздел <BODY> в тег <script>
или если хочешь чтобы при каждом обновлении страницы картинки рандомились,то добавь обработчик события onload в тег тела следующим образом <BODY onLOAD="RandoAdd();">
если будут вопросы пиши мне в пм,или можешь просто тут отпостить;)
archive file : http://slil.ru/26110177
Эээ ну вот так описывать n-картинок и отводить в каждой по строчке - не усть гут. Не легче сделать массив и в нем хранить картинки, а потом циклом присваивать.
Код:
Цитата: s0cks
Nixus использование атрибута обьектов innerHTML это не лучший стиль в программировании,так как неправильная обработка свойства innerHTML может привести к атакам, связанным со script-инъекциями в частности XSS...
Бред.
2 UAS замечание справедливое, просто я код за 2-3 минуты написал,а об оптимизации кода не успел подумал...
2 Nixus и в чем же это бред...к сожалению,это не одно мое субъективное мнение...а проверенное временем и программистами заключение!
2 Nixus и в чем же это бред...к сожалению,это не одно мое субъективное мнение...а проверенное временем и программистами заключение!
Цитата: s0cks
2 Nixus и в чем же это бред...к сожалению,это не одно мое субъективное мнение ...а проверенное временем условие!
Скажи сколько раз ты использовал innerHTML и у тебя были проблемы с XSS?
Цитата: s0cks
2 Nixus и в чем же это бред...к сожалению,это не одно мое субъективное мнение...а проверенное временем и программистами заключение!
Хочется увидеть пример атаки. Конкретный.