Javascript-форум - Что нужно дописать в коде чтобы изображение менялось постоянно.

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Что нужно дописать в коде чтобы изображение менялось постоянно. (https://javascript.ru/forum/xhtml-html-css/29683-chto-nuzhno-dopisat-v-kode-chtoby-izobrazhenie-menyalos-postoyanno.html)

Что нужно дописать в коде чтобы изображение менялось постоянно.

Что нужно дописать в коде чтобы изображение менялось постоянно с 1 на 2, со 2 на 1 и так бесконечно пока курсор наведен на изображении, желательно с временем смены изображения.

Помогите очень надо, сам самоучка хочу для девушки открытку сделать.

Хочу вместо gif анимации скрипт написать, gif портит качество изображения.
вот тут http://nastenke.narod.ru/heart

КОД:

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image','','2s.png',0)"> <img src="1s.png" name="Image" width="462" height="401" border="0"></a>

Да вот типа так но чтоб на картинку когда наводишь курсов она изначала меняться а не на кнопку... Я просто не спец по этой теме но вот что сделал сам с 0

http://nastenke.narod.ru
http://nastenke.narod.ru/life

Обработчик onmouseover и onmouseout можно и на img повесить:
http://learn.javascript.ru/play/268j1

Ух ты классно то что нужно спасибо, а еще когда курсор отводишь от картинки можно сделать чтоб исходная картинка показывалась, просто если отвожу курсор от второй картинки то она остается... мне надо стук сердца сделать как тут http://nastenke.narod.ru/heart

У меня 2 картинки на каждую из них свой промежуток времени можно поставить, или нет? Ну так все замечательно, но было бы лучше, спасибо большой хоть 1 нормальный форум нашел где помогают :)

