Results 1 to 10 of 10

Thread: CSS Image Map/Hovering Trouble

  1. #1
    Join Date
    Jun 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation CSS Image Map/Hovering Trouble

    Ok - I began with this pretty complicated (at least to myself) Myspace profile; here is the idea:

    "http://www.alistapart.com/articles/imagemap"

    So far, I've gotten the Original Photo as the background on my Div and I have the new photo loading everytime I hover over it, but only one link works ....here is my myspace:
    http://profile.myspace.com/index.cfm...endid=90098968
    If it wasn't dang Myspace I would have just used javascript but yeah
    here is the code:

    About Me:

    Code:
    <style type="text/css">
    .www.divoverlay.com-div-generator{display:none}
    body {
    
    background-color:FFFFFF
    }
    .contain div {
    
    background-color:FFFFFF;
    color:FFFFFF;
    font: 10pt Arial,Helvetica,sans-serif;
    overflow:none
    }
    
    .menu a {
    position: absolute;
      height: 560px;
      width: 330px;
      top: 18px; 
      text-decoration: none;
      }
    .menu a i { visibility: hidden; }
    
    a.home { top: 54px;}
    a.preface {  top: 72px; }
    a.stories { top: 90px;}
    a.gallery {top: 108px;}
    a.forum { top: 126px; }
    
    a.home:hover {background-image: url(http://i160.photobucket.com/albums/t...tioncopy.png);
    position:absolute;
    top: 15px;
    }
    a.preface:hover { background-image: url(http://i160.photobucket.com/albums/t...tioncopy.png); 
    position:absolute;top: 15px;
    }
    a.stories:hover { background-image: url(http://i160.photobucket.com/albums/t...tioncopy.png); 
    position:absolute; top: 15px;
    }
    a.gallery:hover { background-image: url(http://i160.photobucket.com/albums/t...tioncopy.png); 
    position:absolute; top: 15px;
    }
    a.forum:hover { background-image: url(http://i160.photobucket.com/albums/t...tioncopy.png); 
    position:absolute; top: 15px;
    }
    
    a.home:hover,
    a.preface:hover, 
    a.stories:hover, 
    a.gallery:hover, 
    a.forum:hover, { border: none; } 
    
    
    
    a:link, a:active, a:visited, a.navbar:link, a.navbar:active, a.navbar:visited, a.man:link, a.man:active, a.man:visited, a:hover, a.navbar:hover, a.man:hover {
    color:000000;
    font: 10pt Arial,Helvetica,sans-serif
    }
    .mpd1{width:700px;height:600px;top:0;left:50px;position:absolute}
    .mpd1{background:url('http://i160.photobucket.com/albums/t174/costcodude/Mobile-Generalcopy-1.png') no-repeat center center scroll;
    height: 560px;
    width: 330px;
    }
    .hold{background-color:transparent} 
    .contain{left:50%;margin-left:-400px;top:150px;position:absolute;z-index:0;background-color:transparent;visibility:visible}
    .corner{left:0;top:0;position:absolute;z-index:9;visibility:visible !important}
    .mpd{left:50%;margin-left:-400px;top:0;position:absolute;z-index:9;visibility:visible !important}
    .comments{display:none}
    .contacttable,.profileinfo,.latestBlogEntry,.interestsAndDetails,.extendedNetwork,.orangetext15{display:none}
    .bodyContent div div form{display:inline}
    .bodyContent table table table{visibility:hidden}
    a img{border:none}
    td,form{margin:0;padding:0}
    table,tr,td{background:transparent}
    www.divoverlay.com-additional-coding{display:none}
    </style>
    I'd Like to Meet

    Code:
    <div class="hold"><div class="contain">
    <div class="mpd1">
    <div class="menu"> 
      <a href="http://www.msplinks.com/MDFodHRwOi8veWFob28uY29t" class="home"><i>Home</i></a>
      
    <a href="http://www.msplinks.com/MDFodHRwOi8vZ29vZ2xlLmNvbQ==" class="preface"><i>Preface</i></a>
        <a href="http://www.msplinks.com/MDFodHRwOi8vZ29vZ2xlLmNvbQ==" class="stories"><i>Stories</i></a>
        <a href="http://www.msplinks.com/MDFodHRwOi8vZ29vZ2xlLmNvbQ==" class="gallery"><i>Galleries»
      </i></a>
      <a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm1zbi5jb20=" class="forum"><i>Forum</i></a>
      
     </div>

    </div>
    </div></div>

    <div class="comments">
    <table><tr><td>
    <table><tr><td>
    Last edited by Costcodude; 06-20-2008 at 04:47 AM.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    I don't get what you mean by only one link works.
    When pasting a code, please remember to use [code] tags. That includes [ html ], [ code ], and [ php ].
    Jeremy | jfein.net

  3. #3
    Join Date
    Jun 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    well basically, only 1 section of the image map works...only one link of the image map works let me update my post...

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    The whole black berry is a mouse over right now... Did you want it when you move your mouse on a specific place that it'd change to something else?
    Jeremy | jfein.net

  5. #5
    Join Date
    Jun 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I want to keep it the same image but have different links in different areas (image map), the boxes labeled messages, comments, etc.

  6. #6
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Jeremy | jfein.net

  7. #7
    Join Date
    Jun 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i didn't make my map with Html, I used CSS

  8. #8
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Well, thats what I'm saying. Redo it. Everybody makes mistakes.
    Jeremy | jfein.net

  9. #9
    Join Date
    Jun 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    onmouseover is not considered javascript? I thought it was....

    EDIT: Yes, onmouseover is javascript and you cannot use that on myspace, which I already stated in my original post...

    that's why I had to revert to CSS
    Last edited by Costcodude; 06-20-2008 at 04:30 AM.

  10. #10
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Ohh, I see. Can't help you much there then.
    Jeremy | jfein.net

Bookmarks

Posting Permissions

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