Log in

View Full Version : CSS Image Map/Hovering Trouble



Costcodude
06-20-2008, 02:48 AM
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:confused::confused: ....here is my myspace:
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=90098968
If it wasn't dang Myspace I would have just used javascript but yeah
here is the code:

About Me:



<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



<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>

Nile
06-20-2008, 02:52 AM
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 ].

Costcodude
06-20-2008, 03:07 AM
well basically, only 1 section of the image map works...only one link of the image map works let me update my post...

Nile
06-20-2008, 03:13 AM
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?

Costcodude
06-20-2008, 03:24 AM
I want to keep it the same image but have different links in different areas (image map), the boxes labeled messages, comments, etc.

Nile
06-20-2008, 03:27 AM
Does this help you out?:
http://www.w3schools.com/TAGS/tag_map.asp

Costcodude
06-20-2008, 03:33 AM
i didn't make my map with Html, I used CSS

Nile
06-20-2008, 03:35 AM
Well, thats what I'm saying. Redo it. Everybody makes mistakes.

Costcodude
06-20-2008, 03:59 AM
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

Nile
06-20-2008, 05:54 PM
Ohh, I see. Can't help you much there then.