Log In · Register

 
rollover with imagemap/table DIV, not working at all.
yellowxgirl
post Aug 20 2008, 05:36 AM
Post #1


senior weeaboo.
**

Group: Member
Posts: 23
Joined: Aug 2007
Member No: 567,636



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

Posts in this topic


Closed TopicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members: