• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

N3RO

Mostrar imagem ao passar rato

6 mensagens neste tópico

Boas ppl,

Estou aqui com um problema, acho que já fiz no passado mas desta vez não me tou a lembrar de como era  :wallbash:

Neste layout que estou a fazer, queria que ao passar o rato em cada uma das opções laterais, aparecesse uma imagem associada onde está o X.

problemalw0.jpg

Alguém sabe como fazer isso?

Cumps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Acho que tens de mudar a imagem sempre que detectas um evento de mouse over nos links. Penso que também deve ser fácil de o fazer em CSS. :cheesygrin:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Usa as funções que a macromedia desenvolveu, são simples de usar.

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

O site que o skin te deu tambem usa, tenta perceber como trabalham as funções!

espero ter ajudado

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

RayBacK, obrigado, mas não tou a conseguir por isso a bulir.

Será que me poderias fazer um file HTML com esse codigo a bulir mesmo só com uma imagem se não fosse pedir muito?

tks

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

<ul>
    <li><img height="1" alt=" " src="UI/Pics/spacer.gif" width="1"/> </li>
    <li><a onblur="MM_swapImgRestore()" onmouseover="MM_swapImage('welcome','','UI/Pics/entrada/Banners-2.jpg',1)" title="Para empresas que utilizam as soluções Sage pela primeira vez" onfocus="MM_swapImage('welcome','','UI/Pics/entrada/Banners-2.jpg',1)" onmouseout="MM_swapImgRestore()" href="Default.aspx?sec=103">Quero conhecer a Sage </a></li>
    <li><a onblur="MM_swapImgRestore()" onmouseover="MM_swapImage('welcome','','UI/Pics/entrada/Banners-3.jpg',1)" title="Para empresas que utilizam as soluções Sage" onfocus="MM_swapImage('welcome','','UI/Pics/entrada/Banners-3.jpg',1)" onmouseout="MM_swapImgRestore()" href="Default.aspx?sec=153">Já sou cliente Sage</a> </li>

    <li><a onblur="MM_swapImgRestore()" onmouseover="MM_swapImage('welcome','','UI/Pics/entrada/Banners-4.jpg',1)" title="Para os actuais e potenciais Business Partners Sage" onfocus="MM_swapImage('welcome','','UI/Pics/entrada/Banners-4.jpg',1)" onmouseout="MM_swapImgRestore()" href="Default.aspx?sec=105">Business Partner Sage </a></li>
    <li><a onblur="MM_swapImgRestore()" onmouseover="MM_swapImage('welcome','','UI/Pics/entrada/Banners-5.jpg',1)" title="Para as empresas e profissionais de contabilidade que utilizam e /ou recomendam as soluções Sage" onfocus="MM_swapImage('welcome','','UI/Pics/entrada/Banners-5.jpg',1)" onmouseout="MM_swapImgRestore()" href="Default.aspx?sec=104">Contas@Sage.com</a> </li>
    <li><a onblur="MM_swapImgRestore()" onmouseover="MM_swapImage('welcome','','UI/Pics/entrada/Banners-6.jpg',1)" title="Para os profissionais dos Meios de Comunicação" onfocus="MM_swapImage('welcome','','UI/Pics/entrada/Banners-6.jpg',1)" onmouseout="MM_swapImgRestore()" href="Default.aspx?sec=101">Press & Media </a></li>
</ul>

Tenta meter este código e substitui só UI/Pics/entrada/Banners-....jpg pelas tuas imagens é vê o que dá :cheesygrin:

Não te esqueças que tens de meter os JavaScripts na página.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora