Desenvolvimento

Teste 7 - Identificando um Objeto na Tela

Extensão do que foi mostrado no exemplo número 5 (Particularidades Sobre Eventos - Passando Eventos para uma Função), este exemplo deve demonstrar como localizar o nome/id do objeto no qual o evento ocorreu.

Ao clicar nas figuras do Freddy abaixo, uma mensagem é imediatamente emitida mostrando o seu id.

1
2
3
4

Eis os trechos cruciais do código desta página:

<head>
   <style type='text/css'>
      #nightmare1 {float: left; margin-left: 50px; margin-top: 15px}
      #nightmare2 {float: left; margin-left: 10px; margin-top: 15px}
      #nightmare3 {float: left; margin-left: 10px; margin-top: 15px}
      #nightmare4 {margin-left: 10px; margin-top: 15px}
   </style>

   <script type='text/javascript'>
      isNS = 0
      if (navigator.appName.indexOf('Netscape') != -1) {isNS = 1}
      var name = null
      function findObject(what) {
         if (document.layers) {
            var testObj
            var xPos = what.pageX
            var yPos = what.pageY
            for (var i = document.layers.length - 1; i >= 0; i--) {
               testObj = document.layers[i]
               if (
                  (xPos > testObj.left) &&
                  (xPos < testObj.left + testObj.clip.width) &&
                  (yPos > testObj.top) &&
                  (yPos < testObj.top + testObj.clip.height)
                  ) {
                  objectID = testObj.name
                  alert('Você clicou em "' + objectID + '".')
                  return
               }
               }
            }
         else {
            if (isNS) { objectID = what.target.id }
            else { objectID = what.srcElement.id }
            alert('Você clicou em "' + objectID + '".')
            return
         }
         return
      }
   </script>
<head>

<body>
   ...
   <div><img id="nightmare1" src="../../movies/mov_pics/mov_nightmareonelmstreet.jpg" onclick="findObject(event)" /></div>
   <div><img id="nightmare2" src="../../movies/mov_pics/mov_nightmareonelmstreet2.jpg" onclick="findObject(event)" /></div>
   <div><img id="nightmare3" src="../../movies/mov_pics/mov_nightmareonelmstreet3.jpg" onclick="findObject(event)" /></div>
   <div><img id="nightmare4" src="../../movies/mov_pics/mov_nightmareonelmstreet4.jpg" onclick="findObject(event)" /></div>
   ...
</body>

A primeira parte da cláusula if da função findObject() existe em função do Netscape 4. Ela determina a posição do mouse no momento do evento, verifica cada camada do array de camadas e determina a posição do objeto.

Caso contrário (opção else, válida para o IE e versões mais recentes do Netscape), o código simplesmente busca o nome do elemento fonte, ou seja, o nome do objeto a partir do qual o evento se origina.

O handler de evento onclick() em cada figura de DVD do Freddy dispara a função findObject(). O código especifica o atributo id dentro da tag <img>.