Появление и исчезновение картинки(объекта) через определенное время.
 

Здравствуйте, понадобился такой скрипт для сайта, чтобы через определенное время появлялась картинка, повисела немного, и исчезла, а затем чтобы через определенное время все повторилось. В языке javascript совершенно не разбираюсь. Помогите пожалуйста. :help:

http://jsfiddle.net/t5T9E/5/ решение твоей проблемы

немного бы его доработать :-?

огромное спс даже не знаю как выразить свою радость, просто ради одного скрипта не хочется учить целый язык, хотя если честно даже интересно стало как свой проект закончу (с сайтом) возьмусь за самоучитель))) еще раз спс

_D1m0n_,
не губите свой сайт :cray:

а куда деваться просто у меня на сайте есть кнопки так сказать скрытые и вот хотел сделать как бы появляющиеся подсказки, я конечно знаю и понимаю что это можно было бы сделать и другими способами просто у меня там даже определенный сюжет назревает, который можно только таким образом решить. Да если честно я сам себя не понял))) Поэтому прикрепляю ИЗО

с картинками-ссылками я разобрался, а вот подсказки. Сайт делаю не для себя поэтому хотелось бы чтобы все было понятно)))

_D1m0n_, боле мене нормальная мигалка

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <style type='text/css'>
    #test{
    display:none;
}
  </style>
<script type='text/javascript'>
window.onload=function(){
var image = document.getElementById("test");
var i = 0, s = ["block","none"],t = [2000,5000]; //2 сек есть картинка, 5 сек нет
function show()
{  i ^= 1
   image.style.display = s[i];
    setTimeout(show,t[i]);
}
show()
}
</script>
</head>
<body>
  <img id="test"  src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
</body>
</html>

спс огромное

а как сделать для нескольких изображений?чтоб с различными интервалами появлялись?:help:

учить js!!!

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <style type='text/css'>
  .hide {
    opacity: 0;
  }

  </style>
<script type='text/javascript'>
window.onload=function(){
function toggle(id, range)
{
range = range||[2,5];//2 сек картинка появляется, 5 сек исчезает
var image = document.getElementById(id),
    i = 0, s = ["block","none"];
function show()
{
   //image.style.display = s[i];
   image.style.transition = 'all '+range[i]+'s';
   image.style.webkitTransition = 'all '+range[i]+'s';
   image.style.mozTransition = 'all '+range[i]+'s';
   image.style.oTransition = 'all '+range[i]+'s';
   image.className = i ? 'hide' : ''
   setTimeout(show,range[i]*1000);
   i ^= 1
}
show()
}
toggle('test')
toggle('ddd',[1,1])
toggle('bbb',[5,2])

}
</script>
</head>
<body>
  <img id="ddd"  src="http://javascript.ru/img/ws_1.png">
  <img id="test"  src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
  <img id="bbb"  src="http://im31.gulfup.com/jus2H.jpg">
</body>
</html>

спасибо большое,в процессе
а как сделать чтоб картинки изначально были скрыты?

Всё верно. Учить надо.
Помогите, пожалуйста, изменить данный (последний вариант) скрипт :help:
Очень нужно установить время показа картинки и паузу между показами. То есть интервал, через который плавно исчезнувшая картинка плавно появится вновь.

Спасибо.

всё это есть в 10 посте

В 10м посте указывается только время плавности появления и исчезания картинки, а интервалов показа и повтора нет. Картинка просто плавно мигает, быстрее или медленнее.

kay,
:-?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <style type='text/css'>
  img{
    -webkit-transition : all 1.8s;
    -moz-transition : all 1.8s;
    -o-transition : all 1.8s;
    transition : all 1.8s;
  }

  </style>
<script type='text/javascript'>
window.onload=function(){
function toggle(id, range)
{
range = range||[2,5];//2 сек картинка есть, 5 сек нет
var image = document.getElementById(id),
    i = 0;
function show()
{
   image.style.opacity = i ? 0 : 1;
   setTimeout(show,range[i]*1000);
   i ^= 1
}
show()
}

toggle('bbb',[10,5])

}
</script>
</head>
<body>
  <img id="bbb"  src="http://aromatmeda.ru/d/292096/d/419594603_6.jpg">
</body>
</html>

Да, огромное :thanks: !!!

Если можно, добавьте, пожалуйста, возможность появления картинок по очередности. Буду ОЧЕНЬ признателен!

kay,
:cray: http://javascript.ru/forum/dom-windo...tml#post346808
там на любой вкус ещё примеры

...попробовал изловчиться, взял кусочек кода для смены картинок из одного из предложенных Вами по ссылке кода и попытался вставить в этот скрипт :-?

а чем готовые решения не подходят? вам нужен слайдер ищите слайдер их сотни если не тысячи

дело в том что слайдер не подходит. :( нужен именно собственный скрипт, который должен показывать картинки, количеством до 10 штук, с определенным интервалом между ними и настраиваемым временем показа каждой из них. Показ картинок должен быть зациклен.

kay,
посмотрите всю тему по ссылке неужели там нет то что вы ищите

к сожалению нет :no:
в теме сначала идёт речь о временном появлении картинки поверх другой, а затем Ваш код, который просто плавно меняет картинки одну за другой.

тогда ничем не могу помочь

Подскажите пожалуйста, что нужно изменить в коде ниже, чтобы после исчезании картинки на её месте появился текст?

Заранее благодарен!

<script type="text/javascript">
window.onload=function(){
var image1 = document.getElementById("test");
var image2 = document.getElementById("test2");
var i = 0, s = ["block","none"],t = [8000,5000]; //2 сек есть картинка, 5 сек нет
function show(){ 
 i ^= 1
 image1.style.display = s[i];
 image2.style.display = s[i];
 setTimeout(show,t[i]);
}
show()
}
</script>

<img id="test" src="http://rswbox.ru/files/img515764.jpg">

rsw,
добавить test2 с текстом

Тогда текст будет исчезать вместе с картинкой, а мне нужно чтобы после исчезновении картинки, на её месте появился текст. Подскажите пожалуйста как это сделать если знаете. Я в java не очень силён :)

rsw,
:-?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
<script type="text/javascript">
window.onload=function(){
var image1 = document.getElementById("test");
var image2 = document.getElementById("test2");
var i = 0, s = ["block","none"],t = [8000,5000]; //2 сек есть картинка, 5 сек text
function show(){

 image1.style.display = s[i];
 i ^= 1
 image2.style.display = s[i];
 setTimeout(show,t[i]);
}
show()
}
</script>
</head>

<body>


<img id="test" src="http://rswbox.ru/files/img515764.jpg">
<div id="test2">text</div>
</body>

</html>

Помогло, большое спасибо!