Try: Element.show(''worldmap'') instead.
On Sep 19, 7:29 am, Ferg <f...-ooYiaXSp/yJl57MIdRCFDg@public.gmane.org>
wrote:> 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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---