Change Image when mouseover button

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
Stef MerlijnDeveloperAsked:
Who is Participating?
 
hhammashConnect With a Mentor Commented:
Hi,

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">
<html>
<head>
<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();
}
MM_reloadPage(true);

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 (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<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')">
</body>
</html>



This is a cample of what I am talking about.

hhammash
0
 
hhammashCommented:
Hi,

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.

Regards
hhammash
0
 
hhammashCommented:
Sorry for the typo in step 4: It is View>Toolbars>DHTML Effect

0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
hhammashCommented:
Hi,

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.

Regards
hhammash
0
 
Stef MerlijnDeveloperAuthor Commented:
I will try the things you mentioned.
I'll be back.

Thanks a lot.
0
 
hhammashCommented:
You are welcome.

0
 
nowickilCommented:
Hi,

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:

onload="MM_showHideLayers('Image','','hide')

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() {
  MM_showHideLayers('Image','','hide');
  MM_showHideLayers('Image2','','hide');
  MM_showHideLayers('Image3','','hide');
  MM_showHideLayers('Image4','','hide');
  MM_showHideLayers('Image5','','hide');
  MM_showHideLayers('Image6','','hide');
  MM_showHideLayers('Image7','','hide');
  MM_showHideLayers('Image8','','hide');
  MM_showHideLayers('Image9','','hide');
  MM_showHideLayers('Image10','','hide');
  MM_showHideLayers('Image1','','show');
  }


//-->
</script>
</head>

<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')" >
</a>

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

nowickil


0
 
nowickilCommented:
To see what I mean, you can also visit www.lwmusic.org

thanks,

nowickil
0
All Courses

From novice to tech pro — start learning today.