Форум

fiphiker · #1 (**permalink**) 03.10.2012, 10:14

Здравствуйте, надо чтоб при клике первая картинка сменялась второй, воспроизводился звук и возвращалась на первую, надо именно по клику а не через 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>

можете помочь?

Your · #2 (**permalink**) 03.10.2012, 10:38

<!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>

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

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

eirnvn · #3 (**permalink**) 03.10.2012, 10:44

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

<!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>

eirnvn · #4 (**permalink**) 03.10.2012, 11:27

Только playAudio не работает, надо переписать.

fiphiker · #5 (**permalink**) 03.10.2012, 19:52

Спасибо всем.
да, там не my_media = new Media(src); а my_media = new Audio(src); должно быть, но не в этом суть....код работает также как мой, нажимаю на картинку, появляется вторая, но на исходную не возвращается

fiphiker · #6 (**permalink**) 03.10.2012, 19:56

надо чтоб именно возврат картинки был.

eirnvn · #7 (**permalink**) 03.10.2012, 22:45

В смысле по клику. Можно извратиться так:

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") - это должен быть полный урл, иначе не сработает	
		}

fiphiker · #8 (**permalink**) 04.10.2012, 15:37

вот чтоб при нажатии на опосума, воспр звук картинка сменялась на пингвина, музыка доигрывалась и появл снова картинка опосума
http://jsfiddle.net/fiphiker/CXa5G/1/

eirnvn · #9 (**permalink**) 05.10.2012, 08:17

Ну значит так:

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 - это время которое проигрывается запись

fiphiker · #10 (**permalink**) 05.10.2012, 15:46

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

Форум

Справочник

Discord чат

Курсы javascript