Fórum OpenCart Brasil

[phmultimidia]

amigos quais os comandos pra eu add esta foto no rodapé entre xxxxx e informacoes, extras.

a foto é http://www.xxx/imxx.JPG

queria poder linkar ela de acordo com a logomarca...

[Nyux]

vc pode colocar essa imagem no footer do seu tema, agora link cada imagem com um link a parte, vc teria que desmembrar essa imagem, em varias de acordo com o logotipo de cada uma.

[phmultimidia]

vc pode colocar essa imagem no footer do seu tema, agora link cada imagem com um link a parte, vc teria que desmembrar essa imagem, em varias de acordo com o logotipo de cada uma.

colocar no footer ja sei - se eu achar um link ja com os comandos html, php e mais sei la o que tudo pronto, pq ai eu so colo e copio(igual as propagandas do mercadolivre, pag seguro etc..)

o caso agora é que nao domino estes comandos html no total, principalmente pra centralizar e tal, e pior ainda se for um link com foto personalizado... espero ter sido mais claro.

obrigado

[paladini]

vc pode colocar essa imagem no footer do seu tema, agora link cada imagem com um link a parte, vc teria que desmembrar essa imagem, em varias de acordo com o logotipo de cada uma.

colocar no footer ja sei - se eu achar um link ja com os comandos html, php e mais sei la o que tudo pronto, pq ai eu so colo e copio(igual as propagandas do mercadolivre, pag seguro etc..)

o caso agora é que nao domino estes comandos html no total, principalmente pra centralizar e tal, e pior ainda se for um link com foto personalizado... espero ter sido mais claro.

obrigado

amigo, você precisa separar a imagem "fixa" das imagens que você quer linkar. Por exemplo, se você quer linkar para as redes sociais, tire as redes sociais dessa imagem e crie uma imagem separada para cada rede social; depois insira essas imagens das redes sociais e posicione pelo CSS de modo que fique aonde você quiser.

Espero que tenha entendido.
Não tenho muita experiência em CSS nem HTML, mas algo do tipo daria (coloca no seutema/stylesheet/stylesheet.css):

Código: Selecionar todos

.fundo-redes{
margin-left: 200px;
}

.redes_sociais{
margin-left: 220px;
margin-bottom: 30px;
}

E no footer.tpl algo do tipo:

Código: Selecionar todos

<div class="fundo-redes"><img src="../image/fundo.png" /></div>
<div class="redes_sociais"><a href="sua comunidade no orkut" target="_blank"><img src="../image/orkut.png" /></a>
<a href="sua página no facebook" target="_blank"><img src="../image/facebook.png" /></a></div>

...

ACho que é mais ou menos isso. Provavelmente deve ter um erro, alguém me corrija se possível.

Abraço.

[Renato Frota]

phmultimidia,

se não quiser separar as imagens, você pode usar um map. nele você define coordenadas x,y (igual o plano cartesiano que aprendemos na escola), para demarcar as áreas da imagens que serão links. exemplo:

Código: Selecionar todos

<img src="rodape.gif" alt="" usemap="#rodape_links" />
<map name="rodape_links">
    <area shape="rect" coords="10,10,20,20" title="Título do link" href="http://caminhodolinkcompleto.com ou relativo, ex: index.php?route=account/login" />
</map>

o parametro alt="" é importante para que a imagem não exiba aquele "x" de imagem não encontrada se houver erro no carregamento.

ali onde está 10,10,20,20 no shape, são 2 pares de coordenadas x,y, que indicam a posição da área clicável.
os shapes podem ser rect (retangular), circle (círculo) ou poly (qualquer polígono).
cada par de coordenada x,y determina uma "borda" do shape

se o tipo do shape for rect, você só pode determinar 2 pares (superior esquerdo e inferior direito, por exemplo, formando um quadrado ou retangulo).
se o tipo do shape for circle, você determina 1 par x,y indicando o centro de um círculo, e um terceiro parâmetro indicando o raio do círculo em pixels.
se o tipo do shape for poly, você pode determinar múltiplos pares (pontos), sendo vários pontos que formem um polígono qualquer (quadrado, triangulo, estrela, etc). não precisa repetir o primeiro par para fechar o polígono.

