Jump to content
franciscocunharibeiro

Relacionar texto linkado com imagem (pago por uma solução!)

Recommended Posts

franciscocunharibeiro

Boas! Agradeco desde ja possiveis ajudas!

Directo ao assunto: Estou a terminar o meu portfolio e adaptei um script JS para visualizar diferentes imagens dentro da mesma div. Ao carregar em links de texto, a imagem muda consoante a descripção. Podem ver um exemplo com 2 imagens aqui:

http://francis.graphicmonkeys.com/OFFF/

Se clicarem em "view final art" não acontece nada, pois essa imagem já está seleccionada por predefinição. Se clicarem em "view hand draw" ela muda. Very simple.

O que eu gostaria de fazer, até para facilitar a navegação, é que o link seleccionado estivesse sempre marcado com o contorno preto, tal como quando se faz o mouseover. Ao abrir a página, "view final art" estaria já seleccionado, e se se carrega-se em "view hand draw", então a selecção preta mudaria para esse link. Alguem tem alguma sugestão?

Muito obrigado!

Share this post


Link to post
Share on other sites
franciscocunharibeiro

Complicado, buscava uma solução prática do estilo copy-paste ou já com o code todo direitinho mesmo :thumbsup:

Estou a trabalhar em barcelona e o meu programador está no Porto, completamente cheio de trabalho, propôs-me procurar por soluções online. Passa que a minha área é do design e html-css, quando mete variáveis e contas já sai do meu campo de trabalho...

Transfiro 25 euros na hora a quem me conseguir resolver este problema. Tenho skype, facebook e tudo o que for necessário para quem duvidar da minha palavra. O meu email é francis@graphicmonkeys.com , os interessados contactem-me por favor!

Obrigado e espero não estar a quebrar muitas regras com este propósito.

Share this post


Link to post
Share on other sites
Lfscoutinho

Boas,

Experimenta isto:

.selected {
border: 2px solid #000;
}

$(document).ready(function(){

$( '.picture-slides-thumbnails li a' ).click(function(){

	$( 'a' ).removeClass( 'selected' );
	$( this ).addClass( 'selected' );

	return false;
});
});

Share this post


Link to post
Share on other sites
franciscocunharibeiro

Zero. Experimentei na mesma pagina, se quiseres ver: http://francis.graphicmonkeys.com/OFFF/

Espero não ter baralhado, a ideia é muito simples: ao passar o rato por cima dos links, por causa do a:hover no CSS, o texto fica com um background negro. Eu quero que esse background fique sempre seleccionado, relativamente à imagem associada.

A proposta continua em pé...

Share this post


Link to post
Share on other sites
Lfscoutinho

Boas,

Então vamos por partes.

Tens de adicionar o teu ficheiro css, o seguinte:

.selected {
        background-color: #000;
}

Depois, num ficheiro JS, adicionas:

$(document).ready(function(){
        
        $( '.picture-slides-thumbnails li a' ).click(function(){
                
                $( 'a' ).removeClass( 'selected' );
                $( this ).addClass( 'selected' );

        });
});

Share this post


Link to post
Share on other sites
franciscocunharibeiro

o selected ja funciona bem, parecem faltar 2 coisas apenas:

1) como o texto por definição é negro, com o background-color o link reduz-se a uma tira preta. No .selected acrescentei uma linha de "color: #ffffff" que não sei porque, nao funciona! Já tentei tudo.

2) como faço para que o primeiro link da lista apareça logo selecionado? Digo isto porque corresponde sempre a primeira imagem!

agradeço mesmo muito sinceramente a ajuda e o tempo!

Share this post


Link to post
Share on other sites
Lfscoutinho

Boas,

Adicionas a class "selected" na hiperligação no html.

Por exemplo:

<a href="#" class="selected"></a>

Mostra como ficou a classe "selected" no css, sff.

(Já agora, viste a minha pm?)

Share this post


Link to post
Share on other sites
franciscocunharibeiro

Nice! Já funciona, só falta corrigir o problema do texto ficar com fundo preto. O endereço da pagina é o mesmo, e o css:

.selected { background-color: #000; color: #fff; }

ja te respondi a' pm

Share this post


Link to post
Share on other sites
Lfscoutinho

Boas,

O problema é que está a haver um conflito no teu css. E, não sei porque motivo a cor da .selected não está a sobrepor a cor a proj_links. No entanto, tenta o seguinte:

$(document).ready(function(){

$( '.picture-slides-thumbnails li a' ).click(function(){

	$( '.picture-slides-thumbnails a' ).css('backgroundColor', 'transparent').css('color', '#000');
	$( this ).css('backgroundColor', '#000').css('color', '#fff');

});
});

Share this post


Link to post
Share on other sites
franciscocunharibeiro

quase, quase!! ao clicar ja muda, no entanto ao abrir a pagina o selected ainda vem todo preto...

Share this post


Link to post
Share on other sites
Lfscoutinho

Boas,

Muito sinceramente, não sei porque está a haver aquele conflito. No entanto, o seguinte código resolte:

$(document).ready(function(){

$( '.picture-slides-thumbnails li:first a').css('backgroundColor', '#000').css('color', '#fff');

$( '.picture-slides-thumbnails li a' ).click(function(){

	$( '.picture-slides-thumbnails a' ).css('backgroundColor', 'transparent').css('color', '#000');
	$( this ).css('backgroundColor', '#000').css('color', '#fff');

	return false;
});
});

E, ainda vou tentar descobrir a razão do conflito... se conseguir, depois aviso.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.