Imagem complicada...

[danielsjdr 0]

Olá pessoal...

 

Sou programador PHP e agora estou fazendo um site que requer o uso de CSS para manter a identidade de layout...

 

Bem vamos lá, tenho uma imagem e sobre ela alguns textos (para mapear esta imagem usei a tag map), abaixo desta imagem, vem as fotos (pequenas fotos de 59X47) que correspondem ao texto de cima (são várias fotos) e ainda apareceria uma barra abaixo desta foto como evento hover...

 

Veja a imagem:

 

 

 

Enfim, a Imagem 1 que contém os textos está mapeada, as fotos abaixo são p&b e no evento hover delas deve ficar coloridas e apresentar a barra de menu para aquela opção. O que não estou conseguindo conceber é se existe um meio de quando a pessoa passar o mouse na opção 1, a foto 1 mudar de p&b para colorida e o menu ser apresentado, tudo isto simultaneamente, levando em conta que são imagens diferentes...

 

A imagem 1 contém as opções nela (na imagem, por isso mapei a imagem). Do jeito que eu consegi, somente no evento hover a imagem sai de p&b para colorida...

 

Minha pergunta é, tem como fazer isso com CSS?

 

Por favor :D

 

Att

 

Daniel Lima

[danielsjdr 0]

Ninguem?!?! http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Eu já tentei de diversas maneiras e nda... um norte pelo menos gente...

[pa_bruno 0]

javascript... movido... ;)

[micox 2]

Talvez esta matéria te ajude:

http://www.imasters.com.br/artigo/4042/css...agem_com_pop-up

[danielsjdr 0]

Pessoal,

 

Postei outro dia e fui movido para javascript :angry: ... Não tem nda de java no que eu quero fazer...

 

Seguindo a ideia da imagem

 

Eu fiz um quadrado de link para cada texto da imagem superior:

#item01 a { top: 125px; left: 0;	 width: 48px; height: 92px;}										   #item02 a { top: 125px; left: 60px;  width: 48px; height: 92px;}#item03 a { top: 125px; left: 128px; width: 48px; height: 92px;}#item04 a { top: 125px; left: 186px; width: 48px; height: 92px;}#item05 a { top: 125px; left: 244px; width: 48px; height: 92px;}#item06 a { top: 125px; left: 300px; width: 48px; height: 92px;}#item07 a { top: 125px; left: 355px; width: 48px; height: 92px;}#item08 a { top: 125px; left: 420px; width: 48px; height: 92px;}#item09 a { top: 125px; left: 472px; width: 40px; height: 92px;}#item10 a { top: 125px; left: 525px; width: 40px; height: 92px;}#item11 a { top: 125px; left: 595px; width: 40px; height: 92px;}#item12 a { top: 125px; left: 660px; width: 40px; height: 92px;}#item13 a { top: 125px; left: 710px; width: 40px; height: 92px;}

Depois disto fui para a parte das imagens menores (abaixo da imagem superior) e fiz:

#foto01 a { background: url('../imgs/o%20evento_pb.jpg') center no-repeat; width:59px; height:45px; display:block; text-indent: -9999px;  text-decoration: none;}#foto02 a { background: url('../imgs/19IC_pb.jpg') center no-repeat; width:59px; height:45px; display:block; text-indent: -9999px;  text-decoration: none;}etc... até a 13...

Cada foto tem um evento a:hover que tira o PB e faz a imagem ficar colorida http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

#foto01 a:hover { background: url('../imgs/o%20evento.jpg') center no-repeat; width:59px; height:45px; display:block; text-indent: -9999px;  text-decoration: none;}

Até aí tdo muito bem...

 

Agora vem a parte que tá dificil...

 

o evento item01 a:hover deve fazer com que a imagem logo abaixo dele fique colorida, ou seja, executar o #foto01 a:hover

 

Tentei colocar:

#item01 a:hover, foto01 a:hover{background: url('../imgs/o%20evento.jpg') center no-repeat; width:59px; height:45px; display:block; text-indent: -9999px;  text-decoration: none;}

E nada!!!! Tentei de diversas maneiras...

 

Alguém tem uma dica?!?! por favor?

 

Depois o negocio vai complicar mais, mas por enquanto se isto funcionar já to feliz :D

 