Veja um exemplo:



Salve a imagem, abra em qualquer editor (até o Paint serve).
Passe o mouse sobre cada ponto e pegue as coordenadas que delimitam as áreas clicáveis.

A logo do PayPal é retangular -> tipo rect
coordenadas dos cantos: 340,172 e 471,233
o link é absoluto (leva para o PayPal), então deve incluir http://

Código: Selecionar todos

<area shape="rect" coords="340,172,471,233" title="PayPal" href="http://paypal.com.br" />

A logo tem um círculo -> tipo circle
coordenadas do ponto central: 212,130
tamanho do raio (do centro à borda - linha laranja): 92 pixels
agora o link é relativo, pois leva para uma página dentro do seu domínio. então leva apenas o caminho da página.

Código: Selecionar todos

<area shape="circle" coords="212,130,92" title="PHMultimidia E-Commerce" href="index.php" />

A logo também tem um polígono (o nome PHMultimidia E-Commerce)
coordenadas de todos os pontos (em sentido horário): 4,168, 242,168, 242,240, 68,240, 68,212 e 4,212

Código: Selecionar todos

<area shape="poly" coords="4,168,242,168,242,240,68,240,68,212,4,212" title="PHMultimídia E-Commerce" href="index.php" />

Código final:

Código: Selecionar todos

<img src="rodape.jpg" alt="" usemap="#rodape_links" />
<map name="rodape_links">
    <area shape="rect" coords="340,172,471,233" title="PayPal" href="http://paypal.com.br" />
    <area shape="circle" coords="212,130,92" title="PHMultimídia E-Commerce" href="index.php" />
    <area shape="poly" coords="4,168,242,168,242,240,68,240,68,212,4,212" title="PHMultimídia E-Commerce" href="index.php" />
</map>

Faça o mesmo para os demais itens que deseja que sejam clicáveis.

Eu deixei as linhas vermelhas na imagem só para terem uma noção do posicionamento em pixels. Em editores com régua fica bem fácil identificar os pontos. No Photoshop ou no Paint.NET você pode criar linhas verticais/horizontais como essas que eu desenhei diretamente na imagem, para ir te direcionando conforme você vai codando os shapes. Para criar a linha, clique na régua e arraste-a em direção a imagem.

Download do resultado: http://dl.dropbox.com/u/24602367/public ... al-map.zip

[phmultimidia]

Obrigado ao colaborador niux, aprendiz paladini e moderador renato frota, to estudando e aprendendo com a resposta de vcs.
com certeza depois dessa aula de webdesiner vou sair ensinando pelo forum do opencart

to analizando cada 1 das sugestões e mesclando elas.. assim aproveito a opniao de cada 1.

[phmultimidia]

renato como coloco a imagem normal sem link?

[Renato Frota]

renato como coloco a imagem normal sem link?

a primeira tag é a da imagem. <img src="caminho/image.jpg" ?>

[phmultimidia]

testei a imagem sem link mesmo e depois achei o tamanho correto da resolução em pixels 980L 280A.

agora percebi que a galera muda muito a cor das barras laterais e principalmente a regiao onde fica a logomarca em cima do site, assim como o rodapé......

tem como mudar isso mexendo nos arquivos por favor?

seria mais ou menos como um retangulo preenchido de uma cor sólida ou meia com efeitos...

deem uma olhada no site da marisa como é e regiao de cima http://www.marisa.com.br

[Renato Frota]

é só uma imagem de fundo fixa no header.

http://scripts.marisa.com.br/Imagens/Es ... en-top.gif

#corpo-top, #corpo-mid, #corpo-bot { width:100%; position:relative; float:left; }
#corpo-top { height:162px; display:block; background:#de0084 url('../../Imagens/Estrutura/bg-cen-top.gif') repeat-x scroll center top; z-index:2; }