Response title
This is preview!
Navigation!
in Getting Started
•
7 years ago
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>
- $(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.
1