Search code examples
javascripthtmlimagebuttonrollover

Need help with Image Buttons


<a href="#" 
    onmouseout="MM_swapImgRestore()" 
    onmouseover="MM_swapImage('Home','','Images/menuButtons/home_out.png',1)" 
    onclick="alert("Hello")" ><img onclick="alert("Hello")" 
    src="Images/menuButtons/home_on.png" 
    alt="Home" name="Home" width="164" height="64" border="0" id="Home" />
</a><br/>

I'm trying to create a navigation menubar with rollover images. Rollover Image part was created by Dreamweaver hence all those MM_functions. But onclick, I want to change the content of main frame, not just open a hyperlink.

So I tried onclick="JS_funtion()" aswell as onMouseDown and onMouseUP. Nothing seemed to work. It's not even calling the functions as the example shows, I tried to call alert() and still not working. I'm new to HTML/Javascript.

What am I doing wrong?

My site is www.sitebloviate.com


Solution

  • Arjan is right, you can't use double quotes inside a double-quoted attribute.

    Other things:

    • you don't need onclick in your image, the anchor tag will do,
    • setting href="#" is generally bad practice. It's better to make it a real link so that if the user right-clicks and chooses "open in new tab" it takes them somewhere meaningful.

    To do the latter though, you'll need to cancel the event by returning false.

    Example:

    <a href="/path/to/real/page" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/menuButtons/home_out.png',1)" onclick="alert('Hello'); return false;" >
    <img src="Images/menuButtons/home_on.png" alt="Home" name="Home" width="164" height="64" border="0" id="Home" /></a><br/>