Sweet Obsession

Music Boxes - iPods

Please link back if you use any of these on your site!

See examples of diffent colours (click here). To see a working example (click here).

These were all made by me, do not redistribute them or claim that you made them.

Instructions
Copy code 1 and paste into a new notepad document, change the songs, it tells you how to do that in the code when you've done that save it as music.html (or something that you'll remeber) and upload it, if you're using piczo, myspace, or something simalar make an account on freewebs and upload it there.
Next copy copy code 2 if you want you music box the open in a pop-up window (which is best for div layouts & piczos) and paste it on the page you want the link to be.

If you just want your music box to just be on your page copy code 3 onto the page you want it to appear (this works well when put it an iframe on an iframe layout).

Silver iPod code 1 <html><head><title>Music</title> <style type="text/css"> A:link{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:visited{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:active{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:hover{color:#FFFFFF;background-image:url("/http://i20.photobucket.com/albums/b202/clare12/music/ipodbg.gif");text-decoration:none;} </style></head><body> <iframe frameborder="0" width="1" height="1" marginheight="0" marginwidth="0" scrolling="no" name="music2" allowtransparency="true" scrolling=no></iframe> <div style="position:absolute; top:0; left:0;"> <img src="http://i20.photobucket.com/albums/b202/clare12/music/ipod1.gif" NAME="Image20" USEMAP="#Image2" border="0"> <MAP NAME="Image2"> <AREA SHAPE="rect" COORDS="35,202,59,217" HREF="javascript:history.go(-1)"> <AREA SHAPE="rect" COORDS="120,202,144,218" HREF="javascript:history.go(1)"> <AREA SHAPE="rect" COORDS="78,249,99,265" HREF="stop.php" TARGET="music2"> </MAP> </div> <div style="position:absolute; top:30; left:15; width:150px; height:97px;overflow: auto;"> <!-- to add songs to your box change SONG to the name of the song and artist. Copy and paste a music code into a new notepad document call it 1.html then 2.html etc. then upload. --> <a 1.html" target="music2">SONG</a> <a 2.html" target="music2">SONG</a> <a 3.html" target="music2">SONG</a> <a 4.html" target="music2">SONG</a> <a 5.html" target="music2">SONG</a> </div></body></html>	Blue iPod code 1 <html><head><title>Music</title> <style type="text/css"> A:link{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:visited{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:active{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:hover{color:#FFFFFF;background-image:url("/http://i20.photobucket.com/albums/b202/clare12/music/ipodbg.gif");text-decoration:none;} </style></head><body> <iframe frameborder="0" width="1" height="1" marginheight="0" marginwidth="0" scrolling="no" name="music2" allowtransparency="true" scrolling=no></iframe> <div style="position:absolute; top:0; left:0;"> <img src="/http://i20.photobucket.com/albums/b202/clare12/music/ipod2.gif" NAME="Image20" USEMAP="#Image2" border="0"> <MAP NAME="Image2"> <AREA SHAPE="rect" COORDS="35,202,59,217" HREF="javascript:history.go(-1)"> <AREA SHAPE="rect" COORDS="120,202,144,218" HREF="javascript:history.go(1)"> <AREA SHAPE="rect" COORDS="78,249,99,265" HREF="stop.php" TARGET="music2"> </MAP> </div> <div style="position:absolute; top:30; left:15; width:150px; height:97px;overflow: auto;"> <!-- to add songs to your box change SONG to the name of the song and artist. Copy and paste a music code into a new notepad document call it 1.html then 2.html etc. then upload. --> <a 1.html" target="music2">SONG</a> <a 2.html" target="music2">SONG</a> <a 3.html" target="music2">SONG</a> <a 4.html" target="music2">SONG</a> <a 5.html" target="music2">SONG</a> </div></body></html>
Pink iPod code 1 <html><head><title>Music</title> <style type="text/css"> A:link{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:visited{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:active{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:hover{color:#FFFFFF;background-image:url("/http://i20.photobucket.com/albums/b202/clare12/music/ipodbg.gif");text-decoration:none;} </style></head><body> <iframe frameborder="0" width="1" height="1" marginheight="0" marginwidth="0" scrolling="no" name="music2" allowtransparency="true" scrolling=no></iframe> <div style="position:absolute; top:0; left:0;"> <img src="/http://i20.photobucket.com/albums/b202/clare12/music/ipod3.gif" NAME="Image20" USEMAP="#Image2" border="0"> <MAP NAME="Image2"> <AREA SHAPE="rect" COORDS="35,202,59,217" HREF="javascript:history.go(-1)"> <AREA SHAPE="rect" COORDS="120,202,144,218" HREF="javascript:history.go(1)"> <AREA SHAPE="rect" COORDS="78,249,99,265" HREF="stop.php" TARGET="music2"> </MAP> </div> <div style="position:absolute; top:30; left:15; width:150px; height:97px;overflow: auto;"> <!-- to add songs to your box change SONG to the name of the song and artist. Copy and paste a music code into a new notepad document call it 1.html then 2.html etc. then upload. --> <a 1.html" target="music2">SONG</a> <a 2.html" target="music2">SONG</a> <a 3.html" target="music2">SONG</a> <a 4.html" target="music2">SONG</a> <a 5.html" target="music2">SONG</a> </div></body></html>	Green iPod code 1 <html><head><title>Music</title> <style type="text/css"> A:link{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:visited{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:active{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:hover{color:#FFFFFF;background-image:url("/http://i20.photobucket.com/albums/b202/clare12/music/ipodbg.gif");text-decoration:none;} </style></head><body> <iframe frameborder="0" width="1" height="1" marginheight="0" marginwidth="0" scrolling="no" name="music2" allowtransparency="true" scrolling=no></iframe> <div style="position:absolute; top:0; left:0;"> <img src="/http://i20.photobucket.com/albums/b202/clare12/music/ipod4.gif" NAME="Image20" USEMAP="#Image2" border="0"> <MAP NAME="Image2"> <AREA SHAPE="rect" COORDS="35,202,59,217" HREF="javascript:history.go(-1)"> <AREA SHAPE="rect" COORDS="120,202,144,218" HREF="javascript:history.go(1)"> <AREA SHAPE="rect" COORDS="78,249,99,265" HREF="stop.php" TARGET="music2"> </MAP> </div> <div style="position:absolute; top:30; left:15; width:150px; height:97px;overflow: auto;"> <!-- to add songs to your box change SONG to the name of the song and artist. Copy and paste a music code into a new notepad document call it 1.html then 2.html etc. then upload. --> <a 1.html" target="music2">SONG</a> <a 2.html" target="music2">SONG</a> <a 3.html" target="music2">SONG</a> <a 4.html" target="music2">SONG</a> <a 5.html" target="music2">SONG</a> </div></body></html>
Black iPod code 1 <html><head><title>Music</title> <style type="text/css"> A:link{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:visited{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:active{color:#000000;font-family:arial;font-size:6pt;display:block;text-decoration:none;} A:hover{color:#FFFFFF;background-image:url("/http://i20.photobucket.com/albums/b202/clare12/music/ipodbg.gif");text-decoration:none;} </style></head><body> <iframe frameborder="0" width="1" height="1" marginheight="0" marginwidth="0" scrolling="no" name="music2" allowtransparency="true" scrolling=no></iframe> <div style="position:absolute; top:0; left:0;"> <img src="/http://i20.photobucket.com/albums/b202/clare12/music/ipod5.gif" NAME="Image20" USEMAP="#Image2" border="0"> <MAP NAME="Image2"> <AREA SHAPE="rect" COORDS="35,202,59,217" HREF="javascript:history.go(-1)"> <AREA SHAPE="rect" COORDS="120,202,144,218" HREF="javascript:history.go(1)"> <AREA SHAPE="rect" COORDS="78,249,99,265" HREF="stop.php" TARGET="music2"> </MAP> </div> <div style="position:absolute; top:30; left:15; width:150px; height:97px;overflow: auto;"> <!-- to add songs to your box change SONG to the name of the song and artist. Copy and paste a music code into a new notepad document call it 1.html then 2.html etc. then upload. --> <a 1.html" target="music2">SONG</a> <a 2.html" target="music2">SONG</a> <a 3.html" target="music2">SONG</a> <a 4.html" target="music2">SONG</a> <a 5.html" target="music2">SONG</a> </div></body></html>

code 2 (change music.html if you didnt save code 1 as music.html & obviously change YOURSITE.COM to your url)

code 3 (change music.html if you didnt save code 1 as music.html & obviously change YOURSITE.COM to your url)