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
-~----------~----~----~----~------~----~------~--~---
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
-~----------~----~----~----~------~----~------~--~---