Mudar conteúdo de div ao passar mouse em outra div

[Vítor André 3]

Boa tarde!

Pessoal, gostaria de saber se tem como fazer o seguinte:

Eu tenho um mapa com areas do map. Coloquei IDs nas areas e já consigo chamar o aparecimento de uma div com o conteúdo daquela area. Mas o conteúdo dessas divs virá do banco de dados.

Eu gostaria de atualizar o conteúdo da div (trazendo de um BD com php) mas sem precisar CLICAR, somente ao passar o mouse ali.

Alguém tem uma ideia de como fazer isso?

Obrigado!

[Bergs 53]

Com o evento mouseover vc dispara a função com o cursor no objeto e com o mouseout saindo do foco.

Não tem problema nenhum o conteúdo ser de banco ele é processado antes no servidor.

 

 

Javascript:

suaAreaLinkada.onmouseover=function(){Código para aparecer div};

 

jQuery:

 

$('#suaAreaLinkada').mouseover(function() {
  $('#suaDiv').show();
});

[Vítor André 3]

Pois é Bergs. até aí tudo beleza. Isso eu já consegui fazer e tá ok.
meu caso é assim:
Eu gostaria de só chamar o conteúdo da div no momento em que ela fosse acionada (com o mouseover), pra não precisar chamar todo o conteúdo do BD.
Eu vi algo parecido num formulário, onde ao digitar 3 letras ele busca as opções (no BD) que comecem com aquelas 3 letras, usando Json. queria saber se tem como fazer o mesmo nessa minha situação.
Se não tiver jeito, vou ter que chamar tudo antes mesmo...

Só que não sei COMO PASSAR o PARÂMETRO pro BD me mandar o conteúdo CORRESPONDENTE.
Ex.: Ao passar o mouse sobre o Estado do RS, quero que o BD alimente a div com o conteúdo referente ao RS. Entendeu?

[Bergs 53]

Você vai utilizar ajax.

 

Montei um script aqui não testei até porque ia ter que gravar no banco....

segue o código. Com ele vc vai conseguir desenrolar, mas é preciso tentar se não não aprende.

 

O código vai pegar cada alt do mapa e vai pesquisar por ele e retornar o conteúdo da área ativada.

 

o código ajax vai ser por aqui:

	$(".areas").mouseover(function () {// mouseover na area do mapa
		var regiao = $(this).atrr("alt"); // cada regiao vai ter um alt relacionado
		$.ajax({
			type: "GET",
			url: "pesquisa.php", 
			data: "regiao="+regiao, // parametro via get
			success: function(dados){
				$("#suaDiv").html(dados); // retorna o conteúdo dentro da div
			}
		});
	});

 

 

 

Esse código vai fazer uma requisição no arquivo pesquisa.php

 

<?php

	$regiao = $_GET['regiao'];

	consulta sql....

	echo $dados;

?>

[Vítor André 3]

Bah, valeu!
Vou testar isso sim!

Eu trabalho com php e algumas (simples e básicas) aplicações de JQuery. JS pra mim ainda é um mistério.
Mas acho que entendi na boa esse teu script. Ao menos parece que é fácil... :yes:
Obrigado!

[Vítor André 3]

Daí! Fiz esse lance aí.
Testei a pagina de pesquisa passando o GET e lá tá ok. Está imprimindo os resultados, conforme o GET passado.

Mas na página de uso mesmo não fluiu...

 

 

 

 

aquela parte:

success: function(dados){

$("#rs").html(dados);

 

O que eu preciso substituir aqui pra dar certo? Ou não é por aqui?

[Vítor André 3]

Aí. Resolvido.

Usei a dica do Bergs. A única coisa é que onde diz: var regiao = $(this).atrr("alt"); troque por: var regiao = $(this).attr("alt");

[Bergs 53]

falha nossa na hora de digitar o script. :D