473,587 Members | 2,568 Online
Bytes | Software Development & Data Engineering Community
+ 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 1830
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:absol ute*
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 "transparen t."
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
4399
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 on top of the other and would be really good if i only had to use one 24bpp bitmap to do this.Below is a way to map draw a 1bpp bitmap onto a 24bpp...
3
9089
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, System.Web.UI.ImageClickEventArgs e) { System.Drawing.Graphics g ;
3
2458
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 object. Rectangle myRec = new Rectangle(0, 0, 2, 2); If you draw this rectangle on the screen you will end up with a rectangle like the one...
10
3690
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 locate the postion and determine the size fo the white rectangle and then crop the image to leave only the white rectangle remaining. I'm very new to...
4
26966
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 = e.X; //save original positions m_oldY = e.Y; //in the MouseMove event if (m_isDragging)
2
3501
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 angle between the two points, see the image in the link for what I mean. http://homepage.ntlworld.com/andrew.baldock/bloodbowl/select.png I am...
10
5459
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 cannot be done from starting from bottom-right to up-left. The only selection i'm allowed to do is starting from top-left towards bottom-right...
1
5113
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 following code. in the following code i am using SelectionArea class which extends a canvas on which i am performing drawing operation. i am using image...
0
7918
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7843
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8340
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7967
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
8220
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6621
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
5392
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
1
2353
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 we have to send another system
1
1452
muto222
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.