• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 261
  • Last Modified:

how can I specify the links in a menu bar ?

I have a page and there is a menu bar in it.
In menu bar there are some images as link.
my problem is that I want when I click on one of the images,it become highlighted (another image apear instead of that) and the other images apear like their first position.
  • 2
  • 2
1 Solution
You need to use JavaScript to do that.

There are a number of variations on how to do it.

Here is one way of doing it..

Put this in the HEAD of your HTML document:

<script type="text/javascript>
  // precache script
  var home_out = new Image();
  home_out.src = 'out_image.jpg';

  var home_over = new Image();
  home_over.src = 'over_image.jpg';

  // rollover function
  function changeImage(image, state) {
    eval("document.images['" + image + "'].src = " + image + "_" + state + ".src");

The "precache" part of the script loads your images into the cache when the page first loads, so when you move your mouse of the images, it doesn't take too long to swap them.

If you leave the precache part out, when you first move your mouse over the image, it will need to load the rollover image (in this case the "over" image) at that point, which may cause a delay in the image appearing.  

The example here is just for one rollover - you would need to precache each image you want the rollover to apply to, ie an over and out version for each image you want to be able to "highlight". The "over" image is the highlighted one, the "out" image is the normal one.

Then in the BODY of your HTML, the code for your image link is:

<a href="index.html"
    onMouseOver="changeImage('home', 'over');"
    onMouseOut="changeImage('home', 'out');"><img id="home" name="home"
    src="out_image.jpg" border="0"></a>

This example will work in most browsers (IE, Netscape 4+ etc).

As I said, there are numerous variations on this theme. I imagine others will post other scripts that do exactly that - the same thing using slightly different code. I find this particular one works well for me.

If anything in my example isn't clear, please let me know!

This question has been classified abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.

Unless it is clear to me that the question has been answered I will recommend delete.  It is possible that a Grade less than A will be given if no expert makes a case for an A grade. It is assumed that any participant not responding to this request is no longer interested in its final disposition.

If the user does not know how to close the question, the options are here:


I offered a viable solution  - in the absence of feedback its hard to improve on it if need be!
It is time to clean this abandoned question up.

I am putting it on a clean up list for CS.

points to kasandra


If anyone participating in the Q disagrees with the recommendation,
please leave a comment for the mods.



Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now