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

[franciscocunharibeiro 0]

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!

[Lfscoutinho 2]

Boas,

Podes fazer isso facilmente com o jQuery utilizando métodos como onmouseover e css.

onmouseover: http://api.jquery.com/mouseover/

css: http://api.jquery.com/css/

Espero ter ajudado

[franciscocunharibeiro 0]

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

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.

[Lfscoutinho 2]

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;
});
});

[franciscocunharibeiro 0]

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

[Lfscoutinho 2]

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' );

        });
});

[franciscocunharibeiro 0]

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!

[Lfscoutinho 2]

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

[franciscocunharibeiro 0]

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

[Lfscoutinho 2]

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');

});
});

[franciscocunharibeiro 0]

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

[Lfscoutinho 2]

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.