Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Thanked 0 Times in 0 Posts

    Image Map and Css Question

    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

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Clapham Junction - London SW
    Thanked 204 Times in 203 Posts
    I do not know much about this, but this is a URL from my list which might prove useful.

    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Thanked 0 Times in 0 Posts
    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/up...03131942.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; cursorointer;}

    /* 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; cursorointer;}

    /* 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; cursorointer; 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; cursorointer; 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; cursorointer;}
    .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; cursorointer;}

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Thanked 0 Times in 0 Posts
    does anybody know where an image map code would go in a css like that one, please help


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts