practice

　　　　

<html>

<meta charset="utf-8">
<style>
.画面_プレイ{position:absolute;
top:100px;
left:100px;
width:100px;
height:100px;
background-position:-12px -12px;
background-size:700px 700px;
background-image:url(TEST_buttons.jpg);
background-repeat:no-repeat;}
.画面_プレイ:hover{position:absolute;
top:100px;
left:100px;
width:100px;
height:100px;
background-position:-120px -12px;
background-size:700px 700px;
background-image:url(TEST_buttons.jpg);
background-repeat:no-repeat;}
.画面_プレイ:focus{position:absolute;
top:100px;
left:100px;
width:100px;
height:100px;
background-position:-120px -122px;
background-size:700px 700px;
background-image:url(TEST_buttons.jpg);
background-repeat:no-repeat;}
.スタンド_ばい .画面_プレイ{position:absolute;
top:100px;
left:100px;
width:100px;
height:100px;
background-position:-120px -12px;
background-size:700px 700px;
background-image:url(TEST_buttons.jpg);
background-repeat:no-repeat;}

.スタンド_ばい .画面_プレイ:focus{position:absolute;
top:100px;
left:100px;
width:100px;
height:100px;
background:url(TEST_buttons.jpg);
background-repeat:no-repeat;
background-position:-12px -122px;
background-size:700px 700px;

.ぷれい_リスト ul{list-style-type:none;
margin:0;
padding:0 20px;
font-size:14px;}
.ぷれい_リスト li{padding:5px 0 4px 20px;
border-bottom:1px solid #ffffff;}
.ぷれい_リスト li div{display:inline;}
div.プレイリスト div.ぷれい_リスト li:last-child{padding:5px 0 5px 20px;
border-bottom:none;}
div.プレイリスト div.ぷれい_リスト li.かれんと_リスト{list-style-type:square;
list-style-position:inside;
padding-left:7px;}
div.プレイリスト div.ぷれい_リスト a{color:#000000;
text-decoration:none;}
div.プレイリスト div.ぷれい_リスト a.かれんと_リスト{color:#aa0000;
font-weight:bold;}
div.プレイリスト div.ぷれい_リスト a:hover{color:#ff0000;
margin-left:2px;
font-weight:nomal;}
</style>

<script type="text/javascript"src="Rec_Play_7.js"></script>
<script>
$(document).ready(function(){new 連続移動Playlist({連続移動:"#せってぃんぐ",
cssSelectorAncestor:"#こんぽーねんと"},
[{title:"1. Bach_Invention_01",
mp3:"Rec_Play_8/Bach_Invention_01.mp3",},
{title:"2. Bach_Invention_02",
mp3:"Rec_Play_8/Bach_Invention_02.mp3",},
{title:"3. Bach_Invention_03",
mp3:"Rec_Play_8/Bach_Invention_03.mp3",},
{title:"4. Bach_Invention_13",
mp3:"Rec_Play_8/Bach_Invention_13.mp3",},
{title:"5. Beethoven_Sonata_No.8_2",
mp3:"Rec_Play_8/Beethoven_Sonata_No.8_2.mp3",},
{title:"6. Chopin_Nocturne",
mp3:"Rec_Play_8/Chopin_Nocturne.mp3",},
{title:"7. Debussy_Arabesque",
mp3:"Rec_Play_8/Debussy_Arabesque.mp3",},
{title:"8. Liszt_Hungarian_Rhapsody",
mp3:"Rec_Play_8/Liszt_Hungarian_Rhapsody.mp3",},
{title:"9. Mozart_Sonata",
mp3:"Rec_Play_8/Mozart_Sonata.mp3",},
{title:"10. Ravel_Pavane",
mp3:"Rec_Play_8/Ravel_Pavane.mp3",},
{title:"11. Schubert_Serenade",
mp3:"Rec_Play_8/Schubert_Serenade.mp3",},
{title:"12. Tchaikovsky_Waltz",
mp3:"Rec_Play_8/Tchaikovsky_Waltz.mp3",},
{title:"13. Vivaldi_Spring",
mp3:"Rec_Play_8/Vivaldi_Spring.mp3",}],
{swfPath:"#",supplied:"mp3",wmode:"window",useStateClassSkin:true,autoBlur:false,smoothPlayBar:true,keyEnabled:true});});
</script>

<div id="せってぃんぐ"></div>
<div id="こんぽーねんと">
<button class="画面_プリビアス">前の曲</button>
<button class="画面_プレイ"></button>
<button class="画面_ネクスト">次の曲</button>
<button class="画面_ストップ">ストップ</button>
<br><br><br><br><br><br><br><br>
<div class="ぷれい_リスト">
<ul>
<li> </li>
</ul>
</div>
</div>

</html>