Using zooming facilities on .jpg files?

liunx · Jan 9, 2008

Hi, 
 
I want to add a .jpg file to my web page, which incidentally represents a graph and want users to be able to zoom in and out of the graph. 
 
Has anyone got any sample code for doing that or an example of a site/page that does it so that I can have a look at the source code? 
 
Thanks.It can be done by using thumbnails where visitors click on a small image and a larger version of the same image displays. 
 
But it sounds like flash would be more in line with what you are needing.I have seen someone use it before. They just used normal HTML code to do it, importing the .jpg file and being able to zoom in and out of that??something like this? 
 
<a class="postlink" href="http://www.expedia.com/pub/agent.dll">http://www.expedia.com/pub/agent.dll</a> 
 
Click maps and enter your address and it will display a map which can be zoomed in or out.Kind of, 
 
but I have a .jpg file which is a graph, I just want the web page to point to it and be able to zoom in and out just like the example you gave? 
 
Is there some page where you can easily get the source code?I will move this thread to the HTML Layout forum and hopefully someone there knows an answer.I can believe normal HTML would enlarge or shrink a picture (GIF, JPG, etc). Easily manipulated by height and width tags. 
<img src=http://www.htmlforums.com/archive/index.php/"cat.jpg" width=32 height=32> vs 
<img src=http://www.htmlforums.com/archive/index.php/"cat.jpg" width=100 height=100> But that'll be blurry and pixelated. 
 
Actual zooming, where you decrease the range on the x and y axis, see less length of the graphed line, but see a relative increase in detail, and lines remain the same thickness across differing sizes, that's done with graphing software of some kind. I believe Java can generate graphs on web pages. And various Download able software that can zoom (increase detail upon closer look). But a browser can't zoom. It can't increase detail. It can't look at a single image and provide more detail than the picture itself. 
 
Instead of using a single JPG, how about mutliple JPGs? You click a link to it's appropriate size. (ex: huge, medium, small). Like Yahoo Maps (<a class="postlink" href="http://ca.maps.yahoo.com/py/maps.py?BFCat=&Pyt=Tmap&newFL=Use+Address+Below&addr=Yonge+and+Queens+Quay&csz=Toronto&Country=ca&Get%A0Map=Get+Map">http://ca.maps.yahoo.com/py/maps.py?BFC ... ap=Get+Map</a>). 
 
Where are you getting the image from? Without seeing it, I can only guess you exported it from some function graphing software.If the graph isn't updated very often the simplest way would be to have a low resolution image as an image map on the site, and clicking any part of the image loads a higher resolution image of just that small part of it. It would be unworkable to have more than 2 levels of zoom, as you would have too many images to deal with. Say you cut it in a 5 x 5 grid: 1 - 25 - 625 already a major headache.I am producing the chart using Java code, using a package called JFreeChart. I did'nt think of using an applet to producing these graphs and that maybe a workable solution if I can find out how to zoom on the graph on the applet. 
 
At the moment, my Java code produces .jpg files onto my hard drive, I just want a web page that points to these .jpg files(which represent graphs) and is able to zoom in an out of them? I have seen someone do it before, not using anything fancy- maybe DHTML at the most? 
 
Any ideas please?Kamal, 
 
if you've seen this done, just point us to the page and we'll help you out.Hi, 
 
I have seen this done for a company that I used to work for, but it is an internal site and therefore cannot access the page. 
 
But I was sure that the person who created the page used basic HTML to get the effect, but cannot remember exactly how they done it. So I was just wondering if anyone did know? 
 
Thanks for your help.Originally posted by Kamal 
...But I was sure that the person who created the page used basic HTML to get the effect,... 
 
I can assure you that it was not basic HTML. You could use flash to get a good effect, some javascript perhaps. A java applet maybe. Some dhtml. Not basic HTML. 
 
I'd do a good scouring search of the DHTML sites. They are what your looking for.Copy this code: 
 
 
<script type="text/javascript"> 
 
