473,471 Members | 1,858 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

Overlaying a rectangle onto an image

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

Jul 23 '05 #1
1 1817
RobB wrote:
Arvin Portlock wrote:
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


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.

Jul 23 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: James Dean | last post by:
I have 2 1bppindexed bitmaps and i want to combine both together. I converted both to 24bpp then tried to combine them but it didnt work. If possible i want to be able to draw one bitmap directly...
3
by: Ryan | last post by:
Hello, I'm trying to draw a rectangle on a web page which contains a picture. Following is the function for a similar windows application. private void ZoomIn_Click(object sender,...
3
by: | last post by:
I am having a hard time understanding the logic behind the Rectangle object. My problem has to do with the way the rectangle treats the "Width" property. For example, take the following rectangle...
10
by: sklett | last post by:
I have a situation where I'm getting in Image that has a gray (solid, same color) background with a smaller white rectangle inside. The position is not always the same. What I need to do is...
4
by: RobinS | last post by:
I am drawing a rectangle on a picture that has already been drawn on the graphics area (a user control). It works something like this: //in the MouseDown event m_isDragging = true; m_oldX =...
2
by: John | last post by:
Hi there, I need to create a rectangle between two points so that I can check what is inside it using Contains(). The problem I am having is how to make the rectangle be able to cope with the...
10
by: kimiraikkonen | last post by:
Hi, If previous post was missing, here's the complete one: I'm trying to draw a rectange on a picturebox image using mouse move event but the problem is that the rectangle selection / drawing...
1
by: kummu4help | last post by:
hi, i want to draw rectangle based on mousedrag event. if user dragging the mouse, then the rectangle on the applet should increase or decrease basing on current mouse coordinates. i have the...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
1
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
0
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.