Hi all,
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.
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.
Here is a sample of the html and the way im defining the divs and image maps
for the rotator.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en">
<head>
<title>InnerFade with jquery</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('div#rotator').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '220px'
});
});
</script>
<style>
#rotator img {
border: 1px solid #ccc;
padding: 1px;
}
.imgmap {
position: relative;
_zoom: 1;
}
.imgmap li {
position: absolute;
display: block;
list-style: none;
overflow: hidden;
}
.imgmap li a {
display: block;
width: 100%;
height: 100%;
_background: url(space.gif);
text-indent: -1000em;
}
#barea1 {
left: 116px;
top: 29px;
width: 184px;
height: 182px;
}
#barea2 {
left: 353px;
top: 31px;
width: 183px;
height: 186px;
}
#carea1 {
left: 61px;
top: 100px;
width: 151px;
height: 101px;
}
#carea2 {
left: 230px;
top: 100px;
width: 159px;
height: 83px;
}
#carea3 {
left: 406px;
top: 101px;
width: 161px;
height: 35px;
}
</style>
</head>
<body>
<div id="rotator">
<div class="imgmap">
<img height="220" width="638" src="images/ggbg.gif" alt="" />
<ol>
<li id="barea1"><a href="http://www.google.com";></a></li>
<li id="barea2"><a href="http://www.google.com";></a></li>
</ol>
</div>
<div class="imgmap">
<img height="220" width="638" src="images/rt_arch.jpg" alt=""
/>
<ol>
<li id="carea1"><a href="http://www.google.com";></a></li>
<li id="carea2"><a href="http://www.google.com";></a></li>
<li id="carea3"><a href="http://www.google.com";></a></li>
</ol>
</div>
</div>
</body>
</html>
---------------------------------
TV dinner still cooling?
Check out "Tonight's Picks" on Yahoo! TV._______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
