Ir para conteúdo

Arquivado

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

Apenas Eu

[Resolvido] slideshow falha no link

Por , em Desenvolvimento frontend

Recommended Posts

Apenas Eu    13

Apenas Eu
Postado

Ola!

Eu tenho um slideshow aki mas ele não funciona o link por causa do efeito fade.

Eu achei a resposta do motivo, mas ainda não encontrei a solução. Certa vez um usuario ele postou esta mesma duvida, mas comigo não funciona.

Ele explicou que o motivo é que o comando do fade está fazendo com que se tivesse um vidro "protegendo" o código que está por baixo.

Obrigado por enquanto

 

O codigo que faz o erro:

<div id="fade"></div><div id="left" onMouseOver="fade('left');" onMouseOut="fade('left');" onClick="rollerSlide(0)"></div><div id="right" onMouseOver="fade('right');" onMouseOut="fade('right');" onClick="rollerSlide(1)"></div>

 

Codigo html inteiro

<html><head>
 <head><link href="../css/destaque.css" rel="stylesheet" type="text/css" />
<script src="../css/destaque.js" type="text/javascript"></script></head></head><body onLoad="fade('fade');fade('left');fade('right');">
<div id="slideshow" name="slideshow" >
<div id="links" name="links">
<ul>
<li id="link1" name="link1" class="ativo"><b style="width:100%;height:100%;cursor:pointer;">1</b></li>
<li id="link2" name="link2" class="inativo"><b style="width:100%;height:100%;cursor:pointer;">2</b></li>
<li id="link3" name="link3" class="inativo"><b style="width:100%;height:100%;cursor:pointer;">3</b></li>
<li id="link4" name="link4" class="inativo"><b style="width:100%;height:100%;cursor:pointer;">4</b></li>
<li id="link5" name="link5" class="inativo"><b style="width:100%;height:100%;cursor:pointer;">5</b></li>
</ul></div>
<div id="slides" name="slides">
<div id="slide1" name="slide1" class="visible">
<span class="titulo">
Título 1
</span>
<span class="conteudo">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</span>
<span class="link">
<a href="link_1">Leia mais</a> sobre <label><a href="link_5">Título 1</a></label>
</span>
</div>
<div id="slide2" name="slide2" class="hidden">
<span class="titulo"> Título 2 </span>
<span class="conteudo">
Lorem Ipsum <a href="pilotos/resta.php">is simply dummy text of the printing and t</a>ypesetting industry.he 1960s with the release of Letraset sheets containing Lorem Ipsum passages. </span>
<span class="link">
<a href="link_2">Leia mais</a> sobre 
<label><a href="link_5">Título 2</a></label>
</span>
</div>

<div id="slide3" name="slide3" class="hidden">
<span class="titulo">
Título 3
</span>
<span class="conteudo">
<img src="logo3.jpg" align="left" class="imagem">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</span>
<span class="link">
<a href="link_3">Leia mais</a> sobre <label><a href="link_5">Título 3</a></label>
</span>
</div>


<div id="slide4" name="slide4" class="hidden">
<span class="titulo">
Ataque terrorista aos Estados.
</span>
<span class="conteudo">
<img src="logo4.jpg" align="left" class="imagem">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
</span>
<span class="link">
<a href="link_4">Leia mais</a> sobre <label><a href="link_5">Ataque terrorista aos Estados.</a></label>
</span>
</div>
<div id="slide5" name="slide5" class="hidden">
<span class="titulo">
Título 5
</span>
<span class="conteudo">
<img src="logo5.jpg" align="left" class="imagem">
Contrary to popular belief, Lorem Ipsum is not simply random text.
</span>
<span class="link">
<a href="link_5">Leia mais</a> sobre <label><a href="link_5">Título 5</a></label>
</span>
</div>
</div>
<div id="fade"></div><div id="left" onMouseOver="fade('left');" onMouseOut="fade('left');" onClick="rollerSlide(0)"></div><div id="right" onMouseOver="fade('right');" onMouseOut="fade('right');" onClick="rollerSlide(1)"></div>
</div>
</body>
</html>

 

