I am trying to work with button images, essentially a buttonbar, for the navigation of my site. So far I am not finding a solution to my problem.
The html:
-
- <div id="pagecontent">
- <a id="pnavm" class="p1nav1" href="#"><img src="images/btnWho.png" alt="p1nav1" /></a>
- <a id="pnavm" class="p1nav2" href="#"><img src="images/btnWhat.png" alt="p1nav2" /></a>
- <a id="pnavm" class="p1nav3" href="#"><img src="images/btnWhy.png" alt="p1nav3" /></a>
- <a id="pnavm" class="p1nav4" href="#"><img src="images/btnHow.png" alt="p1nav4" /></a>
- <a id="pnavm_Hover" class="p1nav1" href="#"><img src="images/btnWho_Hover.png" alt="p1nav1_Hover" /></a>
- <a id="pnavm_Hover" class="p1nav2" href="#"><img src="images/btnWhat_Hover.png" alt="p1nav2_Hover" /></a>
- <a id="pnavm_Hover" class="p1nav3" href="#"><img src="images/btnWhy_Hover.png" alt="p1nav3_Hover" /></a>
- <a id="pnavm_Hover" class="p1nav4" href="#"><img src="images/btnHow_Hover.png" alt="p1nav4_Hover" /></a>
- </div>
The javascript:
- $(document).ready(function(){
- $("#pagecontent #pnavm_Hover").fadeTo("fast", 0.0);
- $("#pagecontent #pnavm_Hover").hoverIntent(fadeon,fadeout);
- $("#pagecontent .bubble1").fadeTo("slow", 1.0);
- $("#pagecontent .p1nav1").fadeTo("slow", 1.0);
- var btnArray=[];
- btnArray.push($("#pagecontent #pnavm_Hover")); //thought of creating an array and looping through it to see which button was clicked
- $("#pagecontent #pnavm_Hover").click(function(){ //thought
- console.log(this);
- });
- });
- function fadeon(){ $(this).fadeTo("fast", 1.0);}
- function fadeout(){ $(this).fadeTo("slow", 0.0);}
I'm looking for a way to reset all of them when any one of the buttons are clicked fade its hover image to on. I'm coming from action script and it doesn't appear there are any similarities in how I would handle this compared to it. If someone could point me in the right direction, I would greatly appreciate it.