Ir para conteúdo

Arquivado

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

ZUCOLLI

Transformar LI em link

Por , em Desenvolvimento frontend

Recommended Posts

ZUCOLLI    1

ZUCOLLI
Postado

Boa tarde pessoal..

 

Gostaria que estes LIs que estão com um background-image se tornem links... mas eu não sei fazer.

 

<body>
 <ul class="kwicks" >
  <li id="kwick_1"></li>
  <li id="kwick_2"></li>
  <li id="kwick_3"></li>
  <li id="kwick_4"></li>
</ul>
</body>

Alguém pode me ajudar?

 

Desde já agradeço.

 

ZUCOLLI

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Só colocar o a dentro dele.

 

<ul class="kwicks" >
  <li id="kwick_1"><a href="#">conteúdo</a></li>
  <li id="kwick_2"><a href="#">conteúdo</a></li>
  <li id="kwick_3"><a href="#">conteúdo</a></li>
  <li id="kwick_4"><a href="#">conteúdo</a></li>
</ul>
Você quer apresentar uma lista com imagens? Então seria pra fazer assim:

 

<ul class="kwicks" >
  <li id="kwick_1"><a href="#"><img src="[caminho da imagem] alt="[texto alternativo] /></a></li>
  <li id="kwick_2"><a href="#"><img src="[caminho da imagem] alt="[texto alternativo] /></a></li>
  <li id="kwick_3"><a href="#"><img src="[caminho da imagem] alt="[texto alternativo] /></a></li>
  <li id="kwick_4"><a href="#"><img src="[caminho da imagem] alt="[texto alternativo] /></a></li>
</ul>
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Usando Javascript você consegue..

 

mas qual o motivo ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Uma forma, para te dar idéia:

 

<li id="kwick_1" onclick="window.open('http://www.google.com.br');" style="cursor: pointer;"></li>

Mas isso vai ficar bem estranho hein?! ignora uma boa quantidade de recomendações, de usabilidade, acessibilidade..

Compartilhar este post

Link para o post
Compartilhar em outros sites

ZUCOLLI    1

ZUCOLLI
Postado

É realmente com o window.open acho que não seria uma boa...

 

E se não descobrir uma maneira de linkar o LI, vou acabar fazendo com a imagem mesmo...

 

ZUCOLLI

Compartilhar este post

Link para o post
Compartilhar em outros sites

ZUCOLLI    1

ZUCOLLI
Postado

Pq eu vou chamar um background-image dinamicamente com PHP em LIs, para montar um menu, e se eu colocar a imagem o usuário consegue arrastar a imagem e se colocar como bkg ele não consegue, mas não sei como fazer o link.

 

 

ZUCOLLI

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Rapaz, não tem sentido fazer como quer...

 

Insira o link normalmente dentro da LI como o Thiago sugeriu e deixe o link sem fundo (já é o padrão)...

 

Aí na lista você põe o fundo que quer...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Dexa eu ver se entendi, você quer proteger as imagens dos links contra roubo??

 

Bom, existe uma maneira de proteger contra o roubo prático (botão direito, salvar como). Mas ainda existe a possiblidade de algum ser paciente ler o seu CSS, descobrir o caminho da imagem e abrir para baixar (aí você tem que utilizar .htaccess para proteger). Depois de utilizar .htaccess, se suas imagens forem muito f*das mesmo!!! OMG! e o cara estiver MESMO a fim de roubá-las, basta abrir os arquivos temporários do browser, organizar por endereço e copiá-las para outro lugar

 

para proteger contra o roubo prático, faça assim:

 

<ul class="menu">
  <li id="link1"><a href="local1.html"><img src="imagem_transparente.png" alt="local 1" /></a></li>
  <li id="link2"><a href="local2.html"><img src="imagem_transparente.png" alt="local 2" /></a></li>
  <li id="link3"><a href="local3.html"><img src="imagem_transparente.png" alt="local 3" /></a></li>
  <li id="link4"><a href="local4.html"><img src="imagem_transparente.png" alt="local 4" /></a></li>
  <li id="link5"><a href="local5.html"><img src="imagem_transparente.png" alt="local 5" /></a></li>
</ul>

css
.menu li, .menu img { height: [altura]px; width: [largura]px; }
#link1 { background: url(imagem_do_link_1.jpg); }
#link2 { background: url(imagem_do_link_2.jpg); }
#link3 { background: url(imagem_do_link_3.jpg); }
#link4 { background: url(imagem_do_link_4.jpg); }
#link5 { background: url(imagem_do_link_5.jpg); }

 

 

[edit]Para impedir o download das imagens (e impedir que o usuário as pegue da pasta temporária) declare:

<meta http-equiv="pragma" content="no-cache" />

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pablo RD    5

Pablo RD
Postado

Ué, colocando como Background no LI não dá pra arrastar, daí você coloca o texto do link no LI, linka ele, e adiciona display:block no A, e coloca as medidas, pra ocupar todo o LI... Não testei, mas acho que assim funciona...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

 

Não... Era só para o usuário não conseguir arrastar a imagem.

 

 

ZUCOLLI

 

 

Nunca vi isso.

 

Acho que o que ele quis dizer é a "aquele" efeito de pegar e arrastar a imagem e depois que solta ela vai voltando. mas pode arrastar para a área de trabalho para salvar a imagem.

 

Em fim, se o cara estiver mesmo disposto a pegar a imagem, um PrintScreen resolve a vida dele.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

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