function imgscale(a) { 
var imgs = document.images; 
for (var i=0; i<imgs.length; i++) { 
var w=imgs.width, h=imgs.height; 
imgs.width = a*w; 
imgs.height = a*h; 
} 
} 
 
</script> 
<h1>Image Scale</h1> 
A compact, convenient enhancement for your HTML pages with 
images. 
<h2>Copy-and-Paste Code</h2> 
 
<form> 
 
<pre> 
<script type="text/javascript"> 
 
function imgscale(a) { 
var imgs = document.images; 
for (var i=0; i<imgs.length; i++) { 
var w=imgs.width, h=imgs.height; 
imgs.width = a*w; 
imgs.height = a*h; 
} 
} 
 
</script> 
 
<div class="scale" style="display: inline; border: dashed 3px purple; 
padding: 0.2em; background: #def; color: black; font-family: arial; 
font-size: 12px"> 
Image size: <a href=http://www.htmlforums.com/archive/index.php/"javascript:imgscale(.5)">decrease</a> 
<a href=http://www.htmlforums.com/archive/index.php/"javascript:imgscale(2)">increase</a> 
<a href=http://www.htmlforums.com/archive/index.php/"javascript:location.reload()">refresh</a> 
</div> 
</pre> 
 
</form> 
 
<h2>Sample</h2> 
 
<div class="scale" style="display: inline; border: dashed 3px purple; 
padding: 0.2em; background: #def; color: black; font-family: arial; 
font-size: 12px"> 
Image size: <a href=http://www.htmlforums.com/archive/index.php/"javascript:imgscale(.5)">decrease</a> 
<a href=http://www.htmlforums.com/archive/index.php/"javascript:imgscale(2)">increase</a> 
<a href=http://www.htmlforums.com/archive/index.php/"javascript:location.reload()">refresh</a> 
</div> 
 
<img alt="image: Girls" src=http://www.htmlforums.com/archive/index.php/"http://www.myersdaily.org/rulebook/girls-4in.jpg" /> 
<img alt="image: Foo" src=http://www.htmlforums.com/archive/index.php/"http://www.myersdaily.org/joseph/html/foo.png" /> 
 
Image Scale uses JavaScript to give you quick control of 
image size. Exercise personal choice over pictures. 
 
Winner of the 2002 Super Foo Award. :*) (Yes, really.) 
 
 
 
If you like it, please visit my web (sorry it's in spanish, but you'll help me): 
<a class="postlink" href="http://escena.ya.com/quierocine">http://escena.ya.com/quierocine</a>Have a look at my web site, maybe this can help you. 
 
DarrenThere is some software out there that will do this in a funky way. I will dig out the addie for you when I get home. Of the top of my head I can't remember the folks who write this program. Actually I remember... 
 
heres a result from a quick search on Scalado 
<a class="postlink" href="http://www.scalado.com/examples/technical.shtml">http://www.scalado.com/examples/technical.shtml</a> 
click on Technical.html for examples, mouse over the cam-corder to see what this software can do. 
 
<a class="postlink" href="http://www.scalado.com">http://www.scalado.com</a> 
 
Not sure if there is a free Download  anymore but worth looking. Let me know what you think.I found a picture-zooming-site that sounds quite similar to what you describe. I found it while looking for a subject on a world map scale. 
 
NATIONAL GEOGRAPHIC.COM (<a class="postlink" href="http://plasma.nationalgeographic.com/mapmachine/index.html?id=110&size=large&left=-180&bottom=-117.21&right=180&top=117.21">http://plasma.nationalgeographic.com/ma ... top=117.21</a>) 
 
It's not flash (right click on it test: negative), 
It doesn't look like Java (not loading any classes in boring gray progress bars), 
Possibly JavaScript based. 
 
Maybe looking at the sites' code can give you, or someone else, some idea.=:O

Using zooming facilities on .jpg files?

liunx

Guest