Image Repositioning in ASP.NET

  • Thread starter Thread starter PhoenixFalconhand
  • Start date Start date
P

PhoenixFalconhand

Begginners' question:

I am trying to make a small webform application that doesn't use frames.
The application is supposed to show some thumbnails on the left, and
whenever you click on one of them, the large image shows on the right
side.
The tricky part is when I scroll down the thumbnails and the big image
on the right stays on the top of the webform and is not visible anymore.

The solution I thought of is that every time the button is pressed I
would reposition the big image in the center of the screen. After hours
of trying I couldn't find out how to reach the location properties of an
Image WebControl.

I'd think there would be some Image.X & Image.Y variables for easy
reference but I didn't find any.

Any help would be appretiated on this matter.

*** Sent via Devdex http://www.devdex.com ***
Don't just participate in USENET...get rewarded for it!
 
PhoenixFalconhand said:
Begginners' question:

I am trying to make a small webform application that doesn't use frames.
The application is supposed to show some thumbnails on the left, and
whenever you click on one of them, the large image shows on the right
side.
The tricky part is when I scroll down the thumbnails and the big image
on the right stays on the top of the webform and is not visible anymore.

The solution I thought of is that every time the button is pressed I
would reposition the big image in the center of the screen. After hours
of trying I couldn't find out how to reach the location properties of an
Image WebControl.

I'd think there would be some Image.X & Image.Y variables for easy
reference but I didn't find any.

Any help would be appretiated on this matter.
Click to expand...

You should put your table of thumbnails inside of a <div> with a fixed size
and style="overflow:scroll". That way, only the thumbnails will scroll, not
the big image.
 
Hi

Make it position absolute
<img style="position:absolute;top10px;left;20px" name="myImg"
src="default.gif">

Quick example that will preload the bigger image and display it when loaded
10px from top + scrollTop
<html>
<head>
<script>
function loadBig(sSrc){
var i = new Image();
i.onload = dispImg;
i.onerror = errHandler;
i.src = "IMAGE_PATH/" + sSrc;
}
function dispImg(){
with(document.images["myImg"])
{
src = this.src;
style.posTop = (10 + parseInt(document.body.scrollTop,10));// Always 10 px
from top
}
}

function errHandler(){
alert("Sorry image load error");
}
</script>
</head>
<body>
<img onclick="loadBig('BIG1.jpg')" src="thumb1.gif">
<img style="position:absolute;top10px;left;20px" name="myImg"
src="default.gif">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Just to show it does what intended :) <br>
<img onclick="loadBig('BIG2.jpg')" src="thumb2.gif">
</body>
</html>

--
Best Regards
Vidar Petursson
==============================
Microsoft Visual: Scripting MVP 2000-2004
http://www.icysoft.com/
http://www.deus-x.com/ Instant e-commerce
http://www.microsoft.com/technet/scriptcenter/
Playground: http://213.190.104.211/ ( IE 5.5+ only )

No matter where you go there you are
==============================
news:%[email protected]...
 
Back
Top