Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Change image on hover by ID
- <section id="wheel_section">
- <nav class="position">
- <a href="#" class="pos-1">LOC 1</a>
- </nav>
- <nav class="position">
- <a href="#" class="pos-2">LOC 2</a>
- </nav>
- <nav class="position">
- <a href="#" class="pos-3">LOC 3</a>
- </nav>
- <nav class="position">
- <a href="#" class="pos-4">LOC 4</a>
- </nav>
- <nav class="position">
- <a href="#" class="pos-5">LOC 5</a>
- </nav>
- </section>
- <section id="wheel_wheel">
- <p>
- <img id="the_wheel" src="position_1.gif" width="233" height="233" align="absmiddle" />
- </p>
- </section>
- $(document).ready(function(){
- $("#wheel_section .position .pos-1").hover(function () {
- $('img#the_wheel').attr("src", "position_1.gif");
- });
- $("#wheel_section .position .pos-2").hover(function () {
- $('img#the_wheel').attr("src", "position_2.gif");
- });
- $("#wheel_section .position .pos-3").hover(function () {
- $('img#the_wheel').attr("src", "position_3.gif");
- });
- $("#wheel_section .position .pos-4").hover(function () {
- $('img#the_wheel').attr("src", "position_4.gif");
- });
- $("#wheel_section .position .pos-5").hover(function () {
- $('img#the_wheel').attr("src", "position_5.gif");
- });
- });
- var wheels = [],
- wheelcount = 5;
- // Preload the images
- for(var i = 1; i <= wheelcount; i++)
- wheels.push($('<img/>').attr('src', 'position_' + i +'.gif'));
- // Wire up the mouseenter event on each element
- $("#wheel_section>nav>a").mouseenter(function() {
- var c = $(this).attr('class');
- var i = parseInt(c.substring(c.indexOf('-')+1)) - 1;
- $('img#the_wheel').attr('src', wheels[i].attr('src'));
- });
- $(document).ready(function(){
- // preload and cache images
- var $pos1 = $('<img/>').attr('src', 'position_1.gif').attr('id', 'the_wheel');
- var $pos2 ...
- ...
- var $pos5 ...
- $("#wheel_section .position .pos-1").hover(function () {
- $('img#the_wheel').replaceWith($pos1);
- });
- ...
- }
Add Comment
Please, Sign In to add comment