Hi, extremely new to javascript so excuse my lack of knowledge...I have managed to get my image to enlarge on a mouseover event. This is basically done by the css shown below
Code:
<style type="text/css">
<!--
body {
	background-color: #66CCFF;
	background-image: url();
}
body,td,th {
	color: #000000;
}
.style13 {font-size: 18px}
.style15 {font-size: 24px}
.style16 {color: #FF0000}
-->
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
When i do my images, I do somthing like
Code:
<th width="160"><div align="center"><a class="thumbnail" href="#thumb"><img src="southAmerica/brasil/avocado.gif" width="140px" height="140px" border="5" /><span><img src="southAmerica/brasil/avocado2.gif" /><br />Ginger.</span></a></div>
          <p align="center" class="style13">Large Avocadoes</p></th>
It all aligns up nicely and works well. The only problem is that the new image which is enlarged does not position itself relative to the mouse. All enlarged images are always enlarged at the same point from the small image. Basically, what I need to try and do is make sure that the enlarged image is displayed in an appropiate location, not the same location all the time. At the moment, When the smaller images on the right hand of my webpage are enlarged, half of the enlarged image is cut of by the boundaries of the webpage. How would i go about solving this problem? As I say, I am a total newbie and have no idea where to even start. Any help appreciated.
Thanks very much
Nick