PDA

Click to See Complete Forum and Search --> : Mouse over , swap image

baillieston
01-10-2003, 10:26 AM
I am very new to all this.

I have a list of names on one side of a web page and in the cente I have a square.

When the mouse is moved over the name, a image of them appears in the square. This works fine. I would like to also have some text appear in another square on the page. That text would change on the same link as the image.

e.g if I move the mouse over name A
box 1 would show his / her photo
box 2 would show some details about them

g if I move the mouse over name B
box 1 would show his / her photo
box 2 would show some details about them

Can anyone please help me with this.

Thanks in advance
Joe.
Zach Elfers
01-10-2003, 11:07 AM
<script language="JavaScript" type="text/JavaScript">
<!--

img1 = new Image();
img1.src = "img1.ext";
img2 = new Image();
img2.src = "img2.ext";

//-->
</script>

<a onMouseOver="document.images.src='img1.ext';" onMouseOut="document.images.src='img2.ext';">Name</a>
<br>
<img name="images" src="noImg.ext" width="50" height="100">

Repeat the link for each name.
BestZest
01-10-2003, 02:25 PM
Zach's delt with the image bit which you said worked fine. This is my solution to the text bit:
in JavaScript:

info=new Array("This is Bob, he is 23","This is Joe, he is 32","This is Jenny, she is 165")

function dispText(num) {
document.getElementById("infobox").innerHTML=info[num]
}

This should go in the body:

<span id="infobox">Info will appear here</span>

<a href="JavaScript:dispText(0)">Bob</a>
<a href="JavaScript:dispText(1)">Joe</a>
<a href="JavaScript:dispText(2)">Jenny</a>


Just change and add entries to the 'info' array, and edit the links.

Good luck

BestZest
baillieston
01-27-2003, 12:59 PM
Zach , Bestzest,

Thanks for the help. I really am new at this and can't get this to work. I have been trying for a while now.

This is the code I am using for the picture swap

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var jm = new Image();
var nw = new Image();
var vr = new Image();

jm.src = "location/jm.jpg";
nw.src = "location/nw.jpg";
vr.src = "location/vr.jpg";

function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");
}
// End -->
</script>

</HEAD>


<BODY>

<center>
<table border=1>
<tr><td>
<center><h2>Meet the team:</h2></center>
<p>
<li><a href = "" onmouseover = "doButtons('jm')">PersonA<p>

<li><a href = "" onmouseover = "doButtons('nw')">PersonB<p>

<li><a href = "" onmouseover = "doButtons('vr')">PersonC<p>

<td>
<img name=picture src="blank.gif" width=440 height=300 border=0></td>
</tr>
</table>
</center>

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33%"></td>
<td width="33%">
<p align="center">PHONE NUMBER</td>
<td width="34%"></td>
</tr>
</table>
</center>
</div>


Where do I place the code to make PHONE NUMBER change to the phone number for the person in the image?


Any help greatly appreciated.
Thanks.

:confused:
BestZest
01-27-2003, 02:09 PM
<p align="center">PHONE NUMBER</td>

Instead put:
<p align="center"><span id="infobox">PHONE NUMBER</span></td>

BestZest
baillieston
01-29-2003, 01:23 PM
Thanks very much. I now have this working as I would like.

Baillieston