Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.10.2012, 10:14
Новичок на форуме
Отправить личное сообщение для fiphiker Посмотреть профиль Найти все сообщения от fiphiker
 
Регистрация: 23.09.2012
Сообщений: 6

Смена картинок при клике
Здравствуйте, надо чтоб при клике первая картинка сменялась второй, воспроизводился звук и возвращалась на первую, надо именно по клику а не через mouseup и mouseover, делаю так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                          "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <title>Example</title>
           <style>
A.rollover {
 background: url('image/1.gif'); /* Путь к файлу с исходным рисунком */
 display: block; /* Рисунок как блочный элемент */
 width: 300px; /* Ширина рисунка */
 height: 400px; /* Высота рисунка */
 border: 1px solid #000; /* Рамка вокруг картинки */
}
</style>
        <script type="text/javascript" charset="utf-8">
 
        var my_media = null;
         function playAudio(src) {
               my_media = new Media(src);
               my_media.play();
               
        }
                </script>
      </head>
      <body>
        <center>
<a href="#" id="p1" class="rollover" 
onclick="javascript: this.style.backgroundImage='url(image/3.gif)';playAudio('1.mp3');" ></a>
</center>
 
      </body>
    </html>

можете помочь?
Ответить с цитированием
  #2 (permalink)  
Старый 03.10.2012, 10:38
Кандидат Javascript-наук
Отправить личное сообщение для Your Посмотреть профиль Найти все сообщения от Your
 
Регистрация: 03.10.2012
Сообщений: 147

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Example</title>
		<style type="text/css">
			a.link{display:block;width:300px;height:400px;border:1px solid #000;}
		</style>
        <script type="text/javascript">
			function media() {
				var self=this,
					setSrc=function() {};
					srcValue='';
				self.getSrc=function() {
					return srcValue;
				};
				setSrc=function(src) {
					srcValue=src;
				};
				self.play=function(mp3) {
					document.getElementById('play').innerHTML=mp3+' '+self.getSrc();
				};
				self.playAudio=function playAudio(src,mp3) {
					src.style.background='#000000';
					setSrc(src);
					self.play(mp3);
				};
			}
			var media=new media();
		</script>
</head>
<body>
	<span id="play"></span>
	<a href="" class="link" onclick="media.playAudio(this,'1.mp3');return false"></a>
</body>
</html>


А дальше разберитесь сами)

Это я для общего представление как работать более удобнее.

Последний раз редактировалось Your, 03.10.2012 в 11:02.
Ответить с цитированием
  #3 (permalink)  
Старый 03.10.2012, 10:44
Аватар для eirnvn
Кандидат Javascript-наук
Отправить личное сообщение для eirnvn Посмотреть профиль Найти все сообщения от eirnvn
 
Регистрация: 15.09.2011
Сообщений: 70

А так пробовал?

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
	<style>
			A.rollover {
		 background: url('media/img1.jpg'); /* Путь к файлу с исходным рисунком */
		 display: block; /* Рисунок как блочный элемент */
		 width: 300px; /* Ширина рисунка */
		 height: 400px; /* Высота рисунка */
		 border: 1px solid #000; /* Рамка вокруг картинки */
		}
</style>


	
        
      </head>
      <body>
        <center>
<a href="#" id="p1" class="rollover" ></a>
</center>
 <script type="text/javascript" charset="utf-8">
 
        var my_media = null;
         function playAudio(src) {
               my_media = new Media(src);
               my_media.play();
               
        }
		var link = document.getElementById('p1');
		link.onclick = function() {
		this.style.backgroundImage ='url(media/img3.jpg)';
		playAudio('1.mp3');	
		}
        </script>
</body>
</html>
__________________
"I don't write to say what I think, but to know what I think"

Последний раз редактировалось eirnvn, 03.10.2012 в 10:47.
Ответить с цитированием
  #4 (permalink)  
