lahddah2
Programmer
- May 31, 2005
- 9
Hello - I am using CSS to create a disjointed image. For each disjointed image, I am using an image map. I have it working in IE6 but cannot seem to get it functioning in Firefox or Safari. Here is my CSS:
<style type="text/css">
/*\*//*/
@import "ie5mac.css";
/**/
* {
border:0;
margin:0;
padding:0;
z-index:0;
}
img {
/* border:solid 2px #CCC; */
}
span {
display:none;
}
span img {
border:none;
}
a:hover {
border:none;
text-decoration:none;
}
a:hover span {
position:absolute;
left:289px;
top:244px;
width:677px;
/* height:378px; */
border-width: 0;
display:block;
}
</style>
-----------------
And here is my HTML - using tables:
-----------------
<div class=aLTicketHome style="background-color:#424242;width:986px;">
<div id="nav">
<table id="Table_01" width="968" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2"><a href="#"><img src="/site/ticketSide_indi.jpg" width="291" height="75" alt="" border="0"/><span><img src="/site/ticketMn_indi.jpg" alt="" border="0" usemap="#ticketMn_indi" /></span></a></td>
<td colspan="6" rowspan="4"><img src="/site/ticketMn_indi.jpg" alt="" name="Mn_Image" id="Mn_Image"></td>
</tr>
<tr><td colspan="2"><a href="/site/group_ticket_information.html"><img src="/site/ticketSide_Group.jpg" width="291" height="94" alt="GROUP TICKETS" border="0"/><span><img src="/site/ticketMn_groups.jpg" name="imgGrp" width="676" height="385" alt="GROUP TICKETS"/></span></a></td>
</tr>
<tr><td colspan="2"><a href="/site/Season_Ticket_Information.html"><img src="/site/ticketSide_season.jpg" width="291" height="94" alt="SEASON TICKETS" border="0"/><span><img src="/site/ticketMn_season.jpg" width="676" height="385" alt="" useMap="#ticketMn_season" /></span></a></td>
</tr>
<tr><td colspan="2"><a href="/site/premium_seating.html"><img src="/site/ticketSide_preimium.jpg" width="291" height="122" alt="PREMIUM SEATING" border="0"/><span><img src="/site/ticketMn_prem.jpg" width="676" height="385" alt="" usemap="#ticketMn_prem" /></span></a></td>
</tr>
</table>
</div>
</div>
--------------
In firefox/safari, the swapped images don't stay live long enough for the users to go over to them and click the on their links. They return to the default image as soon as the 'HOVER' is complete, rather than stay live until the user HOVERs over the next nav. Also, it doesn't look like the image maps are being recognized in FF. Any suggestions?
Thanks, in advance!
~l
<style type="text/css">
/*\*//*/
@import "ie5mac.css";
/**/
* {
border:0;
margin:0;
padding:0;
z-index:0;
}
img {
/* border:solid 2px #CCC; */
}
span {
display:none;
}
span img {
border:none;
}
a:hover {
border:none;
text-decoration:none;
}
a:hover span {
position:absolute;
left:289px;
top:244px;
width:677px;
/* height:378px; */
border-width: 0;
display:block;
}
</style>
-----------------
And here is my HTML - using tables:
-----------------
<div class=aLTicketHome style="background-color:#424242;width:986px;">
<div id="nav">
<table id="Table_01" width="968" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2"><a href="#"><img src="/site/ticketSide_indi.jpg" width="291" height="75" alt="" border="0"/><span><img src="/site/ticketMn_indi.jpg" alt="" border="0" usemap="#ticketMn_indi" /></span></a></td>
<td colspan="6" rowspan="4"><img src="/site/ticketMn_indi.jpg" alt="" name="Mn_Image" id="Mn_Image"></td>
</tr>
<tr><td colspan="2"><a href="/site/group_ticket_information.html"><img src="/site/ticketSide_Group.jpg" width="291" height="94" alt="GROUP TICKETS" border="0"/><span><img src="/site/ticketMn_groups.jpg" name="imgGrp" width="676" height="385" alt="GROUP TICKETS"/></span></a></td>
</tr>
<tr><td colspan="2"><a href="/site/Season_Ticket_Information.html"><img src="/site/ticketSide_season.jpg" width="291" height="94" alt="SEASON TICKETS" border="0"/><span><img src="/site/ticketMn_season.jpg" width="676" height="385" alt="" useMap="#ticketMn_season" /></span></a></td>
</tr>
<tr><td colspan="2"><a href="/site/premium_seating.html"><img src="/site/ticketSide_preimium.jpg" width="291" height="122" alt="PREMIUM SEATING" border="0"/><span><img src="/site/ticketMn_prem.jpg" width="676" height="385" alt="" usemap="#ticketMn_prem" /></span></a></td>
</tr>
</table>
</div>
</div>
--------------
In firefox/safari, the swapped images don't stay live long enough for the users to go over to them and click the on their links. They return to the default image as soon as the 'HOVER' is complete, rather than stay live until the user HOVERs over the next nav. Also, it doesn't look like the image maps are being recognized in FF. Any suggestions?
Thanks, in advance!
~l