CSS

* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
}
div#slideshow {
height: 255px;
width: 638px;
border: 1px solid black;
z-index:2;
}
div#slideshow #links {
float: right;
clear: both;
width: 10%;
text-align: center;
}
div#slideshow #links li {
font-size: 12px;
border-top: 1px solid white;
line-height: 49px;
}
div#slideshow #links li.inativo {
background: #66FF99 url(../imagens/fundo-n.gif);
}
div#slideshow #links li.ativo {
background: #339900 url(../imagens/fundo-n2.gif);
z-index:3;
}
div#slideshow #slides {
background: #BBBBBB;
height: 100%;
color: white;
font-size: 14px;
}
div#slideshow #slides .visible {
display: block;
background-color: #BBBBBB;
width:100%;
height:100%;
}
div#slideshow #slides .hidden {
display: none;
}
div#slideshow #slides div span {
display: block;
}
div#slideshow #slides .titulo{
background:url(../imagens/fundo-titulo-destaque.png);
font-weight: bold;
font-size: 16px;
color: #FFFFCC;
text-align:center;
padding: 5px;
height: 50px;
}
div#slideshow #slides .imagem{
width:200px;
height:170px;
}
div#slideshow #slides .conteudo {
font-size: 13px;
color: #FFFFFF;
padding: 10px;
width:100%;
padding-top: 100px;
}
div#slideshow #slides .link {
font-size: 13px;
color: #FFFFFF;
padding: 5px;
}
div#slides #fade{
position: relative;
z-index:1;
}

div#fade {
width:444px;
height:220px;
background-color: #BBBBBB;
position: absolute;
margin-left:0;
margin-top:-250px;
}

div#slides #left{
position: relative;
}
div#slides #right{
position: relative;
}
div#left {
width:222px;
height:220px;
position: absolute;
margin-left:0;
margin-top:-250px;
background:url(../esq.png) no-repeat center left;
}
div#right {
width:222px;
height:220px;
position: absolute;
margin-left:222px;
margin-top:-250px;
background:url(../dir.png) no-repeat center right;
}
div .link a {
color:#FFFFFF;
}
div .link label a {
color:#FFFFFF;
font-weight:bold;
}
div .link a:hover {
color:#FFFFFF;
text-decoration:underline;
}
.numeros{
width:100%;height:100%;
cursor:pointer; display:block;
color:#FFFFFF;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

putz mano, teu codigo n ta identado dai fica dificil ver, você poderia enviar o link do site?

 

enquanto tu n envia vou dar um palpite, talvez seja isso aqui:

 

div#slides #fade{
position: relative;
z-index:1;
}

 

Dentro da div #slides nao tem a div #fade, a #fade está fora, talvez isso esteja impedindo de funcionar, talvez, mas teste isso, caso nao seja, envie o link do site :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

Ola!

Então...o Z-index eu coloquei depois para ver no que dava. De qualquer forma eu removi ele do código.

 

Está meio pesado mesmo este código, eu havia dado uma limpada nele, mas este arquivo eu o perdi. Este novo que lhe enviei preciso fazer a limpeza de novo.

 

Mas então... no caso, ou ele funciona o fade, ou funciona o link. Eu coloquei o "div fade" dentro e antes do "div slide" mas em nenhum o fade funcionou.

 

Eu vou postar o link aqui:

http://superdanilof1page.com.br/teste1.php

 

obs. Eu deixei o código do fade, portanto, os links não funcionam. O Slide 4 tem um link lá. Se você observar ficou para fora do efeito, por isso ele está funcionando.

 

Entendeu?

Obrigado de novo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

nesse link que você passou nao aparecem as imgs, é só texto mesmo ? o lnik seria aquele em azul ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

