Hi
I am trying to use Prototype to toggle between two images. I have both
on the page, with display:none set. When a certain link on an image
map is rolled over, one is shown and the other hidden, and vice-versa
when the mouseout event fires.
It works fine in IE but in Firefox, when the mouseover event fires,
the second images appears, replacing the first, as it should. But when
the mouseout event fires... both disappear.
I've watched the changes to the style in Firebug and the right
display:none style is set/removed but the image isn't showing up on
the page.
Can anyone shed light on why this might be?
Here's my code:
<html>
<head>
<script type="text/javascript" src="/js/scriptaculous/lib/
prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous/src/
scriptaculous.js"></script>
<script type="text/javascript">
// events
Event.observe( window, 'load', function()
{
// fade in
Effect.Appear( 'worldmap', { duration: 0.5 } );
// show italy on mouseover
Event.observe( 'italy', 'mouseover', showItaly );
// hide italy on mouseout
Event.observe( 'italy', 'mouseout', hideItaly );
}
);
function showItaly()
{
if( $('worldmap').visible() && !$('worldmap_rollover').visible() )
{
$('worldmap_rollover').show();
$('worldmap').hide();
}
}
function hideItaly()
{
if( !$('worldmap').visible() && $('worldmap_rollover').visible() )
{
$('worldmap').show();
//$('worldmap_rollover').hide();
}
}
</script>
</head>
<body>
<img src="http://hosmark.pir2.info/bespoke/hosmark/images/
worldmap_rollover.gif" id="worldmap_rollover"
style="display:none;border:none;padding:0;margin-top:-10px;"
usemap="#worldmap" />
<img src="http://hosmark.pir2.info/bespoke/hosmark/images/
worldmap.gif" id="worldmap" style="display:none;border:none;padding:
0;margin-top:-10px;" usemap="#worldmap" />
<map name="worldmap">
<area shape="rect"
coords="99,136,143,151" href="/
hotel_portfolio.htm?list=country&country_id=40" alt="Whistler">
<area shape="rect"
coords="499,218,541,235" href="/
hotel_portfolio.htm?list=country&country_id=419" alt="Dhaka">
<area shape="rect"
coords="621,190,672,217" href="/
hotel_portfolio.htm?list=country&country_id=108" alt="Tokyo Yokohama">
<area shape="rect"
coords="436,342,548,370" href="/
hotel_portfolio.htm?list=country&country_id=138" alt="Sun Resorts
Mauritius">
<area shape="rect"
coords="612,267,655,284" href="/
hotel_portfolio.htm?list=country&country_id=" alt="Palan">
<area shape="rect"
coords="485,272,557,288" href="/
hotel_portfolio.htm?list=country&country_id=131" alt="Kuala Lumpur">
<area shape="rect"
coords="498,288,562,301" href="/
hotel_portfolio.htm?list=country&country_id=192" alt="Singapore">
<area shape="rect"
coords="515,303,568,322" href="/
hotel_portfolio.htm?list=country&country_id=101" alt="Jakarta">
<area shape="rect"
coords="93,151,149,164" href="/
hotel_portfolio.htm?list=country&country_id=40" alt="Vancouver">
<area shape="rect"
coords="94,164,140,177" href="/
hotel_portfolio.htm?list=country&country_id=231" alt="Seattle">
<area shape="rect"
coords="150,179,193,195" href="/
hotel_portfolio.htm?list=country&country_id=231" alt="New york">
<area shape="rect"
coords="29,221,90,252" href="/
hotel_portfolio.htm?list=country&country_id=231" alt="Mauna Lani
hawaii">
<area shape="rect"
coords="329,114,384,135" href="/
hotel_portfolio.htm?list=country&country_id=208" alt="Stockholm">
<area shape="rect"
coords="350,139,408,154" href="/
hotel_portfolio.htm?list=country&country_id=152" alt="Amsterdam">
<area shape="rect"
coords="344,154,381,164" href="/
hotel_portfolio.htm?list=country&country_id=75" alt="Paris">
<area shape="rect"
coords="361,163,408,174" href="/
hotel_portfolio.htm?list=country&country_id=209" alt="Bad Ragaz">
<area shape="rect"
coords="299,179,348,192" href="/
hotel_portfolio.htm?list=country&country_id=200" alt="Mallorca">
<area shape="rect"
coords="295,192,341,205" href="/
hotel_portfolio.htm?list=country&country_id=200" alt="Alicante">
<area shape="rect"
coords="372,173,452,189" href="/
hotel_portfolio.htm?list=country&country_id=106" alt="Star Hotels
Italy" id="italy">
<area shape="rect"
coords="362,190,492,214" href="/
hotel_portfolio.htm?list=country&country_id=85" alt="Grecotel Greece">
<area shape="rect"
coords="447,224,500,243" href="/
hotel_portfolio.htm?list=country&country_id=228" alt="Abu Dhabi">
<area shape="rect"
coords="370,364,430,385" href="/
hotel_portfolio.htm?list=country&country_id=197" alt="Cape town">
<area shape="rect"
coords="553,199,587,222" href="/
hotel_portfolio.htm?list=country&country_id=46" alt="Wuxi">
<area shape="rect"
coords="519,244,577,263" href="/
hotel_portfolio.htm?list=country&country_id=216" alt="Bangkok">
<area shape="rect"
coords="545,222,630,245" href="/
hotel_portfolio.htm?list=country&country_id=" alt="Pan Pacific Hotels
& Resorts">
<area shape="rect"
coords="585,246,627,264" href="/
hotel_portfolio.htm?list=country&country_id=172" alt="Manila">
<area shape="rect"
coords="298,166,348,179" href="/
hotel_portfolio.htm?list=country&country_id=200" alt="Barcelona">
</map>
</body>
</html>
Thanks
voidstate
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
