View Full Version : Javascript positioning

05-21-2009, 11:18 AM
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

<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}
position: relative;
z-index: 0;

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 */

When i do my images, I do somthing like

<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