Почему то в опере не работает :( http://nastenke.narod.ru/heart

Все не надо работает все, только еще как сделать чтоб оно автоматически менялось без наведения курсора?

vadim90k,
там в коде написано: "тут время изменяй", стоит 100млс
======

Цитата:

Сообщение от vadim90k

Все не надо работает все, только еще как сделать чтоб оно автоматически менялось без наведения курсора?

В теге body напиши:

<body onload='start()'>
...
</body>

Мне еще един код нужен чтобы автоматически начинал работать принцип тот же самый циклическое повторение изображений по очереди

vadim90k,
я же сказал в body напиши:
<body onload='start()'></body>

Как объединить 2 этих кода и возможно ли это?

Циклическая смена картинок

<script type="text/javascript" language="javascript">
numimg=1;
imgslide=new Array()
imgslide[1]=new Image();
imgslide[2]=new Image();
imgslide[3]=new Image();
imgslide[4]=new Image();
imgslide[5]=new Image();
imgslide[6]=new Image();
imgslide[7]=new Image();
imgslide[8]=new Image();
imgslide[9]=new Image();
imgslide[10]=new Image();
imgslide[11]=new Image();
imgslide[12]=new Image();
imgslide[13]=new Image();
imgslide[14]=new Image();
imgslide[15]=new Image();
imgslide[16]=new Image();
imgslide[17]=new Image();
imgslide[1].src=".png";
imgslide[2].src=".png";
imgslide[3].src=".png";
imgslide[4].src=".png";
imgslide[5].src=".png";
imgslide[6].src=".png";
imgslide[7].src=".png";
imgslide[8].src=".png";
imgslide[9].src=".png";
imgslide[10].src=".png";
imgslide[11].src=".png";
imgslide[12].src=".png";
imgslide[13].src=".png";
imgslide[14].src=".png";
imgslide[15].src=".png";
imgslide[16].src=".png";
imgslide[17].src=".png";
function demoslides(){
document.img.src=imgslide[numimg].src;
numimg++;
if(numimg==17)
numimg=1;
setTimeout("demoslides()", 100)} // Время
</script>
<body onLoad="demoslides()">
<img name="img"/>


При наведение мышки меняется прозрачность

<script language="javascript">
function ok(){//Функция начальной установки прозрачности
di=document.images
for(c=1;c<=4;c++){
di['i'+c].src='files/loading.gif'
if (di['i'+c].filters){
di['i'+c].style.filter='alpha(opacity='+s+')'}
else{
di['i'+c].style.opacity=s/100}}}
//Временные единицы относительные, подбирать экспериментально
var up=20 //Время выполнения эффекта, появление
var dn=20 //Время выполнения эффекта, исчезновение
var s=10 //Начальная прозрачность, от 0
var r=30 //Конечная прозрачность, до 100
var x=25/up
var y=-25/dn
var z=new Array()
var timer=new Array()
function on(i){
if (timer[i.id]){clearInterval(timer[i.id])}
z[i.id]=x
timer[i.id]=setInterval(function(){return time(i)},up)}
function off(i){
clearInterval(timer[i.id])
z[i.id]=y
timer[i.id]=setInterval(function(){return time(i)},dn)}
function time(i){
if (i.filters){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity}
else{
c=i.style.opacity*100
c+=z[i.id]
i.style.opacity=c/100}
if (c<=s){if(i.filters){i.filters.alpha.opacity=s}els e{i.style.opacity=s/100};clearInterval(timer[i.id]);return}
if (c>=r){if(i.filters){i.filters.alpha.opacity=r}els e{i.style.opacity=r/100};clearInterval(timer[i.id]);return}
}
</script>
<body onload=ok()>
<p><img id=i1 onMouseOver=on(this) onMouseOut=off(this)></p>

vadim90k,
если ты хочешь добавить новые картинки, то в массив links запихивай новые ссылки.

Хочу чтобы картинки менялись цикличность и при наведение на них курсор они меняли прозрачность.

Первый код просто меняет картинки а второй при наведении на картинку просто меняет ее прозрачность...

vadim90k,
ну так я тебе и говорю.

var links = ['http://javascript.ru/cat/list/event.gif','http://javascript.ru/cat/list/libs.jpg']

Здесь 2 3 ссылки на картинки(последнюю я добавил свою аватарку), добавь сюда все нужные, и они будут меняться.

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <img onmouseover='start()' onmouseout='stop()' id='img'></img>
    <script>
	var links = ['http://javascript.ru/cat/list/event.gif','http://javascript.ru/cat/list/libs.jpg','http://javascript.ru/forum/image.php?u=12890&dateline=1303149256'],
    next = 1,
        img = document.getElementById('img');
      img.src = links[0]
        
      function change() {
        next == links.length-1 ? next = 0 : next++
		img.src = links[next]
          }
      function start() {
        animation = setInterval(change, 100) // тут время изменяй
          }
      function stop() {
        clearInterval(animation)
          img.src = 'http://javascript.ru/cat/list/event.gif' // тут исходная картинка
          }
    </script>

  </body>
</html>

да вот что мне нужно http://nastenke.narod.ru/ только чтобы вместо gif анимации это были отдельные кадры. И если навести на ту загрузку она меняет прозрачность.

хочу сделать также только с отдельными кадрами взятыми из gif

vadim90k,

<!DOCTYPE HTML>
<html>
  
  <head></head>
  
  <body onload='start()'>
    <img onmouseover='start2()' onmouseout='stop()' id='img'>
    <script>
      var links = ['http://javascript.ru/cat/list/event.gif', 'http://javascript.ru/cat/list/libs.jpg'] // тут ставишь ссылки на 2 меняющиеся картинки
      var opacity = ['http://api.flattr.com/button/flattr-badge-large.png', 'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif'],
        next = 1,
        next2 = 1,
        img = document.getElementById('img');
      img.src = links[0]


      function start() {
        animation = setInterval(function () {
	next == links.length - 1 ? next = 0 : next++
	img.src = links[next]
	}, 100) // тут время изменяй (для 2ух картинок)
        }

        function start2() {
	  clearInterval(animation)
          animation2 = setInterval(function () {
	next2 == opacity.length - 1 ? next2 = 0 : next2++
	img.src = opacity[next2]
	},100)
        }

        function stop(op) {
          clearInterval(animation2)
         start()
            img.src = 'http://javascript.ru/cat/list/event.gif' // тут исходная картинка
         
        }
    </script>
  </body>

</html>

Я уже не знаю, как тебе объяснить, просто в массив links вставь 2 картинки, в массив opacity вставь ссылки на картинки для смены прозрачности

Да я понимаю что этот код меняет картинки! Мне нужно чтобы он меня и при наведении на него менялась прозрачность! В этом коде я не вижу параметры прозрачности.

Что нужно дописать именно в этом коде что бы прорутка начиналась при наведении курсора?


<script type="text/javascript" language="javascript">
numimg=1;
imgslide=new Array()
imgslide[1]=new Image();
imgslide[2]=new Image();
imgslide[3]=new Image();
imgslide[1].src="../files/1s.png";
imgslide[2].src="../files/2s.png";
imgslide[3].src="../files/1s.png";
function demoslides(){
document.img.src=imgslide[numimg].src;
numimg++;
if(numimg==3)
numimg=1;
setTimeout("demoslides()", 300)} // Время
</script>
<body onLoad="demoslides()">
<a href="love"><img name="img"></a></img>

vadim90k,
буэ...это очень муторно (делать кросс) Лучше в photoshop'e измени прозрачность, сохрани, и загрузи на файлобменник, и добавь все ссылки, как я сказал в opacity

vadim90k,
может тебе удобно пользоваться этим кодом...) Я не знаю)
Ответ:

<img onmouseover='over()' src='http://javascript.ru/forum/image.php?u=12890&dateline=1303149256' onmouseout='out()'>
<script>
function over() {
alert('over')
}
function out() {
alert('out')
}
</script>

Все события в javascript