Agregar contenido a la página

Especificaciones en el div.result.

  1. Funciones en jQuery con sus mecanismos de acción:
    1. Implementar un código en el cual al pasar sobre los elementos de lista contenidos en el div con clase ``result'', se disparen los eventos mouseover, mouseout y click, ejecutando las siguientes acciones:
      1. Al pasar el mouse sobre el elemento se aplica un color de fondo, una separación interna y el texto se cambia a ``negritas'', como se muestra en la imagen.
      2. Al salir del elemento su estilo de CSS regresa a la normalidad.
      3. Al dar clic sobre el elemento en cuestión se aplica un color de fondo y de letra diferente y un borde seccionado, como se muestra en la imagen.
      4. El código debe soportar que al dar clic sobre un elemento los eventos mouseover y mouseout quedan desactivados.
      5. Implementar un pequeño historial de los elementos de lista seleccionados en el orden en el que ocurrieron los clics, como se muestra en la imagen.
    2. Al div con id "areaClic" implementar un código que maneje los eventos necesarios para cumplir con:
      1. Al pasar el mouse sobre el rectángulo se actualizan las coordenas x e y en tiempo real, en los span con id CooX y CooY respectivamente.
      2. Al salir el puntero de "areaClic" las coordenadas se borran.
      3. Implementar un pequeño historial de los clics ocurridos dentro de "areaClic", en el cual se registren las coordenadas del clic, como elementos de una lista ordenada.
      4. Al dar clic sobre "areaClic" se debe mostrar un efecto de destello en dicha aŕea.
    3. Implementar una función genérica que capture un triple click sobre los elementos HTML. El tiempo entre cada clic no debe pasar de 500 milisegundos.
      1. Crear un código que al ocurrir el evento "triple clic" en el div con id "ejemplo3C" se agregue un párrafo con la frase "Triple clic" en su interior.
      2. El contenedor con id "ejemplo3C" debe presentar un efecto de destello al ocurrir el evento.
      3. Una vez ocurrido el "triple clic" y agregado el párrafo informativo se debe eliminar de forma automática pasados dos segundos (con efecto desvaneciente lento).

Elementos seleccionados.

Resultado del ejercicio

Clic y su registro.

Resultado del ejercicio

Evento triple clic.

Resultado del ejercicio

Ejercicios de eventos

  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4
  • Elemento 5

Historial de elementos seleccionados

    Coordenadas
    (X: , Y: )

    Registros del mouse

    Triple Clic

    Realice un triple clic en la área verde. El tiempo entre cada clic no debe pasar de 500 milisegundos.