Colabora: Area Rectangular HTML by Ciberwalter

Area Rectangular en HTML
by Ciberwalter

Fecha: 23/Ene/2004 (22 de Enero del 2004)
Autor: Walter Martínez O.
waltermilenium@hotmail.com
http://www.geocities.com/gnivel4

Este Ejemplo te permite crear Areas Rectangulares para usarse como un Vínculo, (los conocidos "Area Map Rect"), los cuales pueden ubicarse en cualquier región de una imagen determinada.
La gran alternativa que posee, es que se puede agrandar o achicar desde los cuadros que se encuentran en los extremos. para hacernos una idea de cómo se vería este Vínculo, Haz Click en los ojos del Personaje, (la imagen muestra el programa en sí).

A continuación sigue código en Visual Basic (Sólo detallaré lo mas importante):

Private Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)

    Create.Enabled = True

''' Hacemos los cuadros de las esquinas invisibles

    IzUp.Visible = False
    DerUp.Visible = False
    IzDown.Visible = False
    DerDown.Visible = False

    shCapture.Visible = True
    shCapture.Left = X
    shCapture.Top = Y
    shCapture.Height = 0
    shCapture.Width = 0

    miStartX = X
    miStartY = Y
''' Dejamos el valor Operacion como Verdadero para
''' que pueda realizarse el cuadro
    Operacion = True
End Sub

Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
If Operacion = True Then

''' A Medida que el cursor se mueve, crea el cuadro en el Formulario

shCapture.Left = -miStartX * (X > miStartX) - X * (X <= miStartX)
shCapture.Top = -miStartY * (Y > miStartY) - Y * (Y <= miStartY)
shCapture.Width = Abs(miStartX - X)
shCapture.Height = Abs(miStartY - Y)
End If
End Sub

Private Sub Form_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)

    Operacion = False

''' Al Soltar el cursor establece el cuadro y coloca
''' los modificadores en las cuatro esquinas.

    IzUp.Visible = True
    IzUp.Left = shCapture.Left - IzUp.Width
    IzUp.Top = shCapture.Top - IzUp.Height

    DerDown.Visible = True
    DerDown.Left = shCapture.Left + shCapture.Width
    DerDown.Top = shCapture.Top + shCapture.Height

    IzDown.Visible = True
    IzDown.Left = shCapture.Left - IzDown.Height
    IzDown.Top = shCapture.Top + shCapture.Height

    DerUp.Visible = True
    DerUp.Left = shCapture.Left + shCapture.Width
    DerUp.Top = shCapture.Top - DerUp.Height

''''''''''''''''''''''''''''''''''''''''''''''''''''''
'' COORDENADAS
''' Primero lleva la escala al Valor de "Pixeles" (3) para poder
''' realizar las coordenadas
   Form1.ScaleMode = 3
''' establece las coordenadas en los TextBox
   Text1 = shCapture.Left
   Text5 = shCapture.Top
   Text2 = shCapture.Left + shCapture.Width
   Text6 = shCapture.Top
   Text3 = shCapture.Left
   Text7 = shCapture.Top + shCapture.Height
   Text4 = shCapture.Left + shCapture.Width
   Text8 = shCapture.Top + shCapture.Height
''' y devuelve la escala al valor "Twip" (1) para que no haya conflicto
''' con los modificadores.
Form1.ScaleMode = 1

End Sub

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
''' Funciones Agrandar Cuadro de Selección '''
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

Private Sub IzUp_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
   OperacionIzUp = True
End Sub

''' Para Usar los modificadores, debemos Asignar una sentencia
''' específica a cada modificador, para que sus equivalentes
''' se muevan junto con él
''' este es el modificador del lado Izquierdo-Arriba
Private Sub IzUp_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)

On Error GoTo SaltoIzUp

If OperacionIzUp = True Then
      IzUp.Left = IzUp.Left + X
      IzUp.Top = IzUp.Top + Y
      IzDown.Left = IzDown.Left + X ' junto con el se mueve el Izquiedo-Abajo
      DerUp.Top = DerUp.Top + Y     ' y el Derecho-Arriba
'''''''''''''''''''''''''''''''''''''''''''''
''' Y Además modifica el tamaño y la posición del cuadro
      shCapture.Top = IzUp.Top + IzUp.Height
      shCapture.Left = IzUp.Left + IzUp.Width
      shCapture.Height = IzDown.Top - (IzUp.Top + IzUp.Height)
      shCapture.Width = DerUp.Left - (IzUp.Left + IzUp.Width)
'''''''''''''''''''''''''''''''''''''''''''''

''''''''''''''''''''''''''''''''''''''''''''''''''''''
'' COORDENADAS
'' Otra vez cambia el modo a pixeles y crea las coordenadas.
    Form1.ScaleMode = 3

    Text1 = shCapture.Left
    Text5 = shCapture.Top
    Text2 = shCapture.Left + shCapture.Width
    Text6 = shCapture.Top
    Text3 = shCapture.Left
    Text7 = shCapture.Top + shCapture.Height
    Text4 = shCapture.Left + shCapture.Width
    Text8 = shCapture.Top + shCapture.Height

    Form1.ScaleMode = 1
End If

Exit Sub
'' este escape funciona cuando tratas de achicar tanto el cuadro,
'' que se invierte y provoca una resta incoherente, produciendo un error
'' SI NO ME CREES BORRA LA OPCION "ON ERROR GOTO SaltoIzUp" para que veas
    SaltoIzUp:
        OperacionIzUp = False
End Sub

Al momento de abrir el programa, podrías incluir un botón para cambiar la imagen (por ejemplo).

Su utilización es muy fácil: sólo abres una imagen específica y dibujas un cuadrado en el Area que deseas, luego lo dimensionas a tu gusto, completas los casilleros "Imagen" y "HiperVinculo" según tus opciones y pulsas el botón "Generar Código". Luego copias el código que te entrega y lo pegas en una página web (*.htm) si sabes programar en HTML te será muy FÁCIL.

Descarga el Fichero con el Código de ejemplo y el Ejecutable ("Ciberwalter_AreaRect.zip" - Tamaño 77.5 KB)