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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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.

Visualize your virtual and backup environments

Create well-organized and polished visualizations of your virtual and backup environments when planning VMware vSphere, Microsoft Hyper-V or Veeam deployments. It helps you to gain better visibility and valuable business insights.

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.


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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure ( It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
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 create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and Log…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

749 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