cycle - getting two images to change in onAfter function

cycle - getting two images to change in onAfter function

I have 24 items I am cycling through.  As each one is displayed, I have another that I want to change an icon corresponding to that item to a hover icon, and the item before back to a non-hover icon.

I have the hover icon coming up as needed, but cannot get the prior item icon to change back.

  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  3. <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
  4. <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
  5. <script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>
  6. <script>
  7. $('#slideshow').cycle({ 
  8.     fx:     'fade', 
  9.     timeout: 2000, 
  10.     after:   onAfter 
  11. });

  13. function onAfter() {
  14.     $('#producttitle').html("<a href=\"" + this.href + "\"><b>" + this.title + "</b>")
  15.     $('#productdescription').html($(this).attr('alt'))
  16. var currentItem = new String(this.id.substring(3, 5));
  17. var previousItem = new String((this.id.substring(3, 5))-1);
  18. //alert(previousItem);
  19. if (previousItem = "-1")
  20. {
  21. previousItem = "23";
  22. }
  23. document.getElementById(currentItem).style.background="url(../images/number_icon_hover.gif) no-repeat 0 0 #C4CBA9";
  24. //this is not working
  25.         document.getElementById(previousItem).style.background="url(../images/number_icon.gif) no-repeat 0 0 #C4CBA9";
  26. };

  28. function changeitem(itemnumber) {
  29. $('#slideshow').cycle(itemnumber);
  30. document.getElementById(itemnumber).style.background="url(../images/number_icon_hover.gif) no-repeat 0 0 #C4CBA9";
  31.         return false; 
  32. }

  34. </script>