Как отобразить одно и то же изображение на одной странице несколько раз?Образы JavaScript
<head>
<Script language="javascript">
function xdf(){
for (i=0;i<10;i++) {
document.write('<b>hello world</b><br>');
}
}
</script>
</head>
этот код отображает "hello world" 10 раз. я хотел бы то же самое, но с определенным изображением вместо «здравствуй слова» ...
Изменение:
document.write('<b>hello world</b><br>');
в:
document.write('<img src="IMAGE FILE NAME HERE.png" alt="TEXT HERE"><br>');
спасибо !! оно работает!! Я попытался сделать это сам ... но, очевидно, я его обманул .. :) – DrStrangeLove
Вы можете использовать document.createElement() создать img элемент в JavaScript, и Node.appendChild(), чтобы добавить его в какой-то другой узел:
var img = document.createElement('img');
img.setAttribute('src', 'my_image.png');
document.getElemenetById('some-div').appendChild(img);
Изображение загружается из кеша браузера, если указанное выше повторяется несколько раз, добавляя каждый новый элемент img к нескольким узлам.
Как @Matthew Flaschen предложил в комментарии ниже, вы можете также использовать Node.cloneNode() решение вместо этого. Вы можете создать свой img elment раз:
var img = document.createElement('img');
img.setAttribute('src', 'my_image.png');
... а затем использовать img.cloneNode(false) в качестве аргумента для appendChild():
document.getElemenetById('some-div').appendChild(img.cloneNode(false));
document.getElemenetById('some-other-div').appendChild(img.cloneNode(false));
Нет, вы не можете. Он будет перемещен. Вам придется клонировать его. –
@ Матвей: Вы правы. Исправлен мой ответ. –
Daniel, вероятно, означает «если вы создаете новый элемент изображения, установите src и добавьте его в другой элемент». Таким образом, нет необходимости клонировать. –
<img src="/path/to/img.png"/> <img src="/path/to/img.png"/>
можно клонировать изображения:
<div><img src="http://www.google.com/favicon.ico" id="image" /></div>
<script type="text/javascript">
n = 5;
img = document.getElementById("image");
for (i=0; i<n-1; i++) {
img2 = img.cloneNode(false);
img2.id = img.id + "_clone" + i;
img.parentNode.appendChild(img2);
}
</script>
он действительно работает !! Благодаря!! Но как клонировать их только вдоль левого края окна? без правой колонки ??? – DrStrangeLove
@DrStrangeLove вы можете, например. добавьте 'style =" float: left; clear: left "' to 'img', и, возможно, некоторое дополнение # – mykhal
.. или, может быть, вы хотите определить фон, используя CSS?
<style type="text/css">
body { background: url("http://www.google.com/favicon.ico") left repeat-y; }
</style>
(при условии вашего предыдущего комментария, что вы хотите иметь изображения в одной колонке на левом краю)
Можете ли вы быть более ясными? –
Ваш вопрос не имеет никакого смысла в al, не могли бы вы объяснить это немного лучше? И, возможно, добавьте код (при необходимости). –
HAL говорит мне, что есть сто тридцать семь правильных ответов на этот вопрос, основанный на его текущей форме. Можете ли вы сузить его для нас, предоставив больше информации? – karim79