Простейший двухстрочны скрипт. Нужна помошь.
Здравствуйте.
Я не кодер, поэтому не бейте палками. Задача такая — есть хтмл-код
<img id="img1" srс="/images/img1.jpg" alt=""/>
<a onmouseover="imgOn ('/images/img2.jpg')" href="">Картинка2</a>
<a onmouseover="imgOn ('/images/img3.jpg')" href="">Картинка3</a>
<a onmouseover="imgOn ('/images/img4.jpg')" href="">Картинка4</a>
Потерялась функция imgOn, которая "вставляла" в src для img id="img1" соответствующую картинку при наведении на ссылку. Помогите ее написать. |
var imgOn = function(img){
return function(src){
img.src = src;
};
}( document.getElementById( "img1" ) );
|
Вставил код в хтмл-страницу, желаемого результата почему-то нет, картинка не меняется...
<script type="text/javascript">
var imgOn = function(img){
return function(src){
img.src = src;
};
}( document.getElementById( "img1" ) );
</script>
|
Вот вам по простому:
<script type='text/javascript'>
pic = new Image();
pic.src="http://img81.imageshack.us/img125/1945/hay21yz1.gif";
pic.src="http://photos3.fotosearch.com/bthumb/CSP/CSP254/k2540937.jpg";
pic.src="http://img-fotki.yandex.ru/get/4512/svetlera.44/0_50908_410dc7a8_S.jpg";
function imgOn (img) {
document.getElementById("img1").src = img;
}
</script>
<div style="height:150px">
<img id="img1" src="http://img-fotki.yandex.ru/get/5503/svetlera.1b3/0_57c30_ca388126_S.jpg" alt="" />
</div>
<br />
<a onmouseover="imgOn ('http://img81.imageshack.us/img125/1945/hay21yz1.gif')" href="">Картинка2</a> |
<a onmouseover="imgOn ('http://photos3.fotosearch.com/bthumb/CSP/CSP254/k2540937.jpg')" href="">Картинка3</a> |
<a onmouseover="imgOn ('http://img-fotki.yandex.ru/get/4512/svetlera.44/0_50908_410dc7a8_S.jpg')" href="">Картинка4</a>
|
Дело в том, что картинок много и преиодически их приходится менять. Раньше было какое-то универсальное решение, достаточно было прописать картинки в атрибуте у ссылки...
|
Цитата:
|
Цитата:
Триви предложил вам решение проблемы. что не так? |
Цитата:
иначе она начинает подгружаться только при наведении мышью на ссылку. Прописал вам автоматическую предварительную загрузку. Ссылки обязательно помещать в контейнер с id='links'. Может кто получше вариант предложит, я тока там могу ))
<script type='text/javascript'>
window.onload = function() {
var str = document.getElementById("links").innerHTML,
regexp = /"imgOn\s*\(\'(.+)\'\)"/gi,
imgArr = [];
for(var i=0; matches = regexp.exec(str); i++) {
imgArr[i] = new Image();
imgArr[i].src = matches[1];
}
}
function imgOn (img) {
document.getElementById("img1").src = img;
}
</script>
<div style="height:150px">
<img id="img1" src="http://img-fotki.yandex.ru/get/5503/svetlera.1b3/0_57c30_ca388126_S.jpg" alt="" />
</div>
<br />
<div id='links'>
<a onmouseover="imgOn('http://img81.imageshack.us/img125/1945/hay21yz1.gif')" href="">Картинка2</a> |
<a onmouseover="imgOn ('http://photos3.fotosearch.com/bthumb/CSP/CSP254/k2540937.jpg')" href="">Картинка3</a> |
<a onmouseover="imgOn ('http://img-fotki.yandex.ru/get/4512/svetlera.44/0_50908_410dc7a8_S.jpg')" href="">Картинка4</a>
</div>
|
| Часовой пояс GMT +3, время: 03:58. |