Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Juliana Sphynx

HTML Inserir imagem em HTML dentro de linha específica

Recommended Posts

Olá pessoas! Alguem pode me ajudar?


Estou tentando fazer um botão aqui com imagens

 

<li><a class="btn btn-link linear" href="#" data-group="Anseriformes">Anseriformes</a></li>


Quero inserir uma imagem no lugar do nome do grupo. Fiz um monte de tentativas que deram bem errado. No caso eu sei onde colocaria, mas alguma coisa no código não está correto porque simplesmente não aparece imagem alguma:

<li><a class="btn btn-link linear" href="#" data-group="Accipitriformes"> <a href="img/portfolio/TesteDeImagem.png"> </a></li>

o que tenho que mudar ali pra aparecer o TesteDeImagem.png ?

o site: aves.jsphynx.com (quero tirar todas as imagens da home e deixar apenas em botões, pois são cada vez mais imagens e fica pesado para carregar).

 

Segue o código desse trecho:

 


   
    <!-- Portfolio -->
    <section id="portfolio" class="page">
      <div class="container">
		<div class="row">
          <div class="col-md-12 title-page text-center build">
            <h2>Ordens</h2>
            
          </div>
        </div>  
		<div class="row">
			<div class="metro">
				<div class="col-md-10 col-md-offset-1">
				<div class="build">
					<ul id="filterOptions" class="clearfix">
<li class="cur"><a class="btn btn-link linear" href="#" data-group="all">Todas</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Accipitriformes">Accipitriformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Anseriformes">Anseriformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Apodiformes">Apodiformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Caprimulgiformes">Caprimulgiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Cariamiformes">Cariamiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Cathartiformes">Cathartiformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Charadriiformes">Charadriiformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Ciconiiformes">Ciconiiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Columbiformes">Columbiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Coraciiformes">Coraciiformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Cuculiformes">Cuculiformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Eurypygiformes">Eurypygiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Falconiformes">Falconiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Galbuliformes">Galbuliformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Galliformes">Galliformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Gruiformes">Gruiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Nyctibiiformes">Nyctibiiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Opisthocomiformes">Opisthocomiformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Passeriformes">Passeriformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Pelecaniformes">Pelecaniformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Phaethontiformes">Phaethontiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Phoenicopteriformes">Phoenicopteriformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Piciformes">Piciformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Podicipediformes">Podicipediformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Procellariiformes">Procellariiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Psittaciformes">Psittaciformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Rheiformes">Rheiformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Sphenisciformes">Sphenisciformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Steatornithiformes">Steatornithiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Strigiformes">Strigiformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Suliformes">Suliformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Tinamiformes">Tinamiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Trogoniformes">Trogoniformes</a></li> 
<li class="cur"><a class="btn btn-link linear" href="#" data-group="Hibridas">Híbridas</a></li> 
<li class="cur"><a class="btn btn-link linear" href="#" data-group="Ameacadas">Ameaçadas</a></li> 

				</div>
				</div><!--end-col-->
            </div><!--end-col-->
		</div>

obrigada!!! :):):)

Compartilhar este post


Link para o post
Compartilhar em outros sites

basicos:

 

- os arquivos de imagem, linkados, se encontram na pasta que deveriam estar ?

- onde estão os pteros ??

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Postado (editado)

A tag html para imagens é :

<img src="cainhodaimagem" alt="nomedaimagem">

Você esta utilizando a tag

<a href="">

que serve para links@Juliana Sphynx

Editado por luscas

Compartilhar este post


Link para o post
Compartilhar em outros sites

Os arquivos estão nas pastas corretas (tanto que abrem certinho no site) e os pterodáctilos estão extintos (realmente não sei o que é isso) :D@Van Jacques

adicionado 0 minutos depois

@luscas , já vou tentar aqui! :)

adicionado 12 minutos depois
7 horas atrás, luscas disse:

A tag html para imagens é :


<img src="cainhodaimagem" alt="nomedaimagem">

Você esta utilizando a tag


<a href="">

que serve para links@Juliana Sphynx

 

