Como girar uma imagem ao passar o mouse sobre ela

Escrito por chris hoke | Traduzido por jorge s. dias
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como girar uma imagem ao passar o mouse sobre ela
Aprenda como usar a ferramenta "onMouseOver" (Michael Blann/Lifesize/Getty Images)

A função "onMouseOver" (também chamada de "hover") é um evento do JavaScript que aciona uma ação na interface do usuário quando o cursor do mouse é colocado sobre um objeto. O JavaScript é usado principalmente em páginas da Web de modo que o evento normalmente muda algo na página em que o código JavaScript é escrito. Usando a função onMouseOver combinada com a ferramenta "rotate" de um site de edição de imagem on-line, você pode criar um efeito de rotação para uma imagem que é acionada quando o usuário coloca seu cursor do mouse sobre a imagem.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Computador
  • Acesso à internet

Lista completaMinimizar

Instruções

  1. 1

    Inicie o seu navegador padrão e digite o link para um site de edição de imagens on-line (como Pixenate, Pixlr ou LunaPic) na barra de endereços e pressione a tecla "Enter".

  2. 2

    Envie a imagem que você deseja girar, clicando no link "Choose your image to edit" ("Escolha a sua imagem para editar") ou no botão "Open image from computer" ("Abrir imagem do computador"). Clique para selecionar a imagem, em seguida em "Open" ("Abrir"). Clique em "Upload this image" ("Envie esta imagem") para fazer o upload do arquivo.

  3. 3

    Clique na ferramenta "Rotate" ("Rotação") na barra de ferramentas de edição de imagem, ou clique em "Image" ("Imagem") e selecione "Rotate Canvas" ("Rotação Canvas"). Clique para selecionar o grau de rotação e configurações e clique em "Save to Disk" ("Salvar em disco") ou "File" ("Arquivo"), depois "Save" ("Salvar"). Salve a imagem girada no mesmo diretório que o arquivo da imagem original.

  4. 4

    Inicie o editor HTML padrão. Se você não tem um editor HTML, clique no link "Editores HTML gratuitos" na seção Recursos. Crie um novo documento HTML.

  5. 5

    Clique no menu "File" ("Arquivo") e escolha "Save" ("Salvar"). Digite "rotate.html", como nome do documento e selecione a pasta que contém o arquivos "image1" ("imagem1") e "image2" ("imagem2") como o diretório de salvamento. Clique em "Save" ("Salvar").

  6. 6

    Localize as tags "<body>" e "</ body>" no novo documento HTML. Clique para colocar o cursor do mouse entre as duas marcas do corpo e, em seguida, pressione "Enter" para criar uma nova linha.

  7. 7

    Digite o seguinte na linha em branco, substituindo o texto "rotatedimage.gif" com o nome da imagem girada e o texto "originalimage.gif" com o, nome da imagem original:

    <a href="" onMouseOver="document.Rotate.src='rotatedimage.gif';" onMouseOut="document.Rotate.src='originalimage.gif';">

    Pressione "Enter" para criar uma nova linha.

  8. 8

    Digite o seguinte:

    <img src="originalimage.gif" name="Rotate">

    Pressione "Enter".

  9. 9

    Digite:

    </a>

    Clique no menu "File" ("Arquivo") e escolha "Save" ("Salvar").

  10. 10

    Dê um duplo clique no arquivo "rotate.html" para abri-lo no seu navegador padrão. Passe o cursor do mouse sobre a imagem para ver o efeito de rotação e, em seguida, mova o cursor do mouse para fora da imagem para vê-la voltar para a original, sem rotação.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível