Stipz Stipz - 3 years ago 160
HTML Question

img onHover & onClick effects for navigation

The website I'm working on: stipz.50webs.com

p.s. HOME does nothing for now

Since I've nailed the onhover and onmouseout part what I want to add is the navigation effects for each div/img to let the end-user know which div is clicked / active

When a certain div is active I want it to change the src and the onmouseout
but that means I have to change the rest of the div/img back to their default ones using
is it possible to have multiple declarations on multiple div id in a single function?

I might figure out a code if there is a possibility for that to work

currently working on:

$('#orgn').click("mouseenter", function() {
$(this).attr('src', 'elements/mp_onhover/origin_on.png');
}).on("mouseleave", function() {
$(this).attr('src', "elements/mp_onhover/origin_off.png");
});


edit:
I've tried working on this one again, I think it's really beyond me as a coder.
I made a jsfiddle for it but it's not working properly
jsfiddle link
alternative link: http://stipz.50webs.com/div_navigation.html

What I tried was add/remove class onClick for each div

$("#div-origin").click( function () { $(this).addClass("ori-active"); }, function () { $(this).removeClass("ori-active"); } );

Answer Source

Long code but I've managed to achieve what I wanted for the navigation effect.

See updated live webpage: HERE

$(document).ready(function() 
{ 
$('.do').click(function() 
 {
  $('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');
  $('.dp').css('background-image', 'url(elements/mp_onhover/ac_profile.png)');
  $('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');
  $('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');
	 $('.do').hover(
	   function() {$('.do').css('background-image', 'url(elements/mp_onhover/ac_origin.png)');},
	   function() {$('.do').css('background-image', 'url(elements/mp_onhover/ac_origin.png)');});	
  	 $('.dp').hover(
	   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');},
	   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');});	
	 $('.da').hover(
	   function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');},
	   function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');});
   	 $('.dc').hover(
	   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');},
	   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); 				
	});
$('.dp').click(function() 
 {
  $('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');
  $('.dp').css('background-image', 'url(elements/mp_onhover/ac_profile.png)');
  $('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');
  $('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');
	 $('.do').hover(
	   function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');},
	   function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');});	
  	 $('.dp').hover(
	   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/ac_profile.png)');},
	   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/ac_profile.png)');});	
	 $('.da').hover(
	   function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');},
	   function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');});
   	 $('.dc').hover(
	   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');},
	   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); 				
	});
$('.da').click(function() 
 {
  $('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');
  $('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');
  $('.da').css('background-image', 'url(elements/mp_onhover/ac_affil.png)');
  $('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');
	 $('.do').hover(
	   function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');},
	   function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');});	
  	 $('.dp').hover(
	   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');},
	   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');});	
	 $('.da').hover(
	   function() {$('.da').css('background-image', 'url(elements/mp_onhover/ac_affil.png)');},
	   function() {$('.da').css('background-image', 'url(elements/mp_onhover/ac_affil.png)');});
   	 $('.dc').hover(
	   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');},
	   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); 				
	});
$('.dc').click(function() 
{
 $('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');
 $('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');
 $('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');
 $('.dc').css('background-image', 'url(elements/mp_onhover/ac_combat.png)');
	$('.do').hover(
	  function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');},
	  function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');});	
	$('.dp').hover(
 	  function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');},
	  function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');});	
    $('.da').hover(
	  function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');},
	  function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');});
	$('.dc').hover(
	  function() {$('.dc').css('background-image', 'url(elements/mp_onhover/ac_combat.png)');},
	  function() {$('.dc').css('background-image', 'url(elements/mp_onhover/ac_combat.png)');}); 
	});
});

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download