Форум PHP программистов > как запускать по наведению мыши

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: как запускать по наведению мыши

dimonise

9.11.2011 - 23:56

всем привет! подскажите как можно сделать такое - есть картинка, наводим на нее мышку - она заменяется на другую и тут же на третью, убираем мышку - идет замена на четвертую и переход опять к третьей. во накрутил...
смысл какой есть gif - бабочка крыльями машет, наводим стрелку - бабочка поднимается и меняет цвет (тоже gif) так вот нужно сделать так чтоб не убирая стрели появлялось продолжение для второго gif ? а при убирании мыши шел четвертый gif и переходил в первый

делаю так:



<script language="javascript">
function changeImage() {
                 document.images.MyImage.src="2.gif"
				
}

function changeBack() {
                 document.images.MyImage.src="1.gif"
}
</script>

<img alt="" name="MyImage" src="1.gif" onMouseOver="changeImage()" onMouseOut="changeBack()"/>

Спустя 5 минут, 55 секунд (9.11.2011 - 23:02) Winston написал(а):

А так переписать скрипт ?

<script language="javascript">

function sleep (msec)
{
  var start = new Date().getTime();
 
  while (new Date().getTime() - start < msec);
}


function changeImage() {
                document.images.MyImage.src="2.gif"
				sleep(500);
               document.images.MyImage.src="3.gif"
}

function changeBack() {
                 document.images.MyImage.src="4.gif"
                 sleep(500);
                 document.images.MyImage.src="3.gif"
}
</script>

Спустя 15 минут, 55 секунд (9.11.2011 - 23:18) dimonise написал(а):

нет не получается - не запускает 2. gif и 4. gif

Спустя 5 минут, 37 секунд (9.11.2011 - 23:23) Winston написал(а):

Цитата (dimonise @ 9.11.2011 - 22:18)

нет не получается - не запускает 2. gif и 4. gif

Как это? :blink:
Если так попробовать


function changeImage() {
                //document.images.MyImage.src="2.gif"
                alert(2);
				sleep(500);
				alert(3);
               //document.images.MyImage.src="3.gif"
}

function changeBack() {
                 //document.images.MyImage.src="4.gif"
                 alert(4);
                 sleep(500);
                 alert(3);
                 //document.images.MyImage.src="3.gif"
}
</script>
<img alt="" name="MyImage" src="1.gif" onMouseOver="changeImage()" onMouseOut="changeBack()"/>

То все работает как надо.

Спустя 4 минуты, 53 секунды (9.11.2011 - 23:28) dimonise написал(а):

ну не знаю... тупо пропускает загрузку тех картинок которые идут перед sleep

Спустя 54 секунды (9.11.2011 - 23:29) Winston написал(а):

А если sleep увеличить ? до 2 сек. (2000)

Спустя 2 минуты, 26 секунд (9.11.2011 - 23:31) dimonise написал(а):

нет если увеличивать sleep просто задержка появляется перед картинкой а предидущую не грузит

кстати

function changeImage() {
                //document.images.MyImage.src="2.gif"
                alert(2);
				sleep(500);
				alert(3);
               //document.images.MyImage.src="3.gif"
}

function changeBack() {
                 //document.images.MyImage.src="4.gif"
                 alert(4);
                 sleep(500);
                 alert(3);
                 //document.images.MyImage.src="3.gif"
}

тоже не работает :( тоже выдает сначала алерт с 2 а потом только с 4

Спустя 11 минут, 28 секунд (9.11.2011 - 23:43) sergeiss написал(а):

Winston - у тебя, кстати, возврат идет к 3-й картинке, а ТС хотел к 1-й вернуться :) Впрочем, может он и к 3-й хотел... Не важно :)

К тому же, твой код на самом деле нерабочий.

Вот так работает (и не надо изобретать велосипед с функцией sleep, когда есть штатные средства)

function changeImage() {
                document.images.MyImage.src="../pictures/test/2.gif"
               setTimeout( 'document.images.MyImage.src="../pictures/test/3.gif"', 500);
}

function changeBack() {
                 document.images.MyImage.src="../pictures/test/4.gif"
                 setTimeout( 'document.images.MyImage.src="../pictures/test/1.gif"', 500);
}

PS. Пути к картинкам - мои, надо заменить на те, что у ТС используются.

PPS. И еще, возможно, надо сделать некую защиту от того, что юзер может убрать мышку и ранее, чем через 500 мс. Тогда порядок показа картинок будет непонятный. Но это, может быть, и не проблема.

И еще добавка :) http://javascript.ru/setTimeout - описалово функции

Спустя 2 дня, 20 часов, 24 минуты, 48 секунд (12.11.2011 - 20:08) dimonise написал(а):

спасибо! все работает!

Быстрый ответ:

Здесь расположена полная версия этой страницы.