Guest User

Untitled

a guest
Aug 21st, 2018
65
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.87 KB | None | 0 0
  1. Change image on hover by ID
  2. <section id="wheel_section">
  3. <nav class="position">
  4. <a href="#" class="pos-1">LOC 1</a>
  5. </nav>
  6. <nav class="position">
  7. <a href="#" class="pos-2">LOC 2</a>
  8. </nav>
  9. <nav class="position">
  10. <a href="#" class="pos-3">LOC 3</a>
  11. </nav>
  12. <nav class="position">
  13. <a href="#" class="pos-4">LOC 4</a>
  14. </nav>
  15. <nav class="position">
  16. <a href="#" class="pos-5">LOC 5</a>
  17. </nav>
  18. </section>
  19. <section id="wheel_wheel">
  20. <p>
  21. <img id="the_wheel" src="position_1.gif" width="233" height="233" align="absmiddle" />
  22. </p>
  23. </section>
  24.  
  25. $(document).ready(function(){
  26. $("#wheel_section .position .pos-1").hover(function () {
  27. $('img#the_wheel').attr("src", "position_1.gif");
  28. });
  29.  
  30. $("#wheel_section .position .pos-2").hover(function () {
  31. $('img#the_wheel').attr("src", "position_2.gif");
  32. });
  33.  
  34. $("#wheel_section .position .pos-3").hover(function () {
  35. $('img#the_wheel').attr("src", "position_3.gif");
  36. });
  37.  
  38. $("#wheel_section .position .pos-4").hover(function () {
  39. $('img#the_wheel').attr("src", "position_4.gif");
  40. });
  41.  
  42. $("#wheel_section .position .pos-5").hover(function () {
  43. $('img#the_wheel').attr("src", "position_5.gif");
  44. });
  45. });
  46.  
  47. var wheels = [],
  48. wheelcount = 5;
  49.  
  50. // Preload the images
  51. for(var i = 1; i <= wheelcount; i++)
  52. wheels.push($('<img/>').attr('src', 'position_' + i +'.gif'));
  53.  
  54. // Wire up the mouseenter event on each element
  55. $("#wheel_section>nav>a").mouseenter(function() {
  56. var c = $(this).attr('class');
  57. var i = parseInt(c.substring(c.indexOf('-')+1)) - 1;
  58. $('img#the_wheel').attr('src', wheels[i].attr('src'));
  59. });
  60.  
  61. $(document).ready(function(){
  62. // preload and cache images
  63. var $pos1 = $('<img/>').attr('src', 'position_1.gif').attr('id', 'the_wheel');
  64. var $pos2 ...
  65. ...
  66. var $pos5 ...
  67.  
  68. $("#wheel_section .position .pos-1").hover(function () {
  69. $('img#the_wheel').replaceWith($pos1);
  70. });
  71. ...
  72. }
Add Comment
Please, Sign In to add comment