JavaScript rollover menu

Question

I am new to JavaScript and I wanted to try and make a simple rollover menu for a webpage that has images that change when you rollover with your mouse. I keep running into problems: the rollover images appear, but they are all going into the same spot.

<script language="javascript">
if (document.images) {
    button1 = new Image;
    button2 = new Image;
    button1.src = 'mail.png';
    button2.src = 'mail2.png';
    button3 = new Image;
    button4 = new Image;
    button3.src = 'gear.jpg';
    button4.src = 'gear2.jpg';

    <body>
    <a href="#" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src">
    <img src="mail.png" width="100" height="60" border=0 name="rollover"></a>
    <a href="#" onmouseover="document.rollover.src=button4.src" onmouseout="document.rollover.src=button3.src">
    <img src="gear.jpg" name="rollover2" border="0" width="100" height="60"></a>
    </body>
}

We'd of course need to see your code to actually give you an answer. Use the [edit] button to add the relevant parts. — Wesley Murch, Mar 07 '12 at 19:05

score 0 · Answer 1 · answered Mar 08 '12 at 09:28

You are way too new to javascript if you are writing code this way. I suggest that you study some js and css. You can do this job easily using css, js or jquery, but it looks to me that you need to get some skills before you manage to write decent code. I could write a working solution, but i believe it would not help you as much as studying.

JavaScript rollover menu

1 Answers1