Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Change Image when mouseover button

Posted on 2004-10-06
Medium Priority
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.

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

LVL 14

Accepted Solution

hhammash earned 2000 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

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

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

Now that Expression Web 4.0 ( is free if you buy or have the full version of Expression Web 3.0, now is the best time to  migrate from FrontPage to Expression Web (http://www.frontpage-to-exp…
This article provides a case study on how our local youth baseball league deployed a new website, including the platform selection, implementation and benefits to the league.
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following:…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…

721 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