View Single Post
Old 10-05-2012, 09:09 PM   PM User | #1
ted.johnson0988
New Coder

 
Join Date: May 2012
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
ted.johnson0988 is an unknown quantity at this point
How do I change CSS properties when a music player starts using JavaScript?

I have a music player on my page, the code for which is this:
Code:
<!--SCM Music Player by Adrian C Shum - http://scmplayer.net-->  
<script type="text/javascript" src="http://scmplayer.net/script.js" ></script>  
<script type="text/javascript">  
SCMMusicPlayer.init("{'skin':'skins/black/skin.css','playback':{'autostart':'true','shuffle':'true','volume':'40'},'playlist':[{'title':'2Spooky Battle','url':'http://a.tumblr.com/tumblr_mbdoptQ5LT1rte8jio1.mp3'}], 'onplay': function() {alert('playing');},'placement':'bottom','showplaylist':'false'}");  
</script>  
<!--End of SCM Music Player script-->
I also have two images, the codes for which look like this:
Code:
<html>
<head>
<style type="text/css">

#img1{
  position: fixed;
  right: 10px;
  bottom: 100px;
  z-index: 10;
  visibility:hidden;
}

#img2{
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 10;
  visibility:hidden;
}

</style>
</head>

<body>
  <img src="IMAGE1.png" id="img1">
  <img src="IMAGE2.png" id="img2">
</body>
</html>
I would like to work it so both of those become "visible" when the player starts. What would I need to add/take out/replace for this to work?
ted.johnson0988 is offline   Reply With Quote