Hover images help

[Illidan]

In this link they showed how to make hover over pop up images the only problem is that it makes them pop up to the right of the image and in the website im designing it cuts them off the right of the screen and down the bottom a bit is there anyway i can edit it so it just pops up dead center of the screen or somthing similar?


http://www.dynamicdrive.com/style/cs...ge-viewer/P10/

[stringcugu]

look in the spain and image
has this line
style="position:absolute;left:124;top:-64;width:80;height:60;"

<style type="text/css">
img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}
</style>
<script >
var ns=(document.layers);
var ie=(document.all);
var Ver4=(document.getElementById && !ie);
var VER=(px=(ns||Ver4||+"px"))?true:false;
if (document.images){
(function()
{
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim)
{
return dim[0] * cos + dim[1]
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width=widthHeight (e.ims[i].w);
im.style.height =widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump)
{
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
else
if (!e.ims[i].d && e.ims[i].jump > 0)
{
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}
//,
d = document.images,
i = d.length - 1;
for (i; i > -1; --i)
i = i + im.src;
if (!e.ims[i])
{
im.title = '';
e.ims[i]={im : new Image(), jump:-550};
//e.ims[i] = {im : new Image(), jump :-810};
e.ims[i].im.onload = function()
{
e.ims[i].w =[e.ims[i].im.width= 511,11];
e.ims[i].h =[e.ims[i].im.height=511,11];
};
e.ims[i].im.src = im.src;
return;
}
clearTimeout(e.ims[i].timer);
e.ims[i].d =111;
resize ();
return;};
expConIm.ims = {};
expConIm.r = new RegExp('\\bexpando\\b');
if (document.addEventListener)
{
//document.addEventListener('onClick', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else
//if (document.attachEvent)
{
//document.attachEvent('onClick', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
</script><style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.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*/
left: -10px;
top: -10px;
width:800px;
height:840px;
border-width: 30;
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>
<a class="thumbnail" href="#thumb">Zoka Coffeecccccccc<span>Zoka CoffeeZoka Coffeexxxxxxxxxxxxxxxxxxxxxxxxxxxxx<img id=ty src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall1.jpg" onmouseover=ty.src="usa.gif" ;style="position:absolute;left:2;top:-24;width:480;height:420;"/><br />Zoka Coffee</span></a>
<a class="thumbnail" href="#thumb"><img id=tr1 src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall1.jpg" width="100px" height="66px" border="0" /><span><img src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall1.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall2.jpg" width="100px" height="66px" border="0" /><span><img src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall2.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />
<br />

<a class="thumbnail" href="#thumb">Dynamic Drive this one<span><img src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall2.jpg" style="position:absolute;left:24;top:-84;width:680;height:620;"/></span><br /><span><IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall1.jpg" WIDTH="20" HEIGHT="25" style="position:absolute;left:124;top:-64;width:80;height:60;"class="expando"><IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall3.jpg" WIDTH="100" HEIGHT="75" class="expando" onmouseover=img_roll(555,555)>
zpp,ong Dynamic Drive</span><spain><IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall3.jpg" WIDTH="100" HEIGHT="75" class="expando" onmouseover=img_roll(555,555)>
</spain></a><br />


--------------


<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall3.jpg" /><br />Zoka Coffee</span></a>
<a class="thumbnail" href="#thumb">Zoka Coffee<span>Zoka CoffeeZoka Coffeexxxxxxxxxxxxxxxxxxxxxxxxxxxxx<img src="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall1.jpg" onmouseover='img_rolla(555,555);' ;style="position:absolute;left:2;top:-24;width:480;height:420;"/><br />Zoka Coffee</span></a>

<IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall1.jpg" WIDTH="100" HEIGHT="75" class="expando">
<IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall2.jpg" WIDTH="100" HEIGHT="75" class="expando">
<IMG SRC="http://kerliwallpapers.webs.com/wallpapers/shared/jpg/wall3.jpg" WIDTH="100" HEIGHT="75" class="expando" onmouseover=img_roll(555,555)>
</center><title>Kerli Wallpapers : Powered By KerliTv</title>
<center>