[jQuery] innerfade and images with image maps
<div>Hi all,<BR><BR>I'm a newcomer to jquery. Its great and I plan on utilizing the library in our website. Currently we have an old flash rotator and im thinking about replacing it with a javascript/css rotator. I was looking at the innerfade plugin as a potential replacement. I like it because unlike many rotators I can define the elements being switched versus just an image file. I want to switch between divs with an image map defined for each div container. I need to define an image map because the images being switched may have different hot spots for links.<BR><BR>This works great with innerfade tested in in Firefox 2.0 and IE6, but for some reason the image maps arent recognized in IE7. The rotator works but the image maps arent available. I know this is probably more a css issue but its strange it works in IE6 and not IE7. Any ideas why the image maps arent recognized in IE7? Also I dont have access to an Apple computer so Im curious if it
works ok on safari 2.0 or firefox on OSX.<BR><BR>Here is a sample of the html and the way im defining the divs and image maps for the rotator.<BR></div> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</A>"><BR><html xmlns="<A href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</A>" xml:lang="en"><BR><head><BR><title>InnerFade with jquery</title><BR><meta http-equiv="content-type" content="text/html; charset=utf-8" /><BR><script type="text/javascript" src="js/jquery.js"></script><BR><script type="text/javascript" src="js/jquery.innerfade.js"></script><BR><script type="text/javascript"><BR>$(document).ready(<BR> function(){<BR> $('div#rotator').innerfade({<BR> speed: 'slow',<BR> timeout:
4000,<BR> type: 'sequence',<BR> containerheight: '220px'<BR> });<BR>});<BR></script><BR><style><BR>#rotator img {<BR> border: 1px solid #ccc;<BR> padding: 1px;<BR>}<BR>.imgmap {<BR> position: relative;<BR> _zoom: 1;<BR>}</div> <div>.imgmap li {<BR> position: absolute;<BR> display: block;<BR> list-style: none;<BR> overflow: hidden;<BR>}</div> <div>.imgmap li a {<BR> display: block;<BR> width: 100%;<BR> height: 100%;<BR> _background: url(space.gif);<BR> text-indent: -1000em;<BR>}</div> <div>#barea1 {<BR> left: 116px;<BR> top: 29px;<BR> width: 184px;<BR> height: 182px;<BR>}</div> <div>#barea2 {<BR> left: 353px;<BR> top: 31px;<BR> width: 183px;<BR> height: 186px;<BR>}</div> <div>#carea1 {<BR> left: 61px;<BR> top: 100px;<BR> width: 151px;<BR> height: 101px;<BR>}</div> <div>#carea2
{<BR> left: 230px;<BR> top: 100px;<BR> width: 159px;<BR> height: 83px;<BR>}</div> <div>#carea3 {<BR> left: 406px;<BR> top: 101px;<BR> width: 161px;<BR> height: 35px;<BR>}</div> <div><BR></style><BR></head><BR><body><BR><div id="rotator"> <BR> <div class="imgmap"><BR> <img height="220" width="638" src="images/ggbg.gif" alt="" /><BR> <ol><BR> <li id="barea1"><a href="<A href='http://www.google.com"></a></li'>http://www.google.com"></a></li</A>><BR> <li
id="barea2"><a href="<A href='http://www.google.com"></a></li'>http://www.google.com"></a></li</A>><BR> </ol><BR> </div><BR> <div class="imgmap"><BR> <img height="220" width="638" src="images/rt_arch.jpg" alt="" /><BR> <ol><BR> <li id="carea1"><a href="<A
href='http://www.google.com"></a></li'>http://www.google.com"></a></li</A>><BR> <li id="carea2"><a href="<A href='http://www.google.com"></a></li'>http://www.google.com"></a></li</A>><BR> <li id="carea3"><a href="<A href='http://www.google.com"></a></li'>http://www.google.com"></a></li</A>><BR> </ol><BR> </div><BR> <BR></div> <BR></body><BR></html></div>
<hr size=1>TV dinner still cooling?
<a href="http://us.rd.yahoo.com/evt=49979/*http://tv.yahoo.com/">Check out "Tonight's Picks"</a> on Yahoo! TV._______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/