Старый 03.10.2012, 11:27
Аватар для eirnvn
Кандидат Javascript-наук
Отправить личное сообщение для eirnvn Посмотреть профиль Найти все сообщения от eirnvn
 
Регистрация: 15.09.2011
Сообщений: 70

Только playAudio не работает, надо переписать.
__________________
"I don't write to say what I think, but to know what I think"
Ответить с цитированием
  #5 (permalink)  
Старый 03.10.2012, 19:52
Новичок на форуме
Отправить личное сообщение для fiphiker Посмотреть профиль Найти все сообщения от fiphiker
 
Регистрация: 23.09.2012
Сообщений: 6

Спасибо всем.
да, там не my_media = new Media(src); а my_media = new Audio(src); должно быть, но не в этом суть....код работает также как мой, нажимаю на картинку, появляется вторая, но на исходную не возвращается
Ответить с цитированием
  #6 (permalink)  
Старый 03.10.2012, 19:56
Новичок на форуме
Отправить личное сообщение для fiphiker Посмотреть профиль Найти все сообщения от fiphiker
 
Регистрация: 23.09.2012
Сообщений: 6

надо чтоб именно возврат картинки был.
Ответить с цитированием
  #7 (permalink)  
Старый 03.10.2012, 22:45
Аватар для eirnvn
Кандидат Javascript-наук
Отправить личное сообщение для eirnvn Посмотреть профиль Найти все сообщения от eirnvn
 
Регистрация: 15.09.2011
Сообщений: 70

В смысле по клику. Можно извратиться так:
var link = document.getElementById('p1');
		
		link.onclick = function() {
		var computedStyle = this.currentStyle || getComputedStyle(this, '');
		
			
		this.style.backgroundImage = (computedStyle.backgroundImage =='url("file:///D:/Design/media/img1.jpg")')? 'url(media/img3.jpg)':'url(media/img1.jpg)';
//	url("file:///D:/Design/media/img1.jpg") - это должен быть полный урл, иначе не сработает	
		}
__________________
"I don't write to say what I think, but to know what I think"
Ответить с цитированием
  #8 (permalink)  
Старый 04.10.2012, 15:37
Новичок на форуме
Отправить личное сообщение для fiphiker Посмотреть профиль Найти все сообщения от fiphiker
 
Регистрация: 23.09.2012
Сообщений: 6

вот чтоб при нажатии на опосума, воспр звук картинка сменялась на пингвина, музыка доигрывалась и появл снова картинка опосума
http://jsfiddle.net/fiphiker/CXa5G/1/
Ответить с цитированием
  #9 (permalink)  
Старый 05.10.2012, 08:17
Аватар для eirnvn
Кандидат Javascript-наук
Отправить личное сообщение для eirnvn Посмотреть профиль Найти все сообщения от eirnvn
 
Регистрация: 15.09.2011
Сообщений: 70

Ну значит так:
var link = document.getElementById('p1');
		
		link.onclick = function() {
		this.style.backgroundImage ='url(media/img3.jpg)';
		setTimeout(function(){link.style.backgroundImage ='url(media/img1.jpg)';}, 2000);
		}
//2000 - это время которое проигрывается запись
__________________
"I don't write to say what I think, but to know what I think"
Ответить с цитированием
  #10 (permalink)  
Старый 05.10.2012, 15:46
Новичок на форуме
Отправить личное сообщение для fiphiker Посмотреть профиль Найти все сообщения от fiphiker
 
Регистрация: 23.09.2012
Сообщений: 6

Во шикарно, спасибо, тоже думал паузу поставить, не получилось, плюсану позже, когда будет можно)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 17:08
копирование в Буфер при клике на картинку Павел Общие вопросы Javascript 7 14.07.2013 00:51
Подсветка области при клике Happening Общие вопросы Javascript 0 30.04.2011 15:01
Двойное действие при клике по ссылке spider Элементы интерфейса 5 10.11.2009 10:43
При первом клике список не раскрывается. lancer Элементы интерфейса 1 30.03.2008 17:24