how can I specify the links in a menu bar ?

Posted on 2003-02-23
Medium Priority
Last Modified: 2010-04-09
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.
Question by:persheng
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2

Accepted Solution

kasandra earned 400 total points
ID: 8006964
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!

LVL 53

Expert Comment

ID: 8820408
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:



Expert Comment

ID: 8836670
I offered a viable solution  - in the absence of feedback its hard to improve on it if need be!
LVL 53

Expert Comment

ID: 8963777
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

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question