Displaying a Image within a scrollable box/canvas of fixed dimensions

[crazychrisy54]

Hi there, I am new to JavaScript and wonder if it could be used to
solve my problem, any help would be much appreciated!

I have a html web page which contains a table on the left hand side
and image on the right, both of which are updating. As the image
updates however it gets bigger and starts to look messy next to the
constant sized updating table.

I just wondered is it possible to use java script to place the ever
growing image into some fixed box/canvas on this page which contains
scroll bars when the image's size exceeds that of the box/canvas.

If this is possible could you perhaps help explain how it would be
done? Any ideas would be gratefully recieved! Thanks for your time

Regards
Chris

 

[SAM]

(e-mail address removed) a écrit :

Hi there, I am new to JavaScript and wonder if it could be used to
solve my problem, any help would be much appreciated!

I have a html web page which contains a table on the left hand side
and image on the right, both of which are updating. As the image
updates however it gets bigger and starts to look messy next to the
constant sized updating table.

I just wondered is it possible to use java script to place the ever
growing image into some fixed box/canvas on this page which contains
scroll bars when the image's size exceeds that of the box/canvas.

If this is possible could you perhaps help explain how it would be
done? Any ideas would be gratefully recieved! Thanks for your time

It seems to be a CSS question ...
Put the image in an overflowed div
<http://www.w3.org/TR/CSS21/visufx.html#x0>

<table width="100%">
<tr>
<td width=120><img src="1.jpg" alt="small img"></td>
<td rowspan="5">
<div style="overflow:auto;height:500px">
<img src="1B.jpg" alt="big img">
</div>
</td>
</tr>

.....

</table>

All images to insert in the page are made with their right sizes
^^^^^^^^^^^^^^^^^^^^^^
The IMG tags have no size attributes (nor CSS sizing).

 

[crazychrisy54]

(e-mail address removed) a écrit :





It seems to be a CSS question ...
Put the image in an overflowed div
<http://www.w3.org/TR/CSS21/visufx.html#x0>

<table width="100%">
<tr>
<td width=120><img src="1.jpg" alt="small img"></td>
<td rowspan="5">
<div style="overflow:auto;height:500px">
<img src="1B.jpg" alt="big img">
</div>
</td>
</tr>

....

</table>

All images to insert in the page are made with their right sizes
^^^^^^^^^^^^^^^^^^^^^^
The IMG tags have no size attributes (nor CSS sizing).

Fantastic sm that works like a charm!
Thankyou very much
Chris

 

[crazychrisy54]

Hi there I now have another question related to this issue.

Putting the image in a overflow div has worked well for when the image
size exceeds that of the div container, scrollable bars horizontally
and vertically are automatically provided. This image however is
gradually increasing after iterative refreshes (of 5 secs) and thus at
it does, the web page will only show the top left part of that image
unless you use the scroll bars to look around.

My question is therefore: Can you make the scroll bars which get
generated from the overflow div to automatically focus to the bottom
right part of the image after every refresh. If not do you have any
ideas of how I can go about adding this functionality.

This would then allow the user to see the latest part of the image
which gets generated after a refresh without having to move the scroll
bars.

Any help would be much appreciated!
Thanks
Chris

 

[SAM]

(e-mail address removed) a écrit :

Hi there I now have another question related to this issue.

Putting the image in a overflow div has worked well for when the image
size exceeds that of the div container, scrollable bars horizontally
and vertically are automatically provided. This image however is
gradually increasing after iterative refreshes (of 5 secs) and thus at
it does, the web page will only show the top left part of that image
unless you use the scroll bars to look around.

My question is therefore: Can you make the scroll bars which get
generated from the overflow div to automatically focus to the bottom
right part of the image after every refresh. If not do you have any
ideas of how I can go about adding this functionality.

This would then allow the user to see the latest part of the image
which gets generated after a refresh without having to move the scroll
bars.

<div id="oveflowed">
<img blah onload="this.marginTop=(this.height-500)+'px';" blah>

and then ... no more vertical lift ... no ?


in place of overflowed div :

<iframe name="viewer" src="myImage.jpg" height="500"></iframe>

My Fx displays the image sized to maxi the free space
a click on the image zoom to normal or back to reduce size

to display another image :

parent.viewer.location = 'myNewImage.jpg";