View Full Version : Image Map and Css Question

04-28-2011, 09:41 AM
I have a vip soundclick page I made my layout and everything but. I wanted to add a link, can I use an image map on soundclick and if so where in the css do I put the image map code

04-28-2011, 04:43 PM
I do not know much about this, but this is a URL from my list (http://www.image-maps.com)which might prove useful.


04-28-2011, 11:06 PM
yeah thats the site I use to get the code but I don't know where that code goes in the css

here is my css for soundclick

/* general */

body {background-image: url(http://www.backstagegfx.com/forum/uploads/U119-1303131942.jpg); background-repeat:none; background-position: top center; background-attachment:scroll; background-color: #9e9c9c;margin:0px;}

body,div,tr,td,select,textarea,input,option {font-family:tahoma; font-size:12px;}

.buylease tr {font-family:tahoma; font-size:10px;}

.buylease td {font-family:tahoma; font-size:10px;}

.buyleasehook tr {font-family:tahoma; font-size:10px;}

.buyleasehook td {font-family:tahoma; font-size:10px;}

a, a:link, a:visited {color:#ffffff; text-decoration:none;}

a:hover {color:#ffffff; text-decoration:underline;}

.pageFooter {clear:both; color:gray; padding:30px 0px 50px 20px;}

.infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */

.infoBox .quotes {margin:20px; border:#ffffff dashed 1px; font-style:italic; padding:10px; background:;}

/* main containers */

.mainTable {; background-color: transparent; color:ffffff; width:990px; margin-left:auto; border:none; margin-right:auto; text-align:left;overflow:visible; margin-top:1693px;}

.mainContent {background-color:transparent; color:#ffffff; width:900px; float:left; overflow:visible; margin:0px 0px 0px 28px; border:none;} /* IE6 doesnt support our preferred overflow:visible :( */

/* left navigation */

.navigation {); background-color:transparent; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;}

.navigation a:link, .navigation a:visited {color:#ffffff;}

.navigation a:hover {color:#ffffff;}

.navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;}

/* general elements */

.headline {background:transparent; color:#d2d76e; font-weight:bold; border-bottom:#0071cf dashed 1px; border-top:#4b4b4b solid 1px; padding:3px 0px 3px 6px;}

.headlineBig {font-size:22px; font-weight:normal;}

.headlineSuppl {float:right; margin:10px 5px 0px 0px; color:#d2d76e; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */

.headlineSuppl a:link, .headlineSuppl a:visited {color:#d2d76e; text-decoration:none;}

.headlineSuppl a:hover {color:#d2d76e; text-decoration:underline;}

.pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */

.pageturner .nonactive {color:#d2d76e;}

.pageturner a:link, .pageturner a:visited {color:#d2d76e; text-decoration:none;}

.pageturner a:hover {color:#FFFFFF; text-decoration:underline;}

.listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;}

.listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden}

.breaker {height:1px; line-height:1px; clear:both}

/* general color and font assets */

.color_supplemental {color:#d2d76e;} /* used e.g. for song pages comments count */

.alternateBG0 {background:none;} /* used as background colors for comments */

.alternateBG1 {background:none;} /* alternate color */

/* main page (the default entry page) */

.mainContent .contHeadline {clear:left; font-size:14px; color:#cccccc; padding:12px 0px 2px 20px;} /* interview questions */

.mainContent .contText {clear:left; padding-left:15px;}

.mainContent .contInterview {clear:left; padding-left:35px;}

.mainContent .newsBox {display:none; border:1px solid #FFFFFF;clear:both;color:#FFFFFF;margin:0 122px 20px;padding:10px;}

/* main page: video box (different from video page) */

.videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;}

.videoBox_mainPage .video {padding:5px; margin-bottom:10px;}

.videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;}

.videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;}

.videoBox_mainPage .labels {color:#d2d76e; width:100px; padding-right:20px; text-align:right; float:left;}

.videoBox_mainPage .info {padding-left:120px;}

.videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:11px; font-weight:normal; text-decoration:none;}

.videoBox_mainPage a:hover {text-decoration:underline;}

/* main page: upcoming shows */

.liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;}

.liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;}

.liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;}

.liveshowsBox a:hover {color:#d2d76e; text-decoration:underline; cursor:pointer;}

/* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */

.playerBox {float:left; clear:left; padding-left:0px; margin:15px 0px 3px 0px;}

.playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:11px; padding:3px 5px 3px 3px;}

.playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#d2d76e; text-decoration:underline;}

.playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;}

.playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:3px 0px 0px 1px; overflow:auto;}

.playerBox .songBox .singleSong {color:#000000; font-size:11px; padding:1px;}

.playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursor:pointer;}

/* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */

/* main page: tabbed content headers (fans,stations) */

.tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#d2d76e; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#d2d76e solid 1px; border-bottom:none; }

.tabbedCont_header li a:hover {color:white;}

.tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;}

/* main page: fans, stations (tabbed content) */

.fansBox {padding:30px 20px 20px 20px; clear:both;}

.fansBox a:link, .fansBox a:visited {}

.fansBox a:hover {}

.fancount {background:#111111; color:#d2d76e; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; }

.fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;}

.fancount a:hover {color:#FFFFFF; text-decoration:none;}

.fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;}

.fansBoxLastLine {background:#111111; color:#d2d76e; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;}

.fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;}

.fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;}

.stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;}

.stationPicBox {float:left;}

.stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden}

.stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;}

.stationsText {color:#999999; height:80px; overflow:hidden;}

.stationlink a:link, .stationlink a:visited {color:#999999; font-size:14px; text-decoration:none;}

.stationlink a:hover {color:#d2d76e; text-decoration:underline;}

/* music page */

.songsBox {border-bottom:#d2d76e dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;}

.songsBox a:link, .songsBox a:visited {text-decoration:none;}

.songsBox a:hover {color:#FFFFFF; text-decoration:none;}

a.songtitle:link, a.songtitle:visited {color:#ffffff; text-decoration:none; font-size:13px; font-weight:bold;}

a.songtitle:hover {color:#ffffff; text-decoration:underline;}

.songsBox .actionlinks {font-size:12px;} /* the links for full song info, add to station, rate this song... */

.songsBox .topSong {color:#ffffff; float:left; text-align:left; font-size:11px;}

/* comments page */

.commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;}

.commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;}

.commentsBox a:link, .commentsBox a:visited {text-decoration:none;}

.commentsBox a:hover {text-decoration:underline;}

.commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;}

.commentsBox .postdate {color:#666666; font-size:11px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;}

.commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */

.commentsBox .postdate a:hover {text-decoration:underline;}

.commentsBox .comment {font-size:12px; padding:0px 5px 0px 140px;}

.commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;}

.commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;}

.ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */

.commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;}

.commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;}

/* video page */

.videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;}

.videoBox .video {padding:20px; margin-bottom:10px;}

.videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;}

.videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;}

.videoBox .info {float:left; width:440px;}

.videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;}

