rubber band /focus rectangle on a web page

[didijc]

What is the best way to implement a rubber band /focus rectangle on a web page?

In other words, I want to be able to navigate to a web page like people.com and use the rubber band / focus rectangle to some html content (images and/or text)...

...and I do realize I can simply highlight the content that I want but I am trying to do this via the rubber band / focus rectangle...

[jeffreyk16]

Hey, funny thing you mention this, I'm trying the same thing. So far found a couple of leads.

First, the W3C Style website (http://www.w3.org/Style/) uses a red colored border with gray background as a highlight when you hover with a mouse or tab to and give focus to a link on the page. I would like to use an add-in or script that will highlight elements on the page as I tab through the page, as I need to verify tab order.

Second, check out the article on bookmarklets (also known as favelets). See http://www.webreference.com/js/column35/ for a good intro. For favelets, see Accessify website at http://accessify.com/tools-and-wizards/accessibility-tools/favelets/ -- try this one: "Show all DIVs -
Highlights all <div> tags on the page with a 2-pixel red border." I'd try using this one and change it to catch the onfocus event. every element has a box around it and setting the border will highlight the element.

Good Luck.

[jeffreyk16]

Hi, found a really good test page for you. It has a sample form that you can interact with and it shows you the events fired in a "Test results" window on the left side. Also has options on the right side that lets you select what you want to track.

link: http://www.quirksmode.org/dom/events/tests/blurfocus.html

[didijc]

Thanks for all of the leads...those are some really good examples...

Here's the code that I have going so far, and it's not completely functional - at least not the way I want it to be -

' *** please keep in mind there is more code above this ***
' ***********************************************
Dim CurrentSelection As Rectangle

    Private Sub Form1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseDown
        CurrentSelection.Location = New Point(e.X, e.Y)
    End Sub

    Private Sub Form1_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseUp
        CurrentSelection = New Rectangle(0, 0, 0, 0)
        Me.Invalidate()
    End Sub

    Private Sub Form1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseMove
        If e.Button = Windows.Forms.MouseButtons.Left Then
            CurrentSelection.Size = New Point(e.X, e.Y) - CurrentSelection.Location
            Me.Invalidate()
        End If
    End Sub

    Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Dim rect As Rectangle = CurrentSelection

        If rect.Width < 0 Then
            rect.X += rect.Width
            rect.Width = -rect.Width
        End If

        If rect.Height < 0 Then
            rect.Y += rect.Height
            rect.Height = -rect.Height
        End If

        e.Graphics.FillRectangle(New SolidBrush(Color.FromArgb(200, 232.69, 232.69)), rect)
        e.Graphics.DrawRectangle(New Pen(Color.FromArgb(0, 0, 0)), rect)
    End Sub

I can draw the selection rectangle but ONLY on the form itself - when I try to draw the selection rectangle within (or over, which ever way you wish to look at it) the embedded web browser control the selection rectangle does not work - actually what happens is it draws the selection rectangle behind the web browser...

Take a look at the attached images...

[jeffreyk16]

Sorry, I didn't understand you were going this route. Anyway, I have been working on the WebBrowser control in VB.net as well. Your code is using events in Form1, and is acting on Form1 not the WebBrowser control. System.Windows.Forms.WebBrowser does not offer Paint or mouse events. I don't know how it works in the WebBrowser, but you may have to dig deeper, maybe even look at GDI.

Good Luck. If I find more, I'll let you know.