rollover with imagemap/table DIV, not working at all. Options

[yellowxgirl]

I've been trying for the past two hours to get this rollover to work.

I'm using a table image (all the links are split up)

I've read all of the "resolved" topics on this and copied the code "word for word" and just replaced the URL, still nothing.


Here's my coding. The rollover attempt doesn't start until at the very bottom, and I've only got one image set up right now (I've been testing just the one image rather than trying to test all at once)

so it's the "home" link I'm working on...

I would appreciate any help because I'm about to rip my hair out.

CODE

<style>
.aboutme{position:absolute;
width:365; height:210; overflow:auto;
left:215px; top:265;
}

td td embed {position:absolute; left:0px; top:0px; width:295px; height:51px; } td td td embed { position:static; width:auto; height:auto; }

.background{position:absolute;
width:800; height:600;overflow:auto;
left:100px; top:180; }


h1 {
font-family:century gothic, arial;
text-transform:none;
font-size:28px;
line-height:26px;
color: 382402;
letter-spacing:2px;
margin-bottom:11px;
background-color:transparent;
text-align: left;
font-weight:normal;
border-bottom:1px dashed;
border-color:73be1e;}

h1:first-letter {color:cc0000;}

body
{background-color:ffffff;
cursor:crosshair;}


a:hover img { filter:Alpha(Opacity=50);}
body { cursor:crosshair;}
a:hover { cursor:help;}


table, tr, td, li, p, div
{font-family:arial,verdana;
font-size:8pt;
line-height:8pt;
color:382402;
text-align:justify;}

b, strong {font: 11px century gothic;
font-weight:bold;
line-height:13px;
letter-spacing:2px;}

i, em {font:normal 11px georgia;
line-height:13px;
font-style:italic;
text-transform:none;
text-decoration:none;}

s, strike {color: 666666;}


a:active, a:visited, a:link {font-family: arial,verdana; font-size:8pt; color:73be1e; text-transform:lowercase;}

a:hover
{font-family: arial,verdana; font-size:8pt; color:34a02c; text-transform:lowercase; text-decoration:underline; cursor:help;}


table td div div font,
div table tr td font
{font-family:georgia;
font-size:8pt;
color:silver;}

div table td font {display: none;}
body div table td form img{display:none!important;}
body div table td form option{display:none!important;}
body div table td form select{display:none!important;}
body div table td form input{display:none!important;}

body table {margin-top:-50000px;}

body td table, body div table {margin-top: 0;}

table, tr, td {background-color:transparent;}

body div table form{display:none;}

body table div form{display:block;}

div table td font {visibility:hidden; }


a.home {
display:block;
height:30px;
width:177px;
overflow:hidden;
background-image:url ('http://s238.photobucket.com/albums/ff238/oyellowgirlo/layouts/nostalgia/nostalgia-prog_03.gif');
background-position:top center;
background-repeat:no-repeat;}

a.home:hover {
background-image:url ('http://s238.photobucket.com/albums/ff238/oyellowgirlo/layouts/nostalgia/nostalgia-prog_03-over.gif');
background-position:top center;
display:block;
height:30px;
width:177px;
background-repeat:no-repeat;}



</style>



<div class="background">
<table id="Table_01" width="800" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://s238.photobucket.com/albums/ff238/oyellowgirlo/layouts/nostalgia/nostalgia-prog_01.gif" width="800" height="89" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<img src="http://s238.photobucket.com/albums/ff238/oyellowgirlo/layouts/nostalgia/nostalgia-prog_02.gif" width="469" height="511" alt=""></td>
<td>
<a href="home" class="home" border=0></a></td>
<td rowspan="7">
<img src="http://s238.photobucket.com/albums/ff238/oyellowgirlo/layouts/nostalgia/nostalgia-prog_04.gif" width="154" height="511" border="0" alt="" usemap="#nostalgia_prog_04_Map"></td>
</tr>
<tr>
<td>
<a href="add">
<img src="http://s238.photobucket.com/albums/ff238/oyellowgirlo/layouts/nostalgia/nostalgia-prog_05.gif" width="177" height="41" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<a href="message">
<img src="http://s238.photobucket.com/albums/ff238/oyellowgirlo/layouts/nostalgia/nostalgia-prog_06.gif" width="177" height="30" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<a href="photos">
<img src="http://s238.photobucket.com/albums/ff238/oyellowgirlo/layouts/nostalgia/nostalgia-prog_07.gif" width="177" height="32" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<a href="comment">
<img src="http://s238.photobucket.com/albums/ff238/oyellowgirlo/layouts/nostalgia/nostalgia-prog_08.gif" width="177" height="37" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<a href="block">
<img src="http://s238.photobucket.com/albums/ff238/oyellowgirlo/layouts/nostalgia/nostalgia-prog_09.gif" width="177" height="34" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="http://s238.photobucket.com/albums/ff238/oyellowgirlo/layouts/nostalgia/nostalgia-prog_10.gif" width="177" height="307" border="0" alt="" usemap="#nostalgia_prog_10_Map"></td>
</tr>
</table>
<map name="nostalgia_prog_04_Map">
<area shape="rect" alt="" coords="0,477,42,491" href="#">
</map>
<map name="nostalgia_prog_10_Map">
<area shape="rect" alt="" coords="130,273,177,287" href="#">
</map>

</div>

Reason for edit: Please use [codebox] for longer codes. Thanks! - Gabi :)

[synatribe]

change the a.home to .home and a.home: to .home:hover and write your CSS

then make your link like this

<a class="home" href="http://LINK">

do not use image maps, just used individual images.
so in total this is what is should look like [css]

CODE

<style>
.home{width:###; height:###; background-color:transparent; background-image:url("IMG URL FOR NOT HOVER"); background-repeat:no-repeat;}

.home:hover{width:###; height:###; background-color:transparent; background-image:url("IMG URL FOR HOVER"); background-repeat:no-repeat;}

now here the html

CODE

<div style="position:abosolute; top:###; left:###;">
<a class="home" href="LINK">
</div>

[yellowxgirl]

jglka;fjklga LET'S GET MARRIED.


the HTML coding you gave me had a typo in it, it should be

CODE

<div style="position:absolute; top:###; left:###;">
<a class="home" href="LINK">
</div>

(absolute instead of abosolute) -- just stating that in case anyone uses this thread in the future :3



it worked like a charm, you are fantastic, thank you so much <3333

topic resolved :D

[synatribe]

glad I was able to help :]

[schizo]

Topic closed and moved to Resolved.