Смена картинок при клике
Здравствуйте, надо чтоб при клике первая картинка сменялась второй, воспроизводился звук и возвращалась на первую, надо именно по клику а не через 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>
можете помочь? |
<!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>
А дальше разберитесь сами) Это я для общего представление как работать более удобнее. |
А так пробовал?
<!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>
|
Только playAudio не работает, надо переписать.
|
Спасибо всем.
да, там не my_media = new Media(src); а my_media = new Audio(src); должно быть, но не в этом суть....код работает также как мой, нажимаю на картинку, появляется вторая, но на исходную не возвращается |
надо чтоб именно возврат картинки был.
|
В смысле по клику. Можно извратиться так:
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") - это должен быть полный урл, иначе не сработает
}
|
вот чтоб при нажатии на опосума, воспр звук картинка сменялась на пингвина, музыка доигрывалась и появл снова картинка опосума
http://jsfiddle.net/fiphiker/CXa5G/1/ |
Ну значит так:
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 - это время которое проигрывается запись
|
Во шикарно, спасибо, тоже думал паузу поставить, не получилось, плюсану позже, когда будет можно)
|
| Часовой пояс GMT +3, время: 14:08. |