.videoBox a:hover {color:#3399ff; text-decoration:underline;}

.videoListBox {border-top:#4b4b4b dashed 1px;}

/* photo pages */

.photopage {background:black;}

.selectedPhoto_box {text-align:center;}

.selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;}

.photolist {padding:10px 0px 0px 30px;}

.photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursor:pointer; text-align:center;}

.photobox .photo {height:150px; width:118px; overflow:hidden;}

.photobox .photoComment {color:#444444; font-size:11px;}

.photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursor:pointer; text-align:center;}

.photobox_on .photo {height:150px; width:118px; overflow:hidden;}

.photobox_on .photoComment {color:#999999; font-size:11px;}

/* reviews page */

.reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;}

.reviewsBox .rev_headline {color:#cccccc; font-size:14px; font-weight:bold;}

.reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:12px;}

.reviewsBox .rev_source {text-align:right; font-size:11px; color:#666666;}

/* licensing page */

.licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;}

.licenses {margin-top:70px;}

.licenses .headline {font-size:14px;}

.lic_tableSongs {border:none;}

.lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;}

.lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;}

/* widgets page */

.widgetMargin { padding:8px 0px 8px 35px;}

.widgetSpacer {width:100; height:15px; clear:both;}

/* tag cloud */
.tagCloud {padding:10px;}
.tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;}
.tagCloud .cloudItem:hover {background:#005782; color:white; cursor:pointer;}
.tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;}
.tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;}
.tagCloud .cloudS30 {font-size:11px; color:#999999;}
.tagCloud .cloudS40 {font-size:12px; color:#999999;}
.tagCloud .cloudS50 {font-size:14px; color:#666666;}
.tagCloud .cloudS60 {font-size:16px; color:#666666;}
.tagCloud .cloudS70 {font-size:18px; color:#333333;}
.tagCloud .cloudS80 {font-size:22px; color:#333333;}
.tagCloud .cloudS90 {font-size:28px; color:#111111; }
.tagCloud .cloudS100 {font-size:36px; color:#111111;}
.tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;}
.tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;}
.tagCloudMore a:hover {color:red; text-decoration:underline; cursor:pointer;}

05-01-2011, 09:14 AM
does anybody know where an image map code would go in a css like that one, please help