This is a discussion on "Javascript Navigation" within the JavaScript Forum section. This forum, and the thread "Javascript Navigation are both part of the Program Your Website category.
|
|
|
|
|
 |
||
Javascript Navigation
|
||
| Notices |
 |
|
|
LinkBack | Thread Tools |
Feb 13th, 2004, 08:11
|
|||
|
|||
|
Javascript Navigation
The navigation on my site consists of 5 images, each one has a rollover, when its clicked it changes the content of an iframe. I need to somehow make the image that is clicked stay highlighted (rolled-over) so that the user knows which section they clicked on, but i also need to make sure all the other rollovers work and the when a different image is clicked, the previous one returns to its normal state.
At the moment my links just look like this: <img name=img1 src=img1.gif border=0 width=20 height=10> Any ideas? Thanks Smokie  |
|
|
|
Feb 13th, 2004, 09:36
|
||||
|
||||
|
Smokie...
Use an onclick event to make the changes stay when you click it. You'll need to use a javascript function to handle the rollovers and the click even and also use a flag for the element to indicate if the element has been clicked. If it has been clicked, then just dissallow the rollover events. When a different element is clicked then obviously you cancel the flag on the previous element. Well.... I know what I'm talking about anyway. lol
__________________
Rob - SEO Specialist Owner & Founder of Webforumz.com I am currently unavailable for private work
Last Blog Entry: Creative Labs threaten developer over home made drivers.... (Apr 1st, 2008)
|
|
Feb 13th, 2004, 13:21
|
|||
|
|||
|
Yea I understand you Rob, similar methods are used in a drop down menu...
I think that you need to create a variable, that holds the ID the button that has been clicked. Then when another one is clicked, you use that ID to set its image back to the regular state. When I get home from school, I'll see if I can whip up a script to do all of this  |
|
Feb 13th, 2004, 13:48
|
|||
|
|||
|
alright nevermind, I just did it now in school...
Make sure to read the directions in the comments  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> Javascript </title> <script type="text/javascript"> <!-- // Use the following variables to easily change images. // If you want unique images for each link, then just // change the second argument (currently it's either // "hoverImage" or "noHoverImage") to the file path // that you want // this variable holds the original state image... noHoverImage = "images/button_bg.jpg"; // this variable holds the hover state image hoverImage = "images/button_bgover.jpg"; // leave this variable alone // it holds the ID of the image // that was clicked keepHover = null; function changeImages(which,to) { // if no dom.. return if(!document.getElementById || keepHover == which) { return false; } // get object obj = document.getElementById(which); obj.src = to; } function keepHoverState(which,to) { // if no dom return if(!document.getElementById) { return false; } // get the old keepHover and change it back if(keepHover != null) { oldObj = document.getElementById(keepHover); oldObj.src = noHoverImage; } // get object obj = document.getElementById(which); obj.src = to; keepHover = which; } --> </script> </head> <body> [img]images/button_bg.jpg[/img] [img]images/button_bg.jpg[/img] [img]images/button_bg.jpg[/img] [img]images/button_bg.jpg[/img] [img]images/button_bg.jpg[/img] </body> </html> |
|
Feb 17th, 2004, 09:22
|
|||
|
|||
|
omg thanx jamslam!!!
 perfect! |
|
Feb 17th, 2004, 13:26
|
||||
|
||||
|
Hey smokie.... those avatars rock!!
__________________
Rob - SEO Specialist Owner & Founder of Webforumz.com I am currently unavailable for private work
Last Blog Entry: Creative Labs threaten developer over home made drivers.... (Apr 1st, 2008)
|
|
Feb 17th, 2004, 14:01
|
|||
|
|||
|
cheers dude, do you like my avatar randomiZOR!! [:P]
|
|
Feb 18th, 2004, 10:39
|
||||
|
||||
|
Yeah.... and I first thought our dynamic signatures feature was knackered.
__________________
Rob - SEO Specialist Owner & Founder of Webforumz.com I am currently unavailable for private work
Last Blog Entry: Creative Labs threaten developer over home made drivers.... (Apr 1st, 2008)
|
|
Feb 24th, 2004, 15:33
|
|||
|
|||
|
Damn i see why i am still learning html this whole topic confused me i will look into all this when i am ready and in my eyes i am not ready for all this but i would like to learn how to make it where i change the pages in an iframe without changing the frame page is there an easy way to do this in html using maybe some added script or am i gonna have to do double pages for easy iframe page i want to use?
|
|
Feb 24th, 2004, 15:55
|
|||
|
|||
|
dude, some punctuation would be nice!!
you need to use a target on your links to change the iframe without changing the main page, like this: a href=page.html target=iframeName |
|
Feb 24th, 2004, 16:09
|
|||
|
|||
|
Sorry about the punctuation. Thanks a lot for the tip on the target i will try to work that into my site and see what i can come up with. I may mess it up so expect some more questions on this and thanks again it is very great of you guys to share you knowledge with all of us newbies
|
|
| Tags |
| javascript, navigation |
| Thread Tools | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| javascript rollover navigation through css | supbtsup | JavaScript Forum | 2 | May 27th, 2008 02:56 |
| javascript navigation | buttercup | JavaScript Forum | 3 | Jan 24th, 2008 10:22 |
| Javascript navigation problems | mikka23 | JavaScript Forum | 8 | Sep 30th, 2007 12:22 |
| Javascript Navigation Will Not Work With Firefox | cpando1974 | JavaScript Forum | 2 | Apr 1st, 2007 14:56 |
| JavaScript Navigation II | soda | JavaScript Forum | 3 | Sep 29th, 2005 11:44 |
