Log in

View Full Version : Magnfiying glass



Marktime
08-14-2007, 12:34 AM
I want a picture, or box....or say it looks like a magnifying glass, and when it slides over one set of text, it reveals a hidden set of text underneath.

You see this is programs, like when a magnifying glass slides over test, and there is a larger set of text underneath. a Flash example of that is here:

http://www.freehandsource.com/_test/lens.html

What I am going to do is have a foreign language on top, and the magnifying glass will actually reveal the english translation underneath.

I can code stuff like this in windows easy enough, but I have to admit I'm not a dhtml programmer at all....I was hoping to find a script half way close then modify it.

But although there is a lot in the way of draggable stuff, almost none of it changes the content of the draggable windows on the fly.

I thought as the simplest form of what I'm trying to do, put a dive that represents a whole web page out there, and set it to be invisible.

Then a box that you drag, and as you drag it, the portion of the div underneath that it is hovering over, is visible in it. So you are dynamically setting the content of you div to the content of the div that it is hiding.

Hopefully I'm explaining that well, and maybe there is another way to do it.

The problem is, I'm shooting in the dark, not being a DHTML guy...what do you all think?

tech_support
08-14-2007, 09:06 AM
Flash would be the best way. In JS, it won't be a pretty sight.

Marktime
08-14-2007, 11:20 PM
well, I appreciate the advice, but I am nearing a breakthrough on this, so thought I'd update everyone.

This magnifying glass was done in dhmtl:

http://www.glish.com/pictureviewer/

This is only less pretty, mostly because the coder was doing a proof of concenpt and was far less concerned about the look. However, except for some of the transformation details, the bulk of the flash magnifying glass could have been done in dhtml.

Now, I am not actually doing a magnifying glass for magnifying effect...I am doing more of a cereal box 'decoder' effect....and I'm nearing completion...I have it working...

it isn't a pretty sight yet, but I found that it can be done smoothly if you use a div on the same page...if you try to use scrollto function on a separate page...it half way works and jitters all over the place.

shachi
08-19-2007, 06:34 AM
In fact, if you do want to do it in javascript which actually "works" on all browsers, why don't you go for Loupe.js or something similar?

http://www.netzgesta.de/loupe/ (See the "Zoom Effect")
http://valid.tjp.hu/tjpzoom/