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.

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

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

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Problem to master page 11 102
jQuery ajax calls not working with ASP.Net Web Forms when FriendlyUrls are added 2 574
USPS CityStateLookup question 3 96
Facebook custom search 4 222
In this short web based tutorial, I wanted to show users how they can still use the powers of FrontPage in conjunction with Expression Web 3.  Even though Microsoft eliminated the use of Web components, we can still use them with FrontPage and edit …
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…
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

751 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