вывести изображения через js
Всем привет. начал только недавно в js разбираться и пока что все очень туго идет. Весь гугл перерыл, чтобы найти обычныый скрипт, который бы выводил изображение, но ничего не нашел(. В общем, помогите сделать такую штуку, добрые люди: есть скажем 100 изображений с названием 1,2,3 и так далее до 100. нужно вывести все эти изображения и обернуть их в ссылку, которая бы добавляла к их названию приставку "cards=". Заранее благодарен.
|
yomanswagVIP,
читайте документацию, ищите прелоад изображений. http://learn.javascript.ru/modifying-document для примера var container = document.createDocumentFragment(); for (var i = 1; i < 101; i++) { var a = document.createElement('a'); container.appendChild(a); var img = a.appendChild(document.createElement('img')); img.src = i + 'jpg'; } document.body.appendChild(container); |
что-то изображения на странице появляться не хотят. Кстати, они находятся у меня по такому пути /wp-content/uploads/cards . куда его нужно вставить в код, чтобы он работал?
|
yomanswagVIP,
img.src ='/wp-content/uploads/cards/' + i + 'jpg'; |
yomanswagVIP,
как я понял, то здесь ( img.src = i + 'jpg'; ), перед i надо добавить твой путь. Упс опоздал) |
рони,
можете здесь помочь плз http://javascript.ru/forum/misc/5329...lnostyu-2.html. |
DeV1doR,
тут вам надо читать http://learn.javascript.ru/vydelenie...ge-i-selection |
картинки выводит, но почему-то ниже самого футера. Причем, если заглянуть в f12, то там они их код(картинок) расположен именно там где нужно, а сами картинки ниже футера.
|
хотя нет, извиняюсь, обманул. И код этих картинок тоже почему-то ниже футера распологается
|
yomanswagVIP,
про appendChild почитать не побовали ? Цитата:
|
да что-то почитал, но не нашел как сделать, чтобы картинки появлялись именно в месте где вставлен скрипт
|
yomanswagVIP,
а вы забейте для них местечко а в скрипте его укажите. |
<div id="list"></div>
<script> var container = document.createDocumentFragment(); for (var i = 1; i < 4; i++) { var list = document.getElementById('list'); var div = document.createElement('div'); div.innerHTML = '' container.appendChild(div); var img = div.appendChild(document.createElement('img')); img.src ='http://topdeckmaster.ru/wp-content/uploads/cards/' + i + '.png'; } list.appendChild(div); </script> вот так вроде бы получилось вывести в div'e с id = 'list'. Но теперь он просто выводит только одну картинку. В чем тут ошибка? |
Цитата:
list.appendChild(container); Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
все также одну картинку выводит:
<script> var container = document.createDocumentFragment(d); for (var i = 0; i < 4; i++) { var list = document.getElementById('list'); var div = document.createElement('div'); div.innerHTML = ''; var img = div.appendChild(document.createElement('img')); img.src ='http://topdeckmaster.ru/wp-content/uploads/cards/' + i + '.png'; } list.appendChild(container); </script> |
yomanswagVIP,
ой :-? <!DOCTYPE HTML> <html> <head> <title>Untitled</title> </head> <body> <div id="list"></div> <script> var container = document.createDocumentFragment(), list = document.getElementById('list'); for (var i = 1; i < 4; i++) { var div = document.createElement('div'); container.appendChild(div); var img = div.appendChild(document.createElement('img')); img.src ='http://topdeckmaster.ru/wp-content/uploads/cards/' + i + '.png'; } list.appendChild(container); </script> </body> </html> |
Цитата:
|
а все надо было просто строки местами поменять вот эти:
var list = document.getElementById('list'); var div = document.createElement('div'); Кстати ваш вариант тоже работает. Спасибо огромное за помощь! |
Часовой пояс GMT +3, время: 00:43. |