Overlaying a rectangle onto an image

[Arvin Portlock]

I'm trying to replicate something in javascript which
is generally done using some realtime image-manipulation
tools and cgi. I want to overlay an arbitrarily-sized
rectangle onto a thumbnail image. You can see an example
of the effect using cgi here:

http://tinyurl.com/4mapk

I found a couple of examples at FAQTs of using clipping
to overlay opaque rectangles, but my rectangles need to
be completely transparent but with a one- or two-pixel
wide red border, just like you see in the example image.
Of course another technique might be to copy that small
rectangular portion of the image onto itself, with a red
border around it--I don't know how to do that either.

I've seen some pretty impressive sites some time ago that
did interesting things with translucent rectangles overlayed
on top of an image, but I can't seem to find them anymore
no moatter how much I scour the web.

Can anybody give me some tips on how to proceed, or sites
that do what I want which I can dissect, or even some
working code?

Thanks everybody!

Arvin

my mail address:

flipomatic 'at' eudoramail 'dot' com

 

[RobB]

I'm trying to replicate something in javascript which
is generally done using some realtime image-manipulation
tools and cgi. I want to overlay an arbitrarily-sized
rectangle onto a thumbnail image. You can see an example
of the effect using cgi here:

http://tinyurl.com/4mapk

I found a couple of examples at FAQTs of using clipping
to overlay opaque rectangles, but my rectangles need to
be completely transparent but with a one- or two-pixel
wide red border, just like you see in the example image.
Of course another technique might be to copy that small
rectangular portion of the image onto itself, with a red
border around it--I don't know how to do that either.

I've seen some pretty impressive sites some time ago that
did interesting things with translucent rectangles overlayed
on top of an image, but I can't seem to find them anymore
no moatter how much I scour the web.

Can anybody give me some tips on how to proceed, or sites
that do what I want which I can dissect, or even some
working code?

Thanks everybody!

Arvin

my mail address:

flipomatic 'at' eudoramail 'dot' com

You could probably use an ordinary 'layer' (CSS *position:absolute*
element) with no content and its border turned on as the outline.
Drag/drop & resizing are also possible; hard to say more as it's a bit
unclear exactly what the desired functionality is. Take a flüchtige at
Walter Zorn's DHTML API for some ideas:
http://www.walterzorn.com/dragdrop/dragdrop_e.htm

 

[Arvin Portlock]

You could probably use an ordinary 'layer' (CSS *position:absolute*
element) with no content and its border turned on as the outline.
Drag/drop & resizing are also possible; hard to say more as it's a bit
unclear exactly what the desired functionality is. Take a flüchtige at
Walter Zorn's DHTML API for some ideas:
http://www.walterzorn.com/dragdrop/dragdrop_e.htm

Yay, I got it to work with exact positioning. Thanks. The final
tricky trick was setting the background color to "transparent."
Tricky because I'd never heard of that particular color. I wonder
what part of the spectrum it lies on.