Forum Moderators: open
<TABLE border=0 cellpadding=45 width="50%" cellspacing=45>
<TR valign=middle>
<TD align=CENTER
<br><font size=3>51</font>
<title>rollovers</title>
<head> <script>
function preload(src,w,h)
{
var img = new Image(w,h); img.src = src; return img; }
var rollImages = {
a1:{src:"http://#*$!xx/photos/51.jpeg", width: 400, height: 260}
}
function roll(img)
{ var temp = {src:img.src,width:img.width,height:img.height};
var rollImg = rollImages[img.id]; img.src = rollImg.src;
img.width = rollImg.width; img.height = rollImg.height; rollImages[img.id] = temp; }
</script>
<head> <body>
<a href="javascript:void 0;"> <img id="a1" src="/http://#*$!xx/51.jpeg"
width="240" height="140" onmouseover="roll(this)" onmouseout ="roll(this)">
</a> </body>
<TD align=CENTER
<br><font size=3>19</font>
<title>rollovers</title>
<head> <script>
function preload(src,w,h)
{
var img = new Image(w,h); img.src = src; return img; }
var rollImages = {
a2:{src:"#*$!xx/photos/19.jpeg", width: 240, height: 400}
}
function roll(img)
{ var temp = {src:img.src,width:img.width,height:img.height};
var rollImg = rollImages[img.id]; img.src = rollImg.src;
img.width = rollImg.width; img.height = rollImg.height; rollImages[img.id] = temp; }
</script>
<head> <body>
<a href="javascript:void 0;"> <img id="a2" src="http://#*$!xx/photos/19.jpeg"
width="150" height="240" onmouseover="roll(this)" onmouseout ="roll(this)">
</a> </body>
<TD align=CENTER
<br><font size=3>35</font>
<title>rollovers</title>
<head> <script>
function preload(src,w,h)
{
var img = new Image(w,h); img.src = src; return img; }
var rollImages = {
a3:{src:"#*$!xx/photos/35.jpeg", width: 400, height: 260}
}
function roll(img)
{ var temp = {src:img.src,width:img.width,height:img.height};
var rollImg = rollImages[img.id]; img.src = rollImg.src;
img.width = rollImg.width; img.height = rollImg.height; rollImages[img.id] = temp; }
</script>
<head> <body>
<a href="javascript:void 0;"> <img id="a3" src="http://#*$!xx/photos/35.jpeg"
width="240" height="140" onmouseover="roll(this)" onmouseout ="roll(this)">
</a> </body>
ISSUE=
when using this JS, only last photo on page will enlarge on mouseover....trying to apply to up to 16 photos on a page, if I remove the last, it then applies to 2nd to last photo only, and so on.
any suggestions appreciated.
<TABLE border=0 cellpadding=45 width="50%" cellspacing=45>
<TR valign=middle>
<TD align=CENTER
<br><font size=3>51</font>
<title>rollovers</title>
<head> <script>
function preload(src,w,h)
{
var img = new Image(w,h); img.src = src; return img; }
var rollImages = {
a1:{src:"http://#*$!xx/photos/51.jpeg", width: 400, height: 260}
}
function roll(img)
{ var temp = {src:img.src,width:img.width,height:img.height};
var rollImg = rollImages[img.id]; img.src = rollImg.src;
img.width = rollImg.width; img.height = rollImg.height; rollImages[img.id] = temp; }
</script>
<head> <body>
<a href="javascript:void 0;"> <img id="a1" src="http://#*$!xx/51.jpeg"
width="240" height="140" onmouseover="roll(this)" onmouseout ="roll(this)">
</a> </body>
<TD align=CENTER
<br><font size=3>19</font>
<title>rollovers</title>
<head> <script>
function preload(src,w,h)
{
var img = new Image(w,h); img.src = src; return img; }
var rollImages = {
a2:{src:"http//#*$!xx/photos/19.jpeg", width: 240, height: 400}
}
function roll(img)
{ var temp = {src:img.src,width:img.width,height:img.height};
var rollImg = rollImages[img.id]; img.src = rollImg.src;
img.width = rollImg.width; img.height = rollImg.height; rollImages[img.id] = temp; }
</script>
<head> <body>
<a href="javascript:void 0;"> <img id="a2" src="http://#*$!xx/photos/19.jpeg"
width="150" height="240" onmouseover="roll(this)" onmouseout ="roll(this)">
</a> </body>
<TD align=CENTER
<br><font size=3>35</font>
<title>rollovers</title>
<head> <script>
function preload(src,w,h)
{
var img = new Image(w,h); img.src = src; return img; }
var rollImages = {
a3:{src:http://"#*$!xx/photos/35.jpeg", width: 400, height: 260}
}
function roll(img)
{ var temp = {src:img.src,width:img.width,height:img.height};
var rollImg = rollImages[img.id]; img.src = rollImg.src;
img.width = rollImg.width; img.height = rollImg.height; rollImages[img.id] = temp; }
</script>
<head> <body>
<a href="javascript:void 0;"> <img id="a3" src="http://#*$!xx/photos/35.jpeg"
width="240" height="140" onmouseover="roll(this)" onmouseout ="roll(this)">
</a> </body>
ISSUE=
when using this JS, only last photo on page will enlarge on mouseover....trying to apply to up to 16 photos on a page, if I remove the last, it then applies to 2nd to last photo only, and so on.
any suggestions appreciated.
<TABLE border=0 cellpadding=45 width="50%" cellspacing=45>
<TR valign=middle>
<TD align=CENTER
<br><font size=3>51</font>
<title>rollovers</title>
<head> <script>
function preload(src,w,h)
{
var img = new Image(w,h); img.src = src; return img; }
var rollImages = {
a1:{src:"http://#*$!xx/photos/51.jpeg", width: 400, height: 260}
}
function roll(img)
{ var temp = {src:img.src,width:img.width,height:img.height};
var rollImg = rollImages[img.id]; img.src = rollImg.src;
img.width = rollImg.width; img.height = rollImg.height; rollImages[img.id] = temp; }
</script>
<head> <body>
<a href="javascript:void 0;"> <img id="a1" src="http://#*$!xx/51.jpeg"
width="240" height="140" onmouseover="roll(this)" onmouseout ="roll(this)">
</a> </body>
<TD align=CENTER
<br><font size=3>19</font>
<title>rollovers</title>
<head> <script>
function preload(src,w,h)
{
var img = new Image(w,h); img.src = src; return img; }
var rollImages = {
a2:{src:"http//#*$!xx/photos/19.jpeg", width: 240, height: 400}
}
function roll(img)
{ var temp = {src:img.src,width:img.width,height:img.height};
var rollImg = rollImages[img.id]; img.src = rollImg.src;
img.width = rollImg.width; img.height = rollImg.height; rollImages[img.id] = temp; }
</script>
<head> <body>
<a href="javascript:void 0;"> <img id="a2" src="http://#*$!xx/photos/19.jpeg"
width="150" height="240" onmouseover="roll(this)" onmouseout ="roll(this)">
</a> </body>
<TD align=CENTER
<br><font size=3>35</font>
<title>rollovers</title>
<head> <script>
function preload(src,w,h)
{
var img = new Image(w,h); img.src = src; return img; }
var rollImages = {
a3:{src:http://"#*$!xx/photos/35.jpeg", width: 400, height: 260}
}
function roll(img)
{ var temp = {src:img.src,width:img.width,height:img.height};
var rollImg = rollImages[img.id]; img.src = rollImg.src;
img.width = rollImg.width; img.height = rollImg.height; rollImages[img.id] = temp; }
</script>
<head> <body>
<a href="javascript:void 0;"> <img id="a3" src="http://#*$!xx/photos/35.jpeg"
width="240" height="140" onmouseover="roll(this)" onmouseout ="roll(this)">
</a> </body>
