javascript - img onHover & onClick effects for navigation -

the website i'm working on: stipz.50webs.com

p.s. home nothing now

since i've nailed onhover , onmouseout part want add navigation effects each div/img let end-user know div clicked / active

when div active want change src , onmouseout means have change rest of div/img default ones using possible have multiple declarations on multiple div id in single function?

i might figure out code if there possibility 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 1 again, think it's beyond me coder. made jsfiddle it's not working jsfiddle link alternative link: http://stipz.50webs.com/div_navigation.html

what tried add/remove class onclick each div

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

i think can done css only,see fiddle

basic css , game.

.link:link{   text-decoration:none;   display:block;   width:100px;   height:100px;   border:1px solid #666;   background-color:red; }  .link:hover{   background-color:green;  } .link:visited{   background-color:blue; } 

now changed color in fiddle because did not want take pain in uploading picture jsfiddle. can change background pic there, no use of jquery

ps:- see have used img inside a, think can remove img , set background image of a