Я хочу, чтобы функция playSound()
выполняла свою работу в соответствии с id
выбранного (зависшего) изображения. Ничего из того, что я пробовал, не сработало, так что мне нужна полная помощь в этом.
Код:
var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");
function playSound() {
//if hovered image has id="x", do this
sound1.play();
//if hovered image has id="y", do this
sound2.play();
}
<a href="Okokoska.html"><img src="Pkokoska.jpg" id="x" onmouseover="playSound()" onmouseout="stop()"></a>
<a href="Okonj.html"><img src="Pkonj.jpg" id="y" onmouseover="playSound()" onmouseout="stop()"></a>
<audio id="audio1"><source src="Zkokoska.wav"></audio>
<audio id="audio2"><source src="Zkrava.wav"></audio>
4 ответа
Вы можете добавить this
в onmouseover="playSound(this)"
, чтобы передать зависший элемент.
Затем вы ловите его в функции:
function playSound(e) {
И используйте для сохранения идентификатора, затем просто сделайте оператор if.
let id = e.id;
var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");
function playSound(e) {
console.clear();
console.log(e.id);
let id = e.id;
if (id === "x") {
//if hovered image has id="x", do this
sound1.play();
console.log("Playing sound x");
} else if (id === "y") {
//if hovered image has id="y", do this
sound2.play();
console.log("Playing sound y");
}
}
<a href="Okokoska.html"><img src="Pkokoska.jpg" id="x" onmouseover="playSound(this)" onmouseout="stop()"></a>
<a href="Okonj.html"><img src="Pkonj.jpg" id="y" onmouseover="playSound(this)" onmouseout="stop()"></a>
<audio id="audio1"><source src="Zkokoska.wav"></audio>
<audio id="audio2"><source src="Zkrava.wav"></audio>
Передайте событие в качестве параметра в функции playSound , связанной с тегом img с помощью onclick , и получите доступ к нему в своей логике для проверки Я бы.
< Сильный > HTML
<a href="Okokoska.html"><img src="Pkokoska.jpg" id="x" onmouseover="playSound(event)" onmouseout="stop()"></a>
<a href="Okonj.html"><img src="Pkonj.jpg" id="y" onmouseover="playSound(event)" onmouseout="stop()"></a>
<audio id="audio1"><source src="Zkokoska.wav"></audio>
<audio id="audio2"><source src="Zkrava.wav"></audio>
< Сильный > JavaScript
var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");
function playSound(event) {
if(event.target.id == "x"){
sound1.play();
}else if(event.target.id == "y"){
sound2.play();
}
}
Старайтесь не использовать встроенный JavaScript, чтобы узнать больше, не следует его использовать, просто задайте этот вопрос поэтому из-за вышесказанного просто используйте addEventListener
или используйте назначение слушателя, например id.onclick = function(){}...
вот
Пример
var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");
var x = document.getElementById("x");
var y = document.getElementById("y");
x.onmouseover = () => {
sound1.play();
}
x.onmouseout = () => {
sound1.pause();
}
y.onmouseover = () => {
sound2.play();
}
y.onmouseout = () => {
sound2.pause();
}
<a href="Okokoska.html"><img src="Pkokoska.jpg"></a>
<a href="Okonj.html"><img src="Pkonj.jpg" id="y"></a>
<audio id="audio1"><source src="Zkokoska.wav"></audio>
<audio id="audio2"><source src="Zkrava.wav"></audio>
Или вы также можете увидеть пример ниже, надеюсь, вы найдете его полезным
var button = document.getElementById("button");
var audio = document.getElementById("player");
button.addEventListener("mouseover", function() {
audio.play();
button.innerHTML = "Play";
});
button.addEventListener("mouseout", function() {
audio.pause();
button.innerHTML = "Pause";
});
div {
display: block;
cursor: pointer;
width: 50px;
height: 50px;
background-color: #000000;
}
button {
cursor: pointer;
font-family: Tahoma;
font-weight: bold;
font-size: 14px;
background-color: #00ffff;
color: blue;
padding: 13px 6px;
}
<div>
<button id="button">Play</button>
</div>
<audio id="player">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>
Я давно не занимаюсь сценарием, но пробовали ли вы это (я не пробовал)?
function playSound(){
document.getElementById("x").addEventListener("click", function(){ document.getElementById("audio1").play()[0]; });
document.getElementById("y").addEventListener("click", function(){ document.getElementById("audio2").play()[0]; });
}
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.