franciscocunharibeiro 0 Posted March 28, 2011 Report Share Posted March 28, 2011 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! Link to post Share on other sites
Lfscoutinho 2 Posted March 28, 2011 Report Share Posted March 28, 2011 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 Link to post Share on other sites
franciscocunharibeiro 0 Posted March 28, 2011 Author Report Share Posted March 28, 2011 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. Link to post Share on other sites
Lfscoutinho 2 Posted March 28, 2011 Report Share Posted March 28, 2011 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; }); }); Link to post Share on other sites
franciscocunharibeiro 0 Posted March 28, 2011 Author Report Share Posted March 28, 2011 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é... Link to post Share on other sites
Lfscoutinho 2 Posted March 28, 2011 Report Share Posted March 28, 2011 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' ); }); }); Link to post Share on other sites
franciscocunharibeiro 0 Posted March 28, 2011 Author Report Share Posted March 28, 2011 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! Link to post Share on other sites
Lfscoutinho 2 Posted March 28, 2011 Report Share Posted March 28, 2011 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?) Link to post Share on other sites
franciscocunharibeiro 0 Posted March 28, 2011 Author Report Share Posted March 28, 2011 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 Link to post Share on other sites
Lfscoutinho 2 Posted March 28, 2011 Report Share Posted March 28, 2011 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'); }); }); Link to post Share on other sites
franciscocunharibeiro 0 Posted March 28, 2011 Author Report Share Posted March 28, 2011 quase, quase!! ao clicar ja muda, no entanto ao abrir a pagina o selected ainda vem todo preto... Link to post Share on other sites
Lfscoutinho 2 Posted March 28, 2011 Report Share Posted March 28, 2011 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. Link to post Share on other sites
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now