Hi, I'm using cycle for a PPT-style screenshot click-thru. Works great...one way. Forward. Some people want to go backward though and that's proving difficult to do with imagemaps. It seems to start the screens going backward, and the click-to-advance-forward functionality seems to be disabled once I start to go backward. Here is the code snippet. Bottom line is I want to advance the image forward by clicking anywhere, except on the image map (left area of the screen), which I want them to go back one screen. Any advice appreciated@!@!!!!
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade', speed:0, next:'.slideshow', timeout:400000000 // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<map name=ClickBackonLeftEdge><area shape=rect coords=0,0,400,400 onclick="$('.slideshow').cycle({ fx: 'fade', speed:0, prev: '.slideshow', timeout: 0 });">
</map>
<div class="slideshow" style="position: relative;">
<img src="00.0.jpg" border=0 style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width:100%;height:100%;>
<img src="01.0.jpg" usemap=#ClickBackonLeftEdge border=0 style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width:100%;height:100%;">
<img src="02.0.jpg" usemap=#ClickBackonLeftEdge border=0 style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width:100%;height:100%;">
<img src="03.0.jpg" usemap=#ClickBackonLeftEdge border=0 style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width:100%;height:100%;">
<img src="04.0.jpg" usemap=#ClickBackonLeftEdge border=0 style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width:100%;height:100%;">
<img src="05.0.jpg" usemap=#ClickBackonLeftEdge border=0 style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width:100%;height:100%;">
<img src="06.0.jpg" usemap=#ClickBackonLeftEdge border=0 style="position: absolute; top: 0px; left: 0px; display: none; z-index: 6; opacity: 0; width:100%;height:100%;">
<img src="07.0.jpg" usemap=#ClickBackonLeftEdge border=0 style="position: absolute; top: 0px; left: 0px; display: none; z-index: 6; opacity: 0; width:100%;height:100%;">
</div>
</body></html>