How can I make the picture or text I am dragging on top of a larger picture semi transparent

In the last question you showed me how to drag 1 image on top of a larger image is it possible to make the draggable image semi transparent so you can see the bottom image through it some what?
Dov_BAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mohan_sekarCommented:
Use
filter: alpha(opacity = 100); - for Internet Explorer
    -moz-opacity: 1.0; - for Firefox
0
mohan_sekarCommented:
Sorry, I thought the question was posted in asp.net zone!
0
Mike TomlinsonMiddle School Assistant TeacherCommented:
The crux of the question:

    "...is it possible to make the draggable image semi transparent so you can see the bottom image through it some what?"

My answer:

   Yes...and No.

Transparency in .Net is a funny beast.   =\

(a) If you want to keep each overlaid image in its own container (picturebox) then you have to place it into its OWN window (borderless form) and literally "float" the image OVER the original form.  This allows you to set the Opacity() property of the floating window to less than 1 thus making it semi-transparent.  So you would create the new form, set the image and opacity, and then calculate the necessary location to make it appear in the correct position relative to the original form.  This obviously brings up a slew of other issues that you must now deal with such as "syncing" the movement of all the overlay windows with the main form when it is moved/resized by the user.  The overlay form must be limited to move "within" the confines of the original image as well.  You must also setup communication between the forms so that you can make things happen in the main form in response to the overlay forms.  The advantage to this approach is that it is relatively easy to MOVE the smaller image around by simply moving the overlay form itself.

(b) Another option is to build ONE composite image consisting of the original image and then the smaller images drawn on top.  With Graphics.DrawImage() it is possible to specify an alpha channel which would blend the smaller image on top of the underlying image.  The disadvantage here is that it now becomes difficult to seamlessly move the image around in response to user interaction since now the entire image has to be REDRAWN everytime you want to move just one image.  This can be a processor intensive operation and may cause some "sluggishness" if you wanted to let a user drag an image around in real time.  This could be alleviated by not dragging the actual image around but instead making the user drag around just a rectangle border (think rubberbanding!).

Which approach do you want to explore?...
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Dov_BAuthor Commented:
gee...I am not sure
I guess either option a or
option b but moving just the rectangle bordere
either way thank you
0
Mike TomlinsonMiddle School Assistant TeacherCommented:
Basically there isn't an "easy" solution here and integrating either concept into an existing project will probably require a lot of code changes.

So let's take baby steps shall we?  I'll post up a simplified example showing how to draw a smaller image with semi-transparency on top of a larger image and then we'll go from there...
0
Dov_BAuthor Commented:
thank you
0
Mike TomlinsonMiddle School Assistant TeacherCommented:
Try this out with a BLANK form...

Select a Background Image when the form opens then Double Click somewhere on the image and select a smaller image to "overlay" on it:
Imports System.Drawing.Imaging
Public Class Form1
 
    Private WithEvents PB As New PictureBox
 
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        PB.SizeMode = PictureBoxSizeMode.Normal
        PB.Dock = DockStyle.Fill
        Me.Controls.Add(PB)
    End Sub
 
    Private Sub Form1_Shown(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Shown
        SelectBackgroundImage()
    End Sub
 
    Private Sub SelectBackgroundImage()
        Using ofd As New OpenFileDialog
            With ofd
                .Title = "Select a BACKGROUND Image"
                .Filter = "Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|All files (*.*)|*.*"
                If .ShowDialog = Windows.Forms.DialogResult.OK Then
                    Try
                        Using fs As New System.IO.FileStream(.FileName, IO.FileMode.Open)
                            PB.Image = Image.FromStream(fs)
                        End Using
                    Catch ex As Exception
                        MessageBox.Show("Image File" & .FileName, "Error Opening Image File", MessageBoxButtons.OK, MessageBoxIcon.Error)
                    End Try
                End If
            End With
        End Using
    End Sub
 
    Private Sub PB_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles PB.DoubleClick
        If Not IsNothing(PB.Image) Then
            Dim pt As Point = PB.PointToClient(Cursor.Position)
            Using ofd As New OpenFileDialog
                With ofd
                    .Title = "Select a smaller OVERLAY Image"
                    .Filter = "Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|All files (*.*)|*.*"
                    If .ShowDialog = Windows.Forms.DialogResult.OK Then
                        Dim cm As New ColorMatrix
                        cm.Matrix33 = 0.5 ' values range from 0 --> 1
                        Dim IA As New ImageAttributes
                        IA.SetColorMatrix(cm)
 
                        Try
                            Dim overlay As New Bitmap(.FileName)
                            Dim bmp As New Bitmap(PB.Image)
                            Using G As Graphics = Graphics.FromImage(bmp)
                                G.DrawImage(overlay, New Rectangle(pt, overlay.Size), 0, 0, overlay.Width, overlay.Height, GraphicsUnit.Pixel, IA)
                            End Using
                            PB.Image = bmp
                        Catch ex As Exception
                            MessageBox.Show(ex.ToString, "Error Adding Overlay")
                        End Try
                    End If
                End With
            End Using
        Else
            MessageBox.Show("Please select a background image first...")
            SelectBackgroundImage()
        End If
    End Sub
 
End Class

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dov_BAuthor Commented:
very cool
thanks
I will be gone for about an hour
0
Dov_BAuthor Commented:
Sorry away so long
I am asking a related question if you get a chance to look at it
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Visual Basic.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.