File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Change Image when Link is Active Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Change Image when Link is Active" Watch "Change Image when Link is Active" New topic
Author

Change Image when Link is Active

Bhaswati Karmakar
Ranch Hand

Joined: May 10, 2001
Posts: 32
I have button(Image)for navigation. When I click on this link and navigate to that page, how can I change the button(image) to indicate that the link is active ?
thanks
Anonymous
Ranch Hand

Joined: Nov 22, 2008
Posts: 18944
You can do this with style sheets if your links are <A> links. If you are using a .GIF to make a graphic button, you will have to use javascript and DHTML. Create an onClick event handler for your button and change the SRC property of the IMG inside the handler. You will, of course, have to create a .GIF representing your button in its "clicked" state. This example comes from msdn which is one of my favorite online resources for HTML, DHTML, and JavaScript. I just like the way they have the elements, properties, style elements, and so on layed out.
Bhaswati Karmakar
Ranch Hand

Joined: May 10, 2001
Posts: 32
thanks for your post. what is the syntax of using .gif with active link in style sheet, I mean, here:
<style A:active{ }</style>
I have the following:
<p align="center"><a href="index.asp"
onMouseOver="document.buttonHome.src=imgHomeover.src"
onMouseOut="document.buttonHome.src=imgHomeout.src"
<img border="0" src="images/buttons/Ohome.gif"
Name="buttonHome"></a>
Button(home) is a link to index.asp. How can I make a third button display in the above, when I am in index.asp page ?
thanks
Anonymous
Ranch Hand

Joined: Nov 22, 2008
Posts: 18944
You can't use images with the :active property. It wants style-element/value pairs. Since there is no style element for an <A> controlling its image source, you will have to handle this with event code.
I'm guessing that the snippet you posted is part of a navigation frame? If you want to dynamically hide and show buttons ( or add and remove them ) there are many ways to get the job done. Probably the easiest is to add all of the buttons that you want to use and set their "visibility" property to "hidden" or "visible" as appropriate. For example:

When the user clicks on button1, button3 becomes visible. When they click on button2, button3 is hidden again. Is this what you had in mind?
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Change Image when Link is Active
 
Similar Threads
ScrollPane
Menu link image change when I click the button
Httpsesion Listener is not working properly?
changing link background image dynamically
Popup window for ajax