Win a copy of Programmer's Guide to Java SE 8 Oracle Certified Associate (OCA) this week in the OCAJP forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Change Image when Link is Active

 
Bhaswati Karmakar
Ranch Hand
Posts: 32
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 18944
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 32
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 18944
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic