<style>

    div#linkek
    {
	margin           : 36px 48px            ;
	padding          : 16px 160px 16px 36px ;
	width            : 96px                 ;
	border           : solid 2px #008       ;
	border-radius    : 12px                 ;
	background-color : #EEF                 ;
	text-align       : center               ;
	line-height      : 32px                 ;
    }

    div#linkek a
    {
	color            : #006                 ;
	font-weight      : bold                 ;
	text-decoration  : none                 ;
    }

    div#linkek img.abra
    {
	float            : right                ;
	margin-right     :-128px                ;
	width            : 108px                ;
    }

    div#linkek a:hover
    {
	color            : #00F                 ;
    }

    div#hang
    {
	display          : none                 ;
    }

    audio
    {
	width            : 232px                ;
    }

@media screen and (orientation: portrait) 
{

    div#hang
    {
	width            : 232px                ;
	height           :  48px                ;
	padding-bottom   :  16px                ;
	display          : block                ;
    }

}

</style>



<div id='linkek'>

    <img src='headset.png' class='abra'>

    <a href='javascript:' onClick=' lejatszas("szúnyog") '> Szúnyog </a><br>
    <a href='javascript:' onClick=' lejatszas("bárány")  '> Bárány  </a><br>
    <a href='javascript:' onClick=' lejatszas("malac")   '> Malac   </a><br><br>

    <div id=hang><audio controls></audio></div>

    <input type=button    onClick=' lejatszas("csend")   '  value='Némítás'>

</div>



<script>

    function lejatszas(x)
    {

	if( x=="szúnyog" )   hang.innerHTML = "<audio controls autoplay><source src='./hangok/mosquito.mp3' type='audio/mpeg'></audio>"  
	if( x=="bárány"  )   hang.innerHTML = "<audio controls autoplay><source src='./hangok/sheep.mp3'    type='audio/mpeg'></audio>"  
	if( x=="malac"   )   hang.innerHTML = "<audio controls autoplay><source src='./hangok/pig.mp3'      type='audio/mpeg'></audio>"  

	if( x=="csend"   )   hang.innerHTML = "<audio controls></audio>"

    }

</script>