Tudo o que estou tentando sempre aparece parte do código sem imagem sendo exibida no lugar do link ou nem aparece imagem alguma =(

Como monto essa linha para dar certo?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Entendi.

Nesse caso você pode usar o background-image.

podendo setar pelo css do site ou assim:

<a class="btn btn-link linear" href="#" data-group="Accipitriformes" style="background-image:url(img/portfolio/TesteDeImagem.png)">Accipitriformes</a>

Mais sobre o background :

Pelo html: background 

Pelo css : background css

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
Postado (editado)

@Juliana Sphynx Seguindo a sugestão acima,  você pode definir via CSS imagens de background para seu elemento <LI>

Se forem estáticas, ou seja, se não forem dinâmicas. 

Não recomendo colocar o style inline no elemento, pois o grau de precedência é maior e pode modificar os resultados.

 

Por isso, o que você pode fazer é de duas:

Ou criar uma regra CSS para cada tipo de animal ali, contendo uma imagem personalizada para cada, ou simplesmente usar uma imagem fixa para todos.

 

Sinceramente, eu não entendi direito o  seu objetivo.  No caso você quer remover as palavras do filtro e deixar apenas uma imagem?

Pessoalmente, acho mais clean o seu filtro só com palavras. Pois como serão muitas imagens para carregar a mais fora as outras que já carregam, iria ficar mais pesado ainda.

Quanto menos imagens você puder utilizar melhor.

 

Agora, se você estiver falando das imagens que carregam no elemento DIV, você pode reduzir o tamanho da imagem e do elemento DIV no CSS.

 

Uma solução seria criar um array de imagens no javascript e inserir as imagens no CSS via javascript.

 

Exemplo:

HTML:

<ul>
  <li class="um">Gatinhos Amarelos</li>
  <li class="dois">Gatinhos Cinzas</li>
  <li class="tres">Gatinhos Brancos</li>
</ul>

Jquery:

var pictures = ['http://rahkwt.com/images/kp_cat.jpg', 
	        'http://rahkwt.com/images/ic_cat2.jpg', 
                'http://rahkwt.com/images/ic_cat4.jpg'];
                
$(".um").css({"background-image": "url(" + pictures[0] +")", 
	      "background-size": "cover"});

$(".dois").css({"background-image": "url(" + pictures[1] +")",
		"background-size": "cover"});

$(".tres").css({"background-image": "url(" + pictures[2] +")", 
		"background-size": "cover"});

Veja funcionado: http://jsfiddle.net/x3edktzs/

 

A inconveniência, deste método, é que requer que você defina uma linha no jQuery para cada elemento <LI>.

Além de criar uma class para cada. No caso, você pode criar uma class dinamicamente com o nome da ave.

 

 

 

Editado por DiF

Compartilhar este post


Link para o post
Compartilhar em outros sites
Postado (editado)

Bom dia sra Juliana.

Vi lá o seu site.
E estudeu um pouco do código fonte.

 

Por favor, não entenda como critica destrutiva o que irei lhe dizer a seguir, pois, tenho como interesse somente ajuda.

Bem, gostaria de lhe apresentar uma sugestão, que é CMS ("Content Management System"). Tradução: "Sistema de gerenciamento de conteúdo" google:trad.


O interesse das suas páginas, tanto o dominio quanto o subdominio são bem legais. E de forma nenhuma deve se levar como pecado o peso no carregamento delas segundo a promessa de melhorias constantes.

Quanto a sua dúvida, tem uma forma que creio ser próximo ao teu pedido.
 

<li><a class="btn btn-link linear" href="#" data-group="Apodiformes">Apodiformes</a></li>

 

para

<li><a class="btn btn-link linear" href="#" data-group="Apodiformes"><img src="pasta_das_aves/icone-apodiformes.jpg" /></a></li>

 

 

 

Observação:
Não estou atrolepando o auxilio de nenhum colega acima, mas tambem no desejo de ajuda digo.
No código acima, foi tirado o nome do passaro e inserido um novo código html.
Deixei de propósito "icone" no nome, pois, assim facilitaria posteriormente identificar a imagem grande da imagem de apresentação.
Sugiro, que você faça alguns testes para identificar um tamanho que ache agradavel. 
Por exemplo:
width: 25px e height: 25px

width: 50px e height: 50px

width: 75px e height: 75px

Comentei acima, do CMS.
Em que me ajuda?
CMS, nada mais é, do que um facilitador de desenvolvimento de páginas de internet.
Creio que a sra tem percebido "O código fonte de uma página, nada mais é do que bruta rotina."
E o CMS tem o interesse de enxugar ao máximo essa rotina.
Dentre os mais conhecidos, tem o Wordpress / Drupal / Joomla.
Particularmente, eu sugiro o CMS Made Simple.
Eu testei estes três por serem famosos, e por que boa parte dos templates free da internet são focado mais nestes sistemas. Mas, para fácil edição inserção de conteúdos e outras coisas, o cmsms como é abreviado em sua comunidade, é o melhor que eu tenho visto e utilizado. Até comentei sobre ele neste post 


Pois bem. Só para concluir meu comentário.
Ele ajuda muito e facilita a ponto de não menosprezar o conhecimento de seus utilizadores, mas ganhar tempo no desenvolvimento e no carregamento da página.

No momento não estou lembrando das palavras corretas que gostaria de mensionar, então por gentileza, se deixei algum ponto solto, me pergunte que responderei com total prazer.

Editado por DiF
Colocar parte de códigos sempre dentro do botão CODE <>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×