Need some help... how do I do this?

A

AbjectEvolution

New Member
Here is something I made in Illustrator which is the basic idea I have going for a web page for a band. I want the M logo to act as a music player and you can see the button symbols indicated on the sections of the eye surrounding the letter M. Above the M will be text that states the track that is playing.

I have some basic web design experience and I understand a bit of Dreamweaver, but I don't know much CSS. I am taking two web design classes next semester in College, but what I'm wanting here is a some discussion on how to turn the M into the music player that I want. What would be even better is if I could also make the button symbols only appear when you mouseover the sections. That way the M logo is clean otherwise.

A good example of a basic music player on another site is at www.puscifer.com. Some basic principle I think.

Any suggestions are appreciated. Thanks!

PS: I don't want to use Flash.


http://gallery.me.com/derekmecca/100017/myosisweb01/web.png
 
Last edited:
smoovo

smoovo

New Member
CSS and Players

Hi,

You can use the <map> tag to make the buttons click-able, then, use the player id and force it with Javascript to act.

Example.

HTML: 
<object id="MyPlayer" style="width:1px; height:1px; visibility:hidden;" classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="Showcontrols" value="False">
<param name="autoStart" value="False">
<param name="filename" value="youraudio.mp3">
<embed type="application/x-mplayer2" src="youraudio.mp3" name="MyPlayer"></embed>
</object>

<img src="your-image.png" width="100" height="100" alt="Player" usemap="#playermap" />

<map name="playermap">
  <area shape="circle" coords="10,10,10" alt="Play" onclick="document.getElementById('MyPlayer').controls.play();" />
  <area shape="circle" coords="30,10,10" alt="Stop" onclick="document.getElementById('MyPlayer').controls.stop();" />
</map>

Explore more controllers here.

Hope it helps... ;) - Enjoy.

____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com
 
You must log in or register to reply here.
Top