Using tables, I have created a navigational bar for my website. For each "button" that is made up by a cell, I have specified a background image rather than using the entire image, because I like the effect I get and the scalability it provides for my "buttons". I then have set up text hyperlinks in each cell with an onMouseover piece of javascript that gives a description of the link in the status bar. Now I am to the part that has me stumped. I would like to find a way to make the normal background image switch to an alternate background image when the mouse is placed over the "button" or cell and then revert back to the
>normal/default background image when the mouse is removed from the "button" or cell. Is there a way to do this with java, or preferable javascript? (You can see what I've got set up at www.inlimbo.com). Thanks in advance for any pointers anyone might be able to give me.
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
I don't think you can change the background image of a table data cell (or if you can, it wouldn't be as easy or cross-browser compatible)... it would be much easier to make each cell into a separate image and use a standard onMouseOver script like the one you can generate at http://www.geocities.com/~
chrisbolt,
Yes, I'd thought of just going with a specific image rather than a background and using onMouseover commands to do the image switching as you suggested. But, I'm rather attached to the effect that my "buttons" get when I use the image as a background. It makes the page rescale itself to whatever size the visitor wants to make their browser window. A firm image button won't give me that exact same effect. Thanks for the link, though. Haven't seen that one before. If I could give ya 10 points for the link I would. :) Anyone else have a solution, or am I just wishing on a pipe dream here?
It is possible to do this. The trick is to use the background image as the "off" button and then mouseover "on" images. You'll see it done very well at http://www.court.gov.il/mi
That is all in Hebrew and I have no idea what it's all about, but view source (of the lower frame) and you'll see that the background image is actually the entire organisational diagram and then mouseovers make small arrowheads appear.
In your case your background image would need to be the buttons in "off mode" then when you mouseover it the smaller images, plus arrowheads, appear.
The only problem in setting it up is the Netscape browser offset. Netscape puts a margin of several pixels top and to the left of each page, meaning everything goes out of alignment if you're trying to mouseover the top. There's an explanation of how to eliminate this at http://www.zeldman.com/tri
The owners of the Hebrew site assure me that it's cross-browser compatible (I've seen it only in Netscape).
It is by no means simple, but it can be done with careful planning and methodical coding.
Incidentally, since you're talking buttons and not background images, you'll want to use a left hand frame to hold the buttons so the background doesn't repeat in browsers with wide windows (it will also cut down the file size of your background gif). In your frameset, be sure and set the width of the left frame to the fixed width of your buttons, and let the right hand frame resize to suit the browser.
Hope that helps.
Polemic: It would only work if there was no text in the cell with the background image. The neat idea of jaguarr was to have an imagebackground for a normal text link so the cell would stretch with browser resizing. If you resize the cell and then shove an image on top with onMouseover, the underlaying image would show though and the tekstlink would disappear. The whole idea of having resizable buttons would be lost...
Still a neat hack, though, snip 8<---
Michel
If the cell was resized the mouseover button would appear to be surrounded by the color set as the background of the cell, surely? You're right that re-sizing the cell would affect the appearance, but if, say, the mouseover gif had a lighter shade of red as a background it would still look quite good, surrounded by the darker red of the re-sized cell's background.
So yes, good point. But the underlying image showing through? You mean the text? The text won't resize no matter how large the window so as long as the mouseover gif is big enough to cover it and the background isn't transparent, either nothing will show through (if the cell is the same size as the gif) or a "border" will appear if the cell is resized to larger than the gif.
Sheesh that's hard to explain, hope I've explained myself.
~~~~~~~~~~~~~~~~~~~~~~~
|@@@@@@@@@@@@@@@@@@@@@@|
|@@ ---------------- @@| <----- Button with cell resized
|@@| I've been |@@| <----- larger than mouseover gif
|@@| clicked! |@@| <----- when "on" (mouseovered)
|@@ ---------------- @@| <----- @@@@ is bg color of cell
|@@@@@@@@@@@@@@@@@@@@@@|
~~~~~~~~~~~~~~~~~~~~~~~~
Urrgh, the illustration that looked so neat in the textarea looks a mess on the page - should have allowed for the greater character width of the font.
I see what you mean, Michel. I thought the important thing was to have resizeable buttons and that's about the only sure way of doing it. But if it's to stay with text links (which could always be faked by putting the same text on the mouseover gif) *and* have the image change, then the above won't achieve it.
I have no idea if this will work, but what about invoking a "document.write" from the "onmouseover" - i.e. "onmouseover=document.writ
That's effectively asking the script to re-write itself so I would imagine it's impossible, because as soon as the write started the mouseover would effectively no longer exist. Could set up an interesting loop!
Might be worth a try, just to see what happens. I will ask around and see if maintaining the text *and* changing the color onmouseover is possible, but I wouldn't hold my breath.
Polemic: If the mouseover image has text on it, the whole idea is lost, then the background image in the table also could have had text from the start and then it did not need to be a background image.
To change framecontent with document.write form the same frame does not set up a loop, it crashes most browsers.
The way to replace html on a click in the page that needs to be replaced is to return html from the function called, not to use document.write. (This will however give security violation in NS 4.04 after a few changes since the protocol is javascript and ns 4.04 thinks it is from another domain).
Michel
Business Accounts
Answer for Membership
by: mplungjanPosted on 1998-09-29 at 23:59:08ID: 1271614
Unless the background images show up in the doucment.images array I would not give you many chances.
Try having one backkground image on the page and do an
onMouseover="document.imag
If it changes, you are in business, if not you will need ot look at layers
Michel