nesse link que você passou nao aparecem as imgs, é só texto mesmo ? o lnik seria aquele em azul ?

 

sim sim....eu só enviei o basicão, não enviei todas as imagens e o link azul eu fiz meio de proposito pra testes, :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

mas aonde exatamente você quer o link, nao entendi :upset:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

mas aonde exatamente você quer o link, nao entendi :upset:

 

Onde está, por exemplo, "leia mais sobre....." ou se for possivel dentro da área inteira do slideshow

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Mano, tenta fazer o seguinte, na sua pagina, dentro de <head></head>, coloca o seguinte codigo:

 

<style>
#slides > a {
position:relative;
z-index:99999999
}
</style>

 

Dai testa e veja se o saiba mais funciona como link e volte a postar independente do resultado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Tô quase movendo pra Javascript...

 

Não entendi muito bem, vou seguir o mesmo ritmo do NetBoy então. Tenta assim:

<style>
#slides a {
position:absolute;
z-index:1;
}
</style>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

Tô quase movendo pra Javascript...

 

Não entendi muito bem, vou seguir o mesmo ritmo do NetBoy então. Tenta assim:

<style>
#slides a {
position:absolute;
z-index:1;
}
</style>

 

Deu certooo :clap: :clap: :clap:

Quer dizer mais ou menos. Estava dando um bug. Daí eu troquei o "position" absolute por "relative"

 

Peço desculpas por não saber escrever direito. Eu consigo escrever para um site, uma história, mas não consigo fazer isto direito num forum.1.png

 

La na turma do Javascript eu postei a mesma dúvida, faz algum tempo, mas até a ultima vez que vi la, não tive respostas.

 

Muito obrigado mais uma vez pela ajuda de vocês e pela paciência :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

Dae só para finalizar....quem um dia quiser usar este slideshow e enfrentar esse problema, use esta dica de nossa colega acima e apenas troque o position, desta forma:

 

<style>
#slides a {
position:relative;
z-index:1;}
</style>

 

até logo

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Valeu pela contribuição :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

obrigadooo você´s :thumbsup: :thumbsup:

Só uma coisinha que eu esqueci de perguntar: se eu quisesse deixar o link para as paginas na area inteira do slideshow, tem como por meio deste código?

(eu não preciso montar outro topico para esta pergunta nao né/! :unsure: )

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

obrigadooo você´s :thumbsup: :thumbsup:

Só uma coisinha que eu esqueci de perguntar: se eu quisesse deixar o link para as paginas na area inteira do slideshow, tem como por meio deste código?

(eu não preciso montar outro topico para esta pergunta nao né/! :unsure: )

 

 

Nao entendi direito sua pergunta, como assim ? um link englobando todo o slideshow ? se for isso é simples, é só colocar uma tag a antes de começar o slideshow e fechar a depois que fechar a ultima tag do slideshow.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Nao entendi direito sua pergunta, como assim ? um link englobando todo o slideshow ? se for isso é simples, é só colocar uma tag a antes de começar o slideshow e fechar a depois que fechar a ultima tag do slideshow.

É bem relativo sair linkando.

 

Elementos de linha não podem conter elementos de bloco:

http://forum.imasters.com.br/topic/458925-centralizar-texto-de-link-na-div/page__p__1817792#entry1817792

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Nem se colocar um display:block ? eu sei que é bem gambiarra isso, mas no caso dele é algo "aceitavel" :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

Ola!

Eu coloquei a a tag de link antes da div. Até que dá certo, mas dá um bug ali no controle dos slides ao lado (aqueles numeros). Mas tudo bem.... deixa isso para lá por enquanto.

 

Alguns sites do ramo, globoesporte.com e F1.com, contém DIV´s e slideshow em que a área inteira dele também é um link. Mas depois eu vejo isso.... obrigadooo

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Usa firebug? só dar um inspect element e ver como é o codigo :thumbsup:

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