Your assistance please if you can help

@khalidali63Dec 16.2002 — #Help me understand this.

on your webpage at a specific point

you want the images to appear when any link 1+ is mouse over on the page?

Khalid

@ShaunauthorDec 16.2002 — #Yes like this site http://www.microsoft.com/hardware/mouse/womb_info.asp

does that make sense

any help would be appreciated

thank you

@khalidali63Dec 17.2002 — #here you go,

Let me know if you come accross any problems

Copy all of the code below in the body section and njoy

<Script Language="JavaScript">

/*

In the code below I have assumed that in this directory where this html file is,

there is an image directory that has 3 images buttin1.gif and so on.

make sure you chane Image paths to appropriate image paths in your system.

If you desire to dd more images then just the path values in the indexArray

indexArray[4] = "<img src="images/button3b.gif" width="167" height="27" alt="Third Image" border="0">";

indexArray[5] = "<img src="images/button3b.gif" width="167" height="27" alt="Third Image" border="0">";

and so on.Once this is done the create relative table cells just like below,

the only parameter u will need to change in the function calls in mouse over or out events is the index value.it should

follow the sequence.

In case you want to change the default image that displays all the time when user is not initiating a mouseover event

then put the default image path in the

indexArray[0] = "here default image path"

Let me know if you have n e more questions on this

Khalid Ali

*/

var indexArray = new Array();

indexArray[0] = "Image will be displayed in this space.";

indexArray[1] = "<img src="images/button1b.gif" width="167" height="27" alt="First Image" border="0">";

indexArray[2] = "<img src="images/button2b.gif" width="167" height="27" alt="Second Image" border="0">";

indexArray[3] = "<img src="images/button3b.gif" width="167" height="27" alt="Third Image" border="0">";

function swapImage(index,command){

var obj = document.getElementById("imageDisplay");

if(index>0 && command=='on'){

 obj.innerHTML = indexArray[index];
  }else{
   obj.innerHTML = indexArray[0];
  }

}

</Script>

</head>

<body>

<div id="imageDisplay" style="position:absolute;width:200pt; height:50pt;">Image will be displayed in this space.</div>

<span id="links" style="position:absolute;margin-top:50pt;">

<table cellspacing="2" cellpadding="2" border="1">

<tr>

<td>

<a href="somepage.html" onmouseover="swapImage(1,'on');" onmouseout="swapImage(1,'off');">First Link 1</a>

</td>

</tr>

<tr>

<td>

<a href="somepage.html" onmouseover="swapImage(2,'on');" onmouseout="swapImage(2,'off');">Second Link 2</a>

</td>

</tr>

<tr>

<td>

<a href="somepage.html" onmouseover="swapImage(3,'on');" onmouseout="swapImage(3,'off');">Third Link 3</a>

</td>

</tr>

</table>

</span>

Your assistance please if you can help

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Your assistance please if you can help

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