Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

tiago.iju

Menu com Mapa de imagem

Por , em Desenvolvimento frontend

Recommended Posts

tiago.iju    0

tiago.iju
Postado

Bem objetivo:Tenho um menu em uma div e um mapa em outra.No menu, tenho uma lista de cidades e gostaria que ao passar o mouse sobre uma cidade, na div 'mapa' aparecesse o mapa correspondente.Eu não sei como fazer isso...Alguém pode me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

hevertonhlt    0

hevertonhlt
Postado

ola,

fiz o seguinte..

qdo você passa o mouse por cima..

abre uma tooltip com a imagem da cidade(que por enquando esta de animais)..

espero ter ajudado.. qualq coisa.. soh entra em contato!

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title></head><style type="text/css"><!--.body {	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	background-color: #FFFFFF;}ul#menuM {	width: 160px; 	list-style:none;	font-family: Arial, Helvetica, sans-serif;	font-size: 11px;}ul#menuM li{	position:relative;}ul#menuM a {	width: 160px;	display: block;	text-align:left;	padding: 5px 10px;	margin-bottom:1px;	text-decoration: none;	color: #000;	voice-family: "\"}\"";	voice-family:inherit;	width:125px;}>#pagebody>ul#menuM a {	width:125px;}/* Fix IE. Hide from IE Mac \*/* html ul#menuM li { float: left; height: 1%; }* html ul#menuM li a { height: 1%; }/* End */ul#menuM a:hover {	color: #000;	border-right: 0px solid #FFF;	border-left: 0px solid #FFF;	text-decoration: underline;}ul#menuM a span {	display: none;}ul#menuM a:hover span {	display: block;	position: absolute;	top:0;	left: 160px;	width: 150px;	height: 150px;	padding: 5px;	margin-left:2px;	border:1px solid #000;}#bordaSpan {	border: 0px;	border-color: #FFF;	text-align: center;	background-position: center;}--></style><body class="body"><ul id="menuM">	<li>		<a href="#">Nome da Cidade			<span id="bordaSpan">			<img src="img/cao.gif" border="0">			</span>		</a>	</li>	<li>		<a href="#">Nome da Cidade			<span id="bordaSpan">			<img src="img/cao5.gif" border="0">			</span>		</a>	</li>	<li>		<a href="#">Nome da Cidade			<span id="bordaSpan">			<img src="img/cavalo2.gif" border="0">			</span>		</a>	</li>	<li>		<a href="#">Nome da Cidade			<span id="bordaSpan">			<img src="img/cavalo3.gif" border="0">			</span>		</a>	</li></ul></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

tiago.iju    0

tiago.iju
Postado

Opa!Vlws ae galera, mas mesmo com a colaboração de vocês, eu não conseguiria fazer o que eu precisava devido a minha estrutura...Resolvi com java script:<script language="javascript" type="text/javascript">function ver(div){ document.getElementById('mapa').style.display='none'; document.getElementById('cidade1').style.display='none'; document.getElementById('cidade2').style.display='none'; document.getElementById('cidade3').style.display='none'; document.getElementById('cidade4').style.display='none'; document.getElementById(div).style.display='block';}</script>A no menu:<a href ... onmouseover="java script:ver('cidade1');"E deu certinho!!!Vlw pela ajuda ae!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito