wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes Thumbnails Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Thumbnails" Watch "Thumbnails" New topic
Author

Thumbnails

s penumudi
Ranch Hand

Joined: Nov 17, 2004
Posts: 113
Hi,

Are you aware of any tag libraries that can be used to create thumbnail at client side and onClick open a popup to show complete Image with any tooltips or image maps that Image has?

In my application we have reports that are shown in images using BAR Charts and Line Charts.
We are using JfreeChart and CEWOLF to generate these charts.
Currently complete images are being shown on the browser, which is causing a bit of vertical scrolling.
Requirement is to remove these scroll bars and show thumbnails instead. And on click show complete image.

I can see the below approaches to acheive this.
Approach 1:
I can reduce the size of the image while displaying onto the browser and onClick through javascript get Image URL and open it in new window.
Problem with this would be I cannot get tooltips or Image Maps that are generated by CEWOLF for this pop up Image.

Approach 2:
Same a One. On javascript onClick function, instead of opening image,
I might have to make one more request to the server to get complete image and show that image.
I just don't want to do this because, it is waste of resource and time consuming to rebuild same image again.

Approach 3:
Use AJAX. I just thought of this. I am not sure if there will be any browser limitations for this.
I thought I can use DOM structure and get the Image Map values and using popupWindow.document.wrtie(),
I can recreate maps for pop up Image.

I was wondering other than above 3 approaches if there is any other approach that I can use for clean solution to this problem.

Your input would be great help to me.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
I am in a crunch at work that is why I have not answered this sooner. Still am so I need to make it short.

Basically you have a two options in my mind. The first is you can have the image sizes set to a smaller size. When the user clicks on it you can increase the size to the correct portions. It would then cause the page size to shift. This way keeps you from having to regenerate the iamges for a second time.

basic idea is

onclick = 'this.style.height=(this.style.height = "30px")?"300px":"30px";this.style.width=(this.style.width = "30px")?"300px":"30px";'

Now you could go the pop up route of just opening the image directly. I am assuming that you have a page that generates it.

onclick="winpop = window.open(this.src);"

You can set the window parameters and such if you want.

Hopefully I gave you some ideas
Eric
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Thumbnails
 
Similar Threads
Problem with displaying an histogramm with Cewolf
Tooltips don't Display in Cewolf-1.1-ulf
Cewolf - PreLoad
Cewolf tooltips are not showing
Cewolf charts colors and Postprocessors