Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.09.2011, 14:49
Аспирант
Отправить личное сообщение для goooooch Посмотреть профиль Найти все сообщения от goooooch
 
Регистрация: 24.10.2010
Сообщений: 46

Простейший двухстрочны скрипт. Нужна помошь.
Здравствуйте.
Я не кодер, поэтому не бейте палками.
Задача такая — есть хтмл-код

<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" соответствующую картинку при наведении на ссылку.

Помогите ее написать.
Ответить с цитированием
  #2 (permalink)  
Старый 23.09.2011, 15:14
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

var imgOn = function(img){
  return function(src){
    img.src = src;
  };
}( document.getElementById( "img1" ) );
Ответить с цитированием
  #3 (permalink)  
Старый 23.09.2011, 15:27
Аспирант
Отправить личное сообщение для goooooch Посмотреть профиль Найти все сообщения от goooooch
 
Регистрация: 24.10.2010
Сообщений: 46

Вставил код в хтмл-страницу, желаемого результата почему-то нет, картинка не меняется...
<script type="text/javascript">
	var imgOn = function(img){
	  return function(src){
	    img.src = src;
	  };
	}( document.getElementById( "img1" ) );
</script>
Ответить с цитированием
  #4 (permalink)  
Старый 23.09.2011, 15:31
Профессор
Отправить личное сообщение для Триви Посмотреть профиль Найти все сообщения от Триви
 
Регистрация: 23.04.2010
Сообщений: 354

Вот вам по простому:
<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>
Ответить с цитированием
  #5 (permalink)  
Старый 23.09.2011, 16:06
Аспирант
Отправить личное сообщение для goooooch Посмотреть профиль Найти все сообщения от goooooch
 
Регистрация: 24.10.2010
Сообщений: 46

Дело в том, что картинок много и преиодически их приходится менять. Раньше было какое-то универсальное решение, достаточно было прописать картинки в атрибуте у ссылки...
Ответить с цитированием
  #6 (permalink)  
Старый 23.09.2011, 16:11
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Сообщение от goooooch
Вставил код в хтмл-страницу, желаемого результата почему-то нет, картинка не меняется...
Скрипт должен быть ниже, чем <img id="img1">.
Ответить с цитированием
  #7 (permalink)  
Старый 23.09.2011, 21:07
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от goooooch Посмотреть сообщение
Дело в том, что картинок много и преиодически их приходится менять. Раньше было какое-то универсальное решение, достаточно было прописать картинки в атрибуте у ссылки...
какое универсальное решение?

Триви предложил вам решение проблемы. что не так?
Ответить с цитированием
  #8 (permalink)  
Старый 24.09.2011, 13:58
Профессор
Отправить личное сообщение для Триви Посмотреть профиль Найти все сообщения от Триви
 
Регистрация: 23.04.2010
Сообщений: 354

Сообщение от goooooch Посмотреть сообщение
Дело в том, что картинок много и преиодически их приходится менять. Раньше было какое-то универсальное решение, достаточно было прописать картинки в атрибуте у ссылки...
Просто в скрипте нужно обязательно делать предварительную загрузку картинок,
иначе она начинает подгружаться только при наведении мышью на ссылку.
Прописал вам автоматическую предварительную загрузку.
Ссылки обязательно помещать в контейнер с 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна помошь Mr.MyHup Общие вопросы Javascript 9 30.12.2010 20:39
Нужна помошь Sa!nT Общие вопросы Javascript 1 06.05.2009 23:54
Нужна помошь по protosafe prihod Prototype & script.aculo.us 2 03.10.2008 10:16