Obrigado

 

Daniel Lima

[pa_bruno 0]

entaum cara... eu movi pra javascript, pq eh com javascript... você consegue substituir o mesmo objeto, mas naum outro objeto, somente por javascript... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[danielsjdr 0]

Boa tarde pessoal...

 

olha só a encrenca... :D

 

 

Bem, é mais ou menos o seguinte:

 

- Os textos Opção 1 - Opção 2, etc... estão na imagem, ou seja, tenho que mapear (fácil)

 

- As fotos são thumbs que devem sair de preto e branco para colorido com o mouse on over (facil)

 

- O Menu verde apresentará os submenus quando se selecionar uma opção (fácil)

 

Agora junta tdo e .... merd... não sei ( mto mto dificil) :D

 

Resumo, quando a pessoa parar o mouse sobre Opção 1 ou Foto 1, a foto 1 deve passar de uma thumb para outra (de preto e branco para colorido) e ao mesmo tempo apresentar na tela o submenu (em verde) para que a pessoa possa escolher...

 

Entenderam?

 

Algume me indica um norte... pq já tentei resolver com CSS e não consegui...

 

Obrigado

 

Daniel

[micox 2]

Cara, voce leu meu post que indica uma matéria ótima do maujor que explica como fazer esses image maps??

 

Acredito que o que ele explicou na matéria seja EXATAMENTE seu caso.

Qualquer coisa posta ae...

 

Ah sim, quase ia esquecendo: se resolver seu problema, poste aí pro restante do pessoal saber. Não suma do nada. Tipo, as vezes agente acaba sem saber onde nosso tópico está. Se isso acontecer, use a busca aqui do fórum e digite seu nome. Irá aparecer todos seus posts.

 

té mais...

 

 

 

PS.: Por favor, não poste a mesma dúvida diversas vezes no fórum. Esse tipo de ação não ajuda a sanar sua dúvida e isso no iMasters pode ser considerado como FLOOD, o que poderá acarretar em punição, de acordo com as regras do fórum.

[danielsjdr 0]

Desculpe, mas os posts foram diferentes acabei explicando mais e colocando as minhas tentativas.

 

Agora sobre a matéria

