Замена .swf файлов по нажатию на кнопку

276

15 декабря 2016, 16:21

Есть 2 кнопки. Нужно, чтобы при нажатии на них в определенной точке менялись .swf файлы.

Каждой кнопке соответствует определенный .swf файл. Т.е. нажал одну, показывает один файл, нажал другую, на его месте появился второй.

CSS:

.btn1 {
    margin: 2px;
    padding: 2px;
    width: 32px;
    height: 32px;
    float: left;
    cursor: pointer;
    border: 1px solid gray;
    background-color: #ccc;
    color: white;
    padding: 3px;
}
.btn1:hover { }
.btn2 {
    margin: 2px;
    padding: 2px;
    width: 32px;
    height: 32px;
    float: left;
    cursor: pointer;
    border: 1px solid gray;
    background-color: #cco;
    color: white;
    padding: 3px;
}
.btn2:hover { }

HTML:

<div>
    <button class="btn1"></button>
</div>
<div>
    <button class="btn2"></button>
</div>
<div align="center" style="width:640px;background-color:#ddd; margin:auto;margin-top:5%; border: solid 1px black; height: 340px; }">
    <div style="float:left;">
        <embed src="start.bmp" width="320" height="340"></embed>
    </div>

Вместо "start.bmp" должны появляться .swf, находящиеся в той же папке, что и HTML файл.

Answer 1

Для того, чтобы заменить src у embed при нажатии на кнопки .btn1 и .btn2, можно:

Добавить обработчики события click кнопкам после полной загрузки документа.
Внутри обработчика поменять src у embed на заданное значение.

Код:

document.addEventListener('DOMContentLoaded', onDomReady); 
 
function onDomReady() { 
    var button1 = document.getElementsByClassName('btn1')[0]; 
    var button2 = document.getElementsByClassName('btn2')[0]; 
    var embed = document.getElementsByTagName('embed')[0]; 
     
    button1.addEventListener('click', function() { 
        embed.src = "first.swf"; 
    });         
    button2.addEventListener('click', function() { 
        embed.src = "second.swf"; 
    });  
};

<div> 
    <button class="btn1">first</button> 
</div> 
<div> 
    <button class="btn2">second</button> 
</div> 
<div align="center" style="width:640px;background-color:#ddd; margin:auto;margin-top:5%; border: solid 1px black; height: 340px; }"> 
    <div style="float:left;"> 
        <embed src="start.bmp" width="320" height="340"/> 
    </div> 
</div>

Какие минимальные доработки я бы провёл:

Сделал бы кнопкам единый класс для единой обработки их нажатия. Ссылку на связанный .swf файл добавил бы в качестве атрибута. Например, атрибут data-src.
Стили у div'ов, в которые обёрнут embed, вынес бы в CSS файл.
Добавил бы embed ID для того, чтобы "не промахнуться" при выборе нужного embed.

document.addEventListener('DOMContentLoaded', onDomReady); 
 
function onDomReady() { 
    var shownObject = document.getElementById('shownObject'); 
    var buttons = document.getElementsByClassName('btn'); 
    var buttonClickHandler = function() { 
        shownObject.src = this.getAttribute('data-src'); 
    }; 
    for (var i = 0; i < buttons.length; i++) { 
        buttons[i].addEventListener('click', buttonClickHandler); 
    } 
};

.objectContainer { 
    width: 640px; 
    background-color: #ddd; 
    margin: auto; 
    margin-top: 5%; 
    border: solid 1px black; 
    height: 340px; 
} 
 
.objectFloat { 
    float: left; 
}

<div> 
    <button class="btn" data-src="first.swf">first</button> 
</div> 
<div> 
    <button class="btn" data-src="second.swf">second</button> 
</div> 
<div align="center" class="objectContainer"> 
    <div class="objectFloat"> 
        <embed id="shownObject" src="start.bmp" width="320" height="340"/> 
    </div> 
</div>

И то же самое с jQuery:

$(document).ready(function() { 
    var shownObject = $('#shownObject')[0]; 
    $('.btn').on('click', function() { 
        shownObject.src = $(this).data('src'); 
    }); 
});

.objectContainer { 
    width: 640px; 
    background-color: #ddd; 
    margin: auto; 
    margin-top: 5%; 
    border: solid 1px black; 
    height: 340px; 
} 
 
.objectFloat { 
    float: left; 
}

<div> 
    <button class="btn" data-src="first.swf">first</button> 
</div> 
<div> 
    <button class="btn" data-src="second.swf">second</button> 
</div> 
<div align="center" class="objectContainer"> 
    <div class="objectFloat"> 
        <embed id="shownObject" src="start.bmp" width="320" height="340"/> 
    </div> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>