Arrgh, need simple tutorial for javascript mouseover for changing image.

I used to be able to do this. Now I google and every tutorial is telling me to use different code and none of it is working. Arrgh. Using hostgator and cpanel.

You can do most hover effects with CSS, these days. Javascript for something so trivial is not usually necessary.

Though it depends on what you’re using it for.

Have a banner that I want to highlight menu choices as the user mouseovers. Plan to break up the banner graphic and us CSS <div> to position the different parts. Can you point me to this CSS hover effect you speak of? Does it work in all current and recent browsers?

Here is the webpage so you can see the banner I am trying to split up:

HOME ABOUT PRODUCE and CONTACT are the menu choices, HOME is highlighted like I want to do this.


Use the CSS :hover effect to change the background. Something like this.

#menu div.button {
	width: 150px;
	height: 30px;

#menu div.button a {
	background: url(/images/buttonbg.gif);
	text-decoration: none;

#menu div.button a:hover {
	background: url(/images/buttonbghover.gif);

There are ways, using entirely CSS, to do everything you want, without needing image slices, by just applying opacity etc, but that’s complicated for a beginner.

That code would be inside a <div> tag of the image slice?

I have the stylesheet in a different file. Here is the messed up HTML:

Here is the css file:

Or does the code go in the .css file for the div description.

/not exactly a beginner, just with javascript and css
//worked with Radio Shack Level II Basic and a lot of other programming languages up to SQL

In the HTML, place inside the “div.banner” one div per menu item, each called “button.” Put the text of the links inside each div.

Then place my code in the CSS file.

It’s far from complete, it was just an example of how to use the “background” CSS option. There’d be a lot more required to make it work the way you want.

The thing is, I used to be able to do it so easily in javascript, but I am rusty and can’t make any of this stuff work.

I am all for CSS, and am trying to learn it. Perhaps you know an online tutorial that can step me through this. I am doing this site for a friend, not getting anything monetary out of it. I just want to help her promote her farming.

Let’s take this offsite, we can get through this via email because it would take half a day for me to go through the best way to achieve all you want.

I’ve sent you a PM.

Quick version…

For each “button”:

<img src="button.gif" onMouseOver="this.src= 'button_over.gif';" onMouseOut="this.src='button.gif';" border="0" />

Here’s my example of how to use CSS and png transparency to get a rollover effect on top of another image.

There are many different, and arguably better, methods.

This seems to work. But it doesn’t seem to be javascript. Some new part of HTML? Very simple. So far so good, but this looks like exactly what I want. If I can stick these in a <div> box and put them where I want, I am gold. Thanks.

Stan, I’ve written a JS routine that does what you want but, over and above the CSS option, it also pre-loads the alternative images when the page loads in. Over slower connections, not preloading the images can cause a placeholder on hover for a few seconds, rather than the alternative image. PM me if you’d like me to send it.

No, it’s totally Javascript. It’s super basic Javascript. The most simplest way of doing a mouseover. “When the mouse is on this object, the src value of the object is button_over.gif. When the mouse is not on this object, the src value of the object is button.gif.”

What you really should do is make a table and put your entire header in it and be done with all of this nonsense. No divs, no transparent pngs, no weird shit…

<table cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="5"><img src="top_part.gif"/></td></tr>
<tr><td><img src="button1.gif"/></td>
<td><img src="button2.gif"/></td>
<td><img src="button3.gif"/></td>
<td><img src="button4.gif"/></td>
<td><img src="the_rest.gif"/></td></tr>

The way to make that work is to take the entire header and slice it in to 6 parts - a top part, 4 buttons and the picture to the right of the button. Then put it back together with the above table coding.

If you set your body margin & padding to 0, you can set that whole table on top of a background that is the same as the background of the header, except super wide. That way your header can be static sized and your background can be chopped off by the browser screen thus eliminating the side scroll.

I’ve said too much. Hope this doesn’t confuse you more…

I’m glad to see that the idea that HTML tables are evil is fading away again.

Well, this thread is 10+ posts about building shit in CSS and me, a 15-year-veteran suggesting tables, so don’t be so quick to assume the meme has left us.

Unless this happens to go 24 hours without an argument to my post, then yes, we may claim victory.

Well, I got it to work with <div> and some simple code, but the whole thing breaks down in IE. Works great in Firefox and Chrome, so I think your table method may be the best way for good cross browser operability. God I hate Explorer.

And I am developing on XP so I can’t even install IE9. So here’s a big fark you to Microsoft. You used to be cool. Sometime around Word 2.0 you were really hitting your stride! What happened to THAT Microsoft? The Microsoft that could make the competition a memory by coming up with such a cool product? The wreath was layed upon that grave a long time ago…

And here’s a link to the page in question-

Most front end web development today seems to focus around YUI or jQuery. In general, it’s easier to use a library that provides the functions you need (and either of the ones mentioned above do just that) than to roll your own.

With that said, I have been out of the web development world for a couple years, so there may be a change in approach of late. But, a pre-existing library, especially for beginners, is often a big time saver since all the cross browser issues and other crap is already handled for you.

Here is an example of a jQuery image menu:


Try this one.