eu já li ela várias vezes :(

 

A diferença minha para o da matéria é o seguinte:

 

No caso dele a imagem que aparece quando se passa o mouse no link (nome da cidade - no meu caso é um bloco, mapeado sobre a imagem) ele aparece o texto e uma outra área abaixo, o mapa recebe uma imagem de fundo, correto?

 

No meu caso o bloco e a foto abaixo do bloco mapeado devem responder a mesma ação, ou seja, trocar o thumb de cor e apresentar um menu, este menu DEVE ficar visivel para a pessoa clicar em alguma opção.

 

Agora ninguém consegiu me dar um norte, estou meio pressionado e a unica saída que estou vendo é Flash ou mudar o funcionamento do menu, tirando as fotos.

 

Se alguem puder me ajudar...

[micox 2]

FAz o seguinte então. Já que você tá sendo pressionado. Faz por javascript mesmo que vai ser mais rápido e fácil.É só voce alterar os conteúdos usando o innerHTML pra alterar o texto da parte verde e alterar o src das fotos pra tranformar elas em fotos coloridas.Sacou?E ae? prefere fazer por CSS ou por Javascript? Dependendo da sua resposta eu movo o tópico.

[danielsjdr 0]

Na verdade não mas estarei estudando o comando para ver se chego no que eu quero... achei q com CSS fosse ser mais fácil...

[micox 2]

Maaaaais uma vez o papaizinho aqui contradiz sua assinatura ("Não dê o peixe") e entrega maaais um peixe de grátis. heuheu

 

Fiz com CSS mesmo. Com javascript seria mais fácil pra quem não domina o CSS por completo.

 

O style abaixo funcionaria maravilhosamente em browsers de macho (não IE), porém nosso amiguinho não trabalha bem com a pseudo classe hover, daí infelizmente eu tive que colocar um pequeno javascript pra ativar o hover no final.

 

Ah. O maujor conseguiu fazer uma parada dessas hover funcionar no IE sem javascript. Eu não consegui. Se alguém conseguir ativar aqui seria bom. Helpa ae povo.

 

Quem não entender e quiser alguma explicação é só postar ae...

 

 

Taí ó cara:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><style>* { margin:0px; padding:0px;}#mapa {	border:1px solid black;	width: 800px; height: 264px;	top:10px; left:10px;	position:relative;}#mapa a { 	border:1px solid red;	float:left; /* pros links ficarem lado a lado */	width: 50px; height: 150px;	background:url(http://www.brunodulcetti.com/imgs/avatarBrunoDulcetti.gif) no-repeat center bottom;}#mapa a:hover {	background:url(http://img123.imageshack.us/img123/1371/mico3pk.jpg) no-repeat center bottom;}#mapa a span {	border:1px solid green;	width:800px; /* o mesmo do mapa */	position:absolute; /* como o elemento a não tem position, esta posição absolute é em relação ao mapa */	top: 150px; /* a altura do a */	left:0px; /* se posicionará a 0 pixels do #mapa */	display:none; /* esconde o bixo */}#mapa a:hover span { 	display:block; }</style><body><div id="mapa"><a href="#">O evento <span class="spana">texto do EVENTO blablabla</span></a><a href="#">Oficinas <span class="spana">texto do OFICINAS blablabla</span></a></div><!--[if IE]><script>//só com o estilo css do início, funciona maravilhosamente em browser de macho (não IE)//pra funcionar no IE, tenho que ativar o hover do span com este script aqui:function ativaOver(){	var as = document.getElementById("mapa").getElementsByTagName("a");	for(var i=0;i<as.length;i++){		//alert(as[i].innerHTML);		as[i].onmouseover = function(){ this.getElementsByTagName("span")[0].style.display="block"; }		as[i].onmouseout = function(){ this.getElementsByTagName("span")[0].style.display="none"; }	}}//se algum ser humano conseguir fazer funcionar no maldito IE só com estilo CSS// (como o maujor conseguiu aqui: http://www.maujor.com/tutorial/mapaimg.php),// por favor, me ensine.//chama a funçãoativaOver();</script><![endif]--></body></html>

Ah. depois te passo a minha conta pra voce depositar o cheque. heheh

 

PS.: Rolava de mover este tópico lá pro CSS.

[danielsjdr 0]

Legal,Agora vou adaptar ao que eu quero (posicionamento, imagens, etc) e depois, caso eu consiga satisfatoriamente fazer eu posto a página e o código para o pessoal.Obrigado pela ajuda, sou programador PHP e dando os primeirps passos em CSS... Obrigado e espero poder retribuir. :D

[micox 2]

Diboas. Aparece sempre aqui pelo webstandards que voce vai poder contribuir sim.Qualquer coisa eu passo lá no PHP tb.

[danielsjdr 0]

Continuando a penas com esse trabalho venho recorrer mais uma vez a vós :D

 

Olha só, alinhei e fiz os blocos tdo bonitinhos como o micox mandou... ta tdo ok...

 

Problema 1: Porem no FF... na m* do IE, as imagens estão sobrepondo o fundo quando deveriam ficar abaixo do texto, tipo assim, o valor do top do IE nao ta batendo com o do FF, alguem sabe como arrumar?

 

Problema 2: Não aparece texto nenhum em minha barra de opções, a barra aparece, o texto não... bem, lá vai o código:

 

folha.css/* CSS Documento */* {		padding: 0; margin: 0;	}	html, body{  border: 0;  margin: 0;  padding: 0;  background-color:#33CCFF;}#geral{	width:769px;	margin:0 auto;	padding:0;	border:1px 1px 1px 1px solid #000000;	background-color:#FFFFFF; }#menu { 	position:relative;	width:769px; 	height:218px; 	background: url(../imgs/top.jpg) no-repeat center; 	}#menu a {  text-indent: -9999px;  text-decoration: none;  position: absolute;  /* this next line is just to show where each box is   border: 1px solid #FFF; */}#item01 a { top: 125px; left: 0;	 width: 59px; height: 151px; background: url('../imgs/o%20evento_pb.jpg') no-repeat center bottom;}										   #item02 a { top: 125px; left: 59px;  width: 59px; height: 137px; background: url('../imgs/19IC_pb.jpg') no-repeat center bottom;}#item03 a { top: 125px; left: 118px; width: 59px; height: 137px; background: url('../imgs/oficinas_pb.jpg') no-repeat center bottom;}#item04 a { top: 125px; left: 177px; width: 59px; height: 137px; background: url('../imgs/eventos_pb.jpg') no-repeat center bottom;}#item05 a { top: 125px; left: 236px; width: 59px; height: 137px; background: url('../imgs/gastronom_pb.jpg') no-repeat center bottom;}#item06 a { top: 125px; left: 295px; width: 59px; height: 137px; background: url('../imgs/bandas_pb.jpg') no-repeat center bottom;}#item07 a { top: 125px; left: 354px; width: 59px; height: 137px; background: url('../imgs/cidades_pb.jpg') no-repeat center bottom;}#item08 a { top: 125px; left: 413px; width: 59px; height: 137px; background: url('../imgs/sao%20joao_pb.jpg') no-repeat center bottom;}#item09 a { top: 125px; left: 472px; width: 59px; height: 137px; background: url('../imgs/contato_pb.jpg') no-repeat center bottom;}#item10 a { top: 125px; left: 531px; width: 59px; height: 137px; background: url('../imgs/IMG_8994_contatopb.jpg') no-repeat center bottom;}#item11 a { top: 125px; left: 590px; width: 59px; height: 137px; background: url('../imgs/crediito_pb.jpg') no-repeat center bottom;}#item12 a { top: 125px; left: 649px; width: 59px; height: 137px; background: url('../imgs/notaveis_pb.jpg') no-repeat center bottom;}#item13 a { top: 125px; left: 708px; width: 59px; height: 137px; background: url('../imgs/noticias_pb.jpg') no-repeat center bottom;}#item01 a:hover { background: url('../imgs/o%20evento.jpg') no-repeat center bottom;}										   #item02 a:hover { background: url('../imgs/19IC.jpg') no-repeat center bottom;}#item03 a:hover { background: url('../imgs/oficinas.jpg') no-repeat center bottom;}#item04 a:hover { background: url('../imgs/eventos.jpg') no-repeat center bottom;}#item05 a:hover { background: url('../imgs/gastronom.jpg') no-repeat center bottom;}#item06 a:hover { background: url('../imgs/bandas.jpg') no-repeat center bottom;}#item07 a:hover { background: url('../imgs/cidades.jpg') no-repeat center bottom;}#item08 a:hover { background: url('../imgs/sao%20joao.jpg') no-repeat center bottom;}#item09 a:hover { background: url('../imgs/contato.jpg') no-repeat center bottom;}#item10 a:hover { background: url('../imgs/IMG_8994.jpg') no-repeat center bottom;}#item11 a:hover { background: url('../imgs/crediito.jpg') no-repeat center bottom;}#item12 a:hover { background: url('../imgs/notaveis.jpg') no-repeat center bottom;}#item13 a:hover { background: url('../imgs/noticias.jpg') no-repeat center bottom;}#item01 a span, #item02 a span, #item03 a span, #item04 a span, #item05 a span, #item06 a span, #item07 a span, #item08 a span, #item09 a span, #item10 a span, #item11 a span, #item12 a span, #item13 a span{	border:1px solid green;	background-color:#0000FF;	width:765px;	position:absolute;	top: 140px;	display:none;	font-family:Arial, Helvetica, sans-serif;	font-color: #000000;		}#item01 a span { left:0px; }#item02 a span { left: -59px; }#item03 a span { left: -118px;}#item04 a span { left: -177px;}#item05 a span { left: -236px;}#item06 a span { left: -295px;}#item07 a span { left: -354px;}#item08 a span { left: -413px;}#item09 a span { left: -472px;}#item10 a span { left: -531px;}#item11 a span { left: -590px;}#item12 a span { left: -649px;}#item13 a span { left: -708px;}#item01 a:hover span, #item02 a:hover span, #item03 a:hover span, #item04 a:hover span, #item05 a:hover span, #item06 a:hover span, #item07 a:hover span, #item08 a:hover span, #item09 a:hover span, #item10 a:hover span, #item11 a:hover span, #item12 a:hover span, #item13 a:hover span {	display:block;}

Agora o index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>19 Inverno Cultural</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"><!--@import url(lib/folha.css);--></style></head><body>  <div id="geral">	<ul id="menu">	  <li id="item01"><a href="#" title="O Evento">O Evento <span class="spana">Teste</span></a></li>	  <li id="item02"><a href="#" title="19º Inverno Cultural"><span>item02</span></a></li>	  <li id="item03"><a href="#" title="item03"><span>item03</span></a></li>	  <li id="item04"><a href="#" title="item04"><span>item04</span></a></li>	  <li id="item05"><a href="#" title="item05"><span>item05</span></a></li>	  <li id="item06"><a href="#" title="item06"><span>item06</span></a></li>		  <li id="item07"><a href="#" title="item07"><span>item07</span></a></li>	  <li id="item08"><a href="#" title="item08"><span>item08</span></a></li>	  <li id="item09"><a href="#" title="item09"><span>item09</span></a></li>	  <li id="item10"><a href="#" title="item10"><span>item10</span></a></li>	  <li id="item11"><a href="#" title="item11"><span>item11</span></a></li>	  <li id="item12"><a href="#" title="item12"><span>item12</span></a></li>	  	  <li id="item13"><a href="#" title="item13"><span>item13</span></a></li>				</ul>     </div>	  <!--[if IE]><script>//só com o estilo css do início, funciona maravilhosamente em browser de macho (não IE)//pra funcionar no IE, tenho que ativar o hover do span com este script aqui:function ativaOver(){	var as = document.getElementById("mapa").getElementsByTagName("a");	for(var i=0;i<as.length;i++){		//alert(as[i].innerHTML);		as[i].onmouseover = function(){ this.getElementsByTagName("span")[0].style.display="block"; }		as[i].onmouseout = function(){ this.getElementsByTagName("span")[0].style.display="none"; }	}}//chama a funçãoativaOver();</script><![endif]--></body></html>

[pa_bruno 0]

liiiiiinks e naum códigos <_<

[danielsjdr 0]

liiiiiinks e naum códigos <_<

To sem como dar um upload agora, mas tao logo eu consiga vou postar aki os links...Para meu azar ?!? o pessoal ta querendo mudar o site para formato de portal, ai eu volto pro bom e velho php puro e esqueço problemas de layout.Mas daki a pouco posto os links e fica pro pessoal ver como se faz :D (né micox...)Posto já os links

[micox 2]

huhauh.

 

seguinte: posta o link ae mesmo que assim tá difícil de enxergar o problema.

Eu não entendi seu primeiro problema.

 

Outra coisa.

Isso aqui:

#item01 a span, #item02 a span, #item03 a span, #item04 a span, #item05 a span, #item06 a span, #item07 a span, #item08 a span, #item09 a span, #item10 a span, #item11 a span, #item12 a span, #item13 a span{	border:1px solid green;	background-color:#0000FF;	width:765px;	position:absolute;	top: 140px;	display:none;	font-family:Arial, Helvetica, sans-serif;	font-color: #000000;		}

POde ser substituido por isso aqui:

#menu li a span{	border:1px solid green;	background-color:#0000FF;	width:765px;	position:absolute;	top: 140px;	display:none;	font-family:Arial, Helvetica, sans-serif;	font-color: #000000;		}

 

 

 

Da mesma forma que

 

isso aqui:

#item01 a:hover span, #item02 a:hover span, #item03 a:hover span, #item04 a:hover span, #item05 a:hover span, #item06 a:hover span, #item07 a:hover span, #item08 a:hover span, #item09 a:hover span, #item10 a:hover span, #item11 a:hover span, #item12 a:hover span, #item13 a:hover span {	display:block;}

pode ser trocado por:

#menu li a:hover span {	display:block;}

[danielsjdr 0]

Lá vai o link:

http://www.daniellima.net/invernocultural/

 

Para quem puder ajudar...

[micox 2]

**************Cara, cancela tudo.Sabe porque tá dando tudo errado???Porque voce NÃO fez como no meu exemplo.1) Voce colocou um textident negativo gigantesco nos "a" por isso que não tá aparecendo texto nenhum. Não é necessário isso.2) Voce retirou o float left que tinha nos a. POrque? Bom, talvez não tava dando certo. Explica aí pra nóis porque voce refez a parada que eu te passei lá...Tenta refazer usando meu exemplo e ve oq ue que dá.Falows doido.