Более одной кнопки JS на странице с состоянием опрокидывания на странице

Я просто изучаю JS, чтобы у меня были кнопки с состояниями опрокидывания и звуковыми эффектами. Я делал очень хорошо, пока не устал добавлять дополнительные кнопки, из-за чего я потерял состояние опрокидывания.Более одной кнопки JS на странице с состоянием опрокидывания на странице

Вы можете увидеть мой пример одной кнопки здесь: http://www.ultralaboratories.com/sound1.html

И две кнопки здесь: http://www.ultralaboratories.com/sound2.html

Для простоты, я использовал ту же самую кнопку дважды, но там будет 5 уникальных кнопок, Я задолбался.

Любые мысли? Благодаря!

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
title>Untitled Document</title> 
    <audio id="audio_element" src="sound.mp3"></audio> 
<script> 
    var audio = document.getElementById("audio_element"); 
    audio.volume = 0; 
    audio.play(); 

    function playAudio() { 

     audio.currentTime = 0.01; 
     audio.volume = 1; 
     audio.play(); 

    } 
</script> 

<SCRIPT LANGUAGE="JavaScript"> 
    <!-- hide from non JavaScript Browsers 

    Rollimage = new Array() 

    Rollimage[0]= new Image(156,311) 
Rollimage[0].src = "/Images/Banner/e.up.jpg" 

    Rollimage[1] = new Image(156,311) 
    Rollimage[1].src = "/Images/Banner/e.over.jpg" 

    function SwapOut(){ 
    document.element.src = Rollimage[1].src; 
    return true; 
    } 

    function SwapBack(){ 
    document.element.src = Rollimage[0].src; 
    return true; 
} 

// - stop hiding   --> 
</SCRIPT> 

</head> 

<body> 
<div onmouseover="playAudio()"> 
<P align="center"> 
<A HREF="http://www.joemaller.com/" onmouseover="SwapOut()" onmouseout="SwapBack()">  <IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0> </A> 
<A HREF="http://www.joemaller.com/" onmouseover="SwapOut()" onmouseout="SwapBack()">  <IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0> </A> 

</P> 
</div>

источник

2012-04-24 Capm Petersen

попробуйте добавить

onmouseover="playAudio()"

к каждому IMG, а не ДИВ.

<IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0 onmouseover="playAudio()" \> 

<IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0 onmouseover="playAudio()" \>

Не забудьте закрыть ваши изображения теги \>

источник

2012-04-24 22:41:39 multimediaxp

Вы комбинируя HTML5 и HTML3.2 в документе ... Это действительно плохо.

Прежде всего, сокрытие JavaScript из старых браузеров является признаком того, что вы все еще живете в 90-х годах. Это больше не нужно.

Во-вторых, когда вы запрашиваете JavaScript для document.element, что вы имеете в виду? Если есть только один, это нормально, потому что это можно догадаться. С двумя или более, он не может. Чтобы узнать, какое изображение зависло, пройдите this в качестве аргумента SwapOut и SwapBack (то есть onmouseover="SwapOut(this)"). Затем возьмите этот аргумент и получите изображение из него. В этом случае elm.children[0] будет работать просто отлично (при условии, что вы назвали параметр elm). Выполняемые функции:

function SwapOut(elm) {elm.children[0].src = Rollimage[1].src;} 
function SwapBack(elm) {elm.children[0].src = Rollimage[0].src;}

(Вы можете даже объединить обе функции в одно и имеют 1 или 0 быть второй параметр)

Тогда всего несколько вещей о генплану: У вас есть аудио элемент голова, когда это элемент тела. Вы играете звук на нулевой громкости без всякой причины. Вы можете переместить getElementById в функцию, чтобы избежать ненужной глобальной переменной.

Наконец, вы должны использовать doctype HTML5 (а именно <!DOCTYPE html>), если хотите использовать элементы HTML5.

источник

2012-04-24 22:42:18

Отлично, это сделал трюк! Да, я пробрал некоторые найденные коды вместе, чтобы получить это далеко, и на самом деле нет опыта вне HTML и CSS, поэтому я ценю вашу помощь :-) –

Добавить идентификаторы к изображениям, а затем передать эти изображения идентификаторов в ваши функции подкачки:

<A HREF="http://www.joemaller.com/" onmouseover="SwapOut('image1')" onmouseout="SwapBack('image1')"> 
    <IMG ID="image1" SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0> 
</A> 
<A HREF="http://www.joemaller.com/" onmouseover="SwapOut('image2')" onmouseout="SwapBack('image2')"> 
    <IMG ID="image2" SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0> 
</A> 

function SwapOut(id) 
{ 
    document.getElementById(id).src = Rollimage[1].src; 
    return true; 
} 

function SwapBack(id) 
{ 
    document.getElementById(id).src = Rollimage[0].src; 
    return true; 
}

источник

2012-04-24 22:43:38

Для части изображения, более современный способ справиться с этим является использование CSS вместо , Вы слышали о CSS-спрайтах раньше? Они такие потрясающие! Они требуют небольшого производства изображений, но это того стоит. Вы можете поместить несколько кнопок (или фоны кнопок, стрелки, графические заголовки и т. Д.) В один большой спрайт, и он сокращает количество запросов HTTP.

<!-- HTML --> 
<a href="#" class="btn" id="someBtn">button</a> 
<a href="#" class="btn" id="someOtherBtn">button</a>

Приведенный ниже пример предполагает, что ваше изображение имеет два состояния кнопок, сложенных вместе (регулярное и зависающее). Переместите фоновое изображение на hover/focus и ouila! Интерактивность. Вы также можете настроить таргетинг более чем на одну кнопку с общим классом &, а затем изменить размер/положение по ID.

/* CSS */ 
a.btn { 
    background: transparent url(images/some-button-sprite.png) no-repeat; 
    display:block; 
} 
a#someBtn { 
    background-position:0 0; 
    height:25px; 
    width:100px; 
} 
a#someBtn:hover, 
a#someBtn:focus { 
    background-position: 0 -26px; 
}

источник

2012-04-24 22:50:02

Более одной кнопки JS на странице с состоянием опрокидывания на странице

ответ

Смежные вопросы