CSS Image Swap with Image Maps

[lahddah2]

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

 

[BillyRayPreachersSon]

Also, it doesn't look like the image maps are being recognized in FF. Any suggestions?

- Make sure your HTML & CSS validates.

- Post your image map code - it's hard to debug something we know nothing about.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[lahddah2]

Thanks for your response. Both the CSS and the HTML validate using the Firefox web developer tools. Here are the image maps:

---
<map name="ticketMn_prem">
<area shape="rect" coords="8,134,219,379" href="/site/premium_seating.html#suites" alt="EXECUTIVE SUITES">
<area shape="rect" coords="235,133,444,376" href="/site/premium_seating.html#court" alt="COURTSIDE SEATING">
<area shape="rect" coords="456,131,665,374" href="/site/premium_seating.html#terrace" alt="BOX SEATS">
<area shape="rect" coords="6,4,667,123" href="/site/premium_seating.html" alt="PREMIUM SEATING">
</map>
<map name="ticketMn_season">
<area shape="poly" coords="9,7,659,8,637,205,538,230,523,252,519,301,524,342,531,373,17,371" href="/site/Season_Ticket_Information.html" alt="SEASON TICKET INFORMATION - LEARN MORE!">
<area shape="circle" coords="593,304,68" href="/site/planlist.html" target="_blank" alt="BUY SEASON TICKETS NOW">
</map>
---
~l

 

[BillyRayPreachersSon]

The image maps are fine - If I create a mock-up using the image and maps from your code, it works fine in Firefox.

I suspect the reasons you think it's not working is because the image doesn't stay around for the image map to work... but they do work if the image is visible.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[lahddah2]

Thanks Dan. Do you know how I can make the images stay visible until the next 'hover' instance? So that, until the user hovers over the next navigation item, the swapped image will remain live, and it's image map can be used? Or can you think of a better way of doing this w/o using an image map for each image but still have it be able to have two or three 'hot spots'?

~l

 

[Vragabond]

Can you show us your page by giving us the URL to it? That would help a lot with our debugging as we will interpret your design correctly.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[lahddah2]

Okay, here you go. There so much 'other' code around it to dig through, so I was trying to make it simple. But here's the link:

http://www.nba.com/kings/tickets/kings_tickets_home.html

I've also got text files for the CSS and the HTML table in question without all of the extra stuff. Just e-mail me if you think those will help. Thanks!

~l

 

[lahddah2]

BTW - the page works swell in IE - swaps & image maps and all. But not in FF or Safari. The swapped images, for some reason, did not line up correctly in FF and Safari, so I changed the positioning around for those browsers, which, of course makes the image not line up in IE now. Minor issue, but just wanted to make sure you know that I knew they weren't lining up in IE.

~l