loop for images

loop for images

Good afternoon, I have a mousemove effect and would like some help:
I'm passing some parameters fixed, and I would put them dynamic.
I need to make a picture that is for each step the mouse, that when searching for the image (sprite) database, according to the parameters already know how to divide the spaces where content will appear the images.
The following code:

  1. jQuery.noConflict();
  2. function moveImages(IDLoader, numImages) {
  3. jQuery(document).ready(function ($) {
  4. var cursorObject = {
  5. offsetLeft: 0,
  6. offsetTop: 0,
  7. cursorX: 0,
  8. run: function (obj) {
  9. if(obj.length > 0) {
  10. obj.live("mouseover mousemove mouseout", function (event) {
  11. var pos = $(this).position();
  12. cursorObject.offsetLeft = pos.left;
  13. cursorObject.offsetTop = pos.top;
  14. switch(event.type) {
  15. case "mouseover":
  16. cursorObject.mouseOver(obj, event);
  17. break;
  18. case "mousemove":
  19. cursorObject.mouseMove(obj, event);
  20. break;
  21. case "mouseout":
  22. cursorObject.mouseOut(obj);
  23. break
  24. }
  25. })
  26. }
  27. },
  28. mouseOver: function (event) {
  29. cursorObject.updatePosition(event)
  30. },
  31. mouseMove: function (obj, event) {
  32. var qtdImg = numImages;
  33. var totalDiv = 180;
  34. var tamImgSprite = qtdImg * totalDiv;
  35. var tmEspaco = totalDiv / qtdImg;
  36. cursorObject.updatePosition(event);
  37. var img = $("id", obj);
  38. var j = $(obj).attr("id");
  39. var http = "../img2/image1.jpg";
  40. var array = [];
  41. for(var i = 0; i < qtdImg; i++) {}
  42. if(cursorObject.cursorX <= 225) {
  43. $("#" + IDLoader + " img").replaceWith("<img style='background: url(" + http + ");width: " + 180 + "px;height: " + 249 + "px;display: block;background-position: " + 0 + "px " + 0 + "px;margin: " + 0 + "px;padding: " + 0 + "px;vertical-align: middle'>")
  44. }
  45. if(cursorObject.cursorX > 225 && cursorObject.cursorX <= 270) {
  46. $("#" + IDLoader + " img").replaceWith("<img style='background: url(" + http + ");width: " + 180 + "px;height: " + 249 + "px;display: block;background-position: " + -150 + "px " + 0 + "px;margin: " + 0 + "px;padding: " + 0 + "px;vertical-align: middle'>")
  47. }
  48. if(cursorObject.cursorX > 270 && cursorObject.cursorX <= 315) {
  49. $("#" + IDLoader + " img").replaceWith("<img style='background: url(" + http + ");width: " + 180 + "px;height: " + 249 + "px;display: block;background-position: " + -300 + "px " + 0 + "px;margin: " + 0 + "px;padding: " + 0 + "px;vertical-align: middle'>")
  50. }
  51. if(cursorObject.cursorX > 315 && cursorObject.cursorX <= 360) {
  52. $("#" + IDLoader + " img").replaceWith("<img style='background: url(" + http + ");width: " + 180 + "px;height: " + 249 + "px;display: block;background-position: " + -475 + "px " + 0 + "px;margin: " + 0 + "px;padding: " + 0 + "px;vertical-align: middle'>")
  53. }
  54. },
  55. mouseOut: function () {
  56. $("#" + IDLoader + " img").replaceWith("<img style='background: url(" + http + ") ;width: " + 0 + "px;height: " + 0 + "px;display: block;background-position: " + 0 + "px " + 0 + "px'>")
  57. },
  58. updatePosition: function (event) {
  59. cursorObject.cursorX = Math.round(event.pageX - cursorObject.offsetLeft)
  60. }
  61. };
  62. $(function () {
  63. cursorObject.run($("#" + IDLoader))
  64. })
  65. })
  66. };
[moderator reformatted]