Jump to content
D@nielle

Mudar imagem no Menu

Recommended Posts

Olá.

Estou com dificuldade para trocar a imagem do menu conforme passa o mouse. Criei uma função no javascript para isto, porém não encontro o erro no código.

Segue o codigo; 

 

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset"UTF-8"/>

<title> Tudo sobre Google Glass</title>

<link rel="stylesheet" type="text/css" href="_css/estilo.css"/>

</head>

<script>

function mudaFoto(foto){

document.getElementByID("icone").src = foto;

}

</script>

<body>

<div id="interface">

<header id="cabecalho">

<hgroup>

<h1>Google Glass</h1>

<h2>A revolução do Google está chegando</h2>

</hgroup>

<img id="icone"src="_imagens/glass-oculos-preto-peq.png" alt="google glass">

<nav id="menu">

<h1>Menu Principal</h1>

<ul>

<li onmouseover="mudaFoto('_imagens/home.png')"><a href="index.html">Home</a></li>

<li onmouseover="mudaFoto('_imagens/especificacoes.png')"><a href="specs.html">Especificações</a></li>   

 

A ideia é trocar a imgem de id="icone" por uma imagem do meu arquivo (como está descrito acima) ao passar o mouse. 

Obrigada

 

 

Share this post


Link to post
Share on other sites

seu código está apenas com um erro que é o nome do método 'geElementByID' o correto é 'getElementById' com o 'd' minúsculo:

 

Errado:

function mudaFoto(foto){
  document.getElementByID("icone").src = foto;
}

Correto:

function mudaFoto(foto){
  document.getElementById("icone").src = foto;
}

Link exemplo: https://jsbin.com/wocawuzove/edit?html,css,js,output

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By guzulino
      Eu preciso criar um sistema de busca em tempo real vamos dizer assim, na realidade eu até consegui achar boa parte dele.
      <form onsubmit="return false;"> <input id="campo_cpu" type="text" name="nome_cpu" placeholder="Modelo do processador"> </form> <script src="auto-complete.js"></script> <script> var demo1 = new autoComplete({ selector: '#campo_cpu', minChars: 1, source: function(term, suggest){ term = term.toLowerCase(); var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML']; var suggestions = []; for (i=0;i<choices.length;i++) if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]); suggest(suggestions); } }); </script> Eu consegui esse código e ele funciona tranquilamente, mas isso é só um teste, o usuário vai digitar o que ele precisa e no banco de dados eu mais de 5000 registros, então eu preciso que seja feita uma consulta no banco de dados para que ele mostre o que tem lá, acho que colocar 5000 numa string é um #@?&#036;%~ trampo além de eu achar que vai dar caquinha, o problema é que eu não faço a mínima ideia de como fazer isso, eu acho que é tipo uma consulta no banco a cada caractére digitado mostrando somente os resultados compatíveis, mas como disse antes não tenho ideia, se alguém agradeço desde já. Valeu
    • By tiagosoliver
      Boa noite galera,
       
      Estou precisando a partir de um json serializado, criar um menu dinâmico, pelo javascript. O json e a estrutura do menu eu coloquei na imagem em anexo. Obrigado desde já.

    • By Theusy
      Boa tarde pessoal!
      Sou novo em html e css e me deparei com um problema enquanto estava "brincando" de programar.
      Provavelmente um erro bobo de programação, ou algo do tipo.
      Agradeço qualquer tipo de ajuda,
      Obrigado desde já!


    • By Sapinn
      Salve salve.
      Mas uma dúvida minha aqui É o seguinte tenho uma pagina que tem um texto de um usuario e eu gostaria de imprimir esta página usando javascript. Sei que usando o window.print() da pra imprimir o problema é que não fica organizado. Então eu gostaria de imprimir outra pagina na qual eu organizaria melhor o  texto e outra informações do usuario para impressão. Alguém tem algum codigo ae que faça isso?
       
      Desde já agradeço.
    • By dev-02
      <b>Dias</b> <span id="dia"></span> - <b>Tempo</b> <span id="hora"></span>:<span id="minuto"></span>:<span id="segundo"></span> var data = 15; var target_date = new Date(`\n October ${data}, 2019`).getTime(); var dias, horas, minutos, segundos; var regressiva = document.getElementById("regressiva"); setInterval(function() { Timer(); }, 1000); function Timer() { var current_date = new Date().getTime(); var segundos_f = (target_date - current_date) / 1000; dias = parseInt(segundos_f / 86400); segundos_f = segundos_f % 86400; horas = parseInt(segundos_f / 3600); segundos_f = segundos_f % 3600; minutos = parseInt(segundos_f / 60); segundos = parseInt(segundos_f % 60); document.getElementById('dia').innerHTML = dias; document.getElementById('hora').innerHTML = horas < 10 ? `0${horas}` : `${horas}`; document.getElementById('minuto').innerHTML = minutos < 10 ? `0${minutos}` : `${minutos}`; document.getElementById('segundo').innerHTML = segundos < 10 ? `0${segundos}` : `${segundos}`; if(horas == 0 && minutos == 0 && segundos == 0) { data = data + 2; } }  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.