Change Image when mouseover button

Posted on 2004-10-06
Last Modified: 2013-12-24
Hi there,

I would like the following.
On my webpage I have serveral buttons. And I have one big Image in the middle of the page.
Dependent on the button where the mouse is over a different image must be displayed.

How can I accomplish this?

Please supply me with working code.

Thanks Stef
Question by:Delphiwizard
  • 5
  • 2
LVL 14

Expert Comment

ID: 12236271

You need image swapping.  It is very easy. I guess that your buttons are images.

1- Keep a default image that will always be displayed when no button has the mouse over
2- Save the images that you want to display in "images" folder
3- Click once on the button,  then select
4- View>Toolbards > DHTML Effect
5- in the "ON" pull down select MouseOver
6- In the "Apply" pull down select Swap Picture
7- In the last pull down select choose picture,  then browse to the desired picture

Repeat this procedure for all buttons, then save the page.

Note that all images should have the same size as the big picture in the middle.

LVL 14

Expert Comment

ID: 12236292
Sorry for the typo in step 4: It is View>Toolbars>DHTML Effect

LVL 14

Expert Comment

ID: 12236327

The above will swap the button with the image that you selected.

If you want to display the image in the centre not instead of the button,  you will have to create layers.

When you take the mouse over a button the layer will be displayed in the middle of the page.

I can give you a sample that you can use if you give me how many buttons you are talking about and.

It will be perfect if you can give me the names of the buttons and the names of the pictures associated.

LVL 14

Accepted Solution

hhammash earned 500 total points
ID: 12236381

Copy this code into NotePad,  then save the document as Layer.htm then view it in your browser.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if ( {; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }

<body onLoad="MM_showHideLayers('Image','','hide')">
<div id="Image" style="position:absolute; left:232px; top:49px; width:255px; height:206px; z-index:1"><img src="../My%20Documents/My%20Pictures/Sample.jpg" width="283" height="212"></div>
<img src="../My%20Documents/My%20Pictures/contact-ms_icon.gif" name="Button1" width="32" height="32" id="Button1" onMouseOver="MM_showHideLayers('Image','','show')" onMouseOut="MM_showHideLayers('Image','','hide')">

This is a cample of what I am talking about.

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!


Author Comment

ID: 12236452
I will try the things you mentioned.
I'll be back.

Thanks a lot.
LVL 14

Expert Comment

ID: 12236585
You are welcome.


Expert Comment

ID: 13701972

thanks hhammash for the great tip above.  I just tried using this code to implement the mouse over effect. I have about 10 buttons, and as I mouse-over each button, a different image does appear beautifully in the center of the page. I just have one problem.  When the page loaded for the first time (using IE), all of the center images appeared briefly, layered one on top of the other, before the code:


seemed to execute for each image.  I ended up with the image I wanted on the screen, but having all 10 images load and then disappear is something I want to avoid.

To resolve this, I tried writing a function that would specifically hide each image, and just show the one image I want at page load. Now, however, I'm getting no center image at all on page load.  I'm a bit new to java script, so I'm hopeful that I just have a very minor error. Can you help?

To summarize, I just want to ensure that only one center image will  appear at the time of the initial page load, and the images that correspond to each button will only be seen when the mouse is moved over the correct button.

function LL_pageLoad() {


<body background="images/backgroundimage.jpg"
      onLoad="LL_pageLoad" link="#3A0B1B" alink="#C0C0C0" >
<div id="Image"  style="position:absolute; left:300px; top:200px; width:255px; height:206px; z-index:1">
<img src="images/musicintheparktext.jpg" width="263" height="212" onload="MM_showHideLayers('Image','','hide')" > </div>
<a href="concert.htm">    
<img border="0" src="images/button_concertschedule.jpg" name="Button1" width="166" height="26" id="Button1" onLoad="MM_showHideLayers('Image','','hide')" onMouseOver="LL_swapImage('Image', 'Image1')" onMouseOut="LL_swapImage('Image1', 'Image')" >

Thanks in advance for any help you are able to give,



Expert Comment

ID: 13702146
To see what I mean, you can also visit



Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
What website technology to use for a real estate listing business? 2 88
Web Modal Window 1 75
bootstrap align photos when printing 10 76
bootstrap submit button 12 116
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: : Open Page or Post…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

912 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

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now