HTML Inserir imagem em HTML dentro de linha específica

[Juliana Sphynx]

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!!!

[Visitante]

basicos:

 

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

- onde estão os pteros ??

 

[luscas]

A tag html para imagens é :

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

Você esta utilizando a tag

<a href="">

que serve para links@Juliana Sphynx

[Juliana Sphynx]

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) @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?

 

[luscas]

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

[DiF]

@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.

 

 

 

[DHB Serviços]

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.