Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

_Brunoo_

[Resolvido] Xml e tooltipe em imagens

Recommended Posts

Boa tarde a todos , estou usando um xml para carregar umas imagens .png em um site gostaria de fazer um tooltipe em cada uma delas com suas informaçoes , alguem sabe como fazer isso ? agradeço qualquer ajuda

 

meu codigo em AS2:

 

var leitor:XML=new XML();
leitor.ignoreWhite=true;
leitor.load("dadosxml.xml");
var filho:Number=0;
leitor.onLoad=function()
{
quantidade=leitor.firstChild.childNodes.length;
chamaFilhos();
}
function chamaFilhos()
{
  nomedafoto=leitor.firstChild.childNodes[filho].attributes.grande;
  carrega_mc.loadMovie("pratos/"+nomedafoto);
  carrega_mc._xscale=carrega_mc._yscale=100;
  carrega_mc._x=Stage.width/2.46;
}

 

 

XML:

 

<?xml version="1.0"encoding="utf-8"?>
<galeria>
     <fotos grande="prato_1a.png"/>
     <fotos grande="prato_2a.png"/>
     <fotos grande="prato_3a.png"/>
     <fotos grande="prato_4a.png"/>
     <fotos grande="prato_5a.png"/>
     <fotos grande="prato_6a.png"/>
     <fotos grande="prato_7a.png"/>
     <fotos grande="prato_8a.png"/>
     <fotos grande="prato_9a.png"/>
     <fotos grande="prato_10a.png"/>
     <fotos grande="prato_11a.png"/>
     <fotos grande="prato_12a.png"/>
</galeria>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Uma forma de conseguir o resultado é utilizar uma caixa de texto dinâmica (com bordas e cor de fundo para destacar);

Primeiro, acrescente as informarções de cada imagem no XML, ex:

<fotos grande="prato_1a.png" info="Informações desta imagem"/>

No AS, recupere também e guarde em uma nova variável estas novas informações. ex:

infodafoto=leitor.firstChild.childNodes[filho].attributes.info;

Em uma nova função como exemplo abaixo, crie a cx de texto dinamicamente setando os valores desejados e associando o valor da nova variável com a respectiva imagem, adicione a chamada da função no evento "rollOver" do mouse, isto é, quando posicionar o mouse sobre a imagem aparece a cx. de texto (tooltip), e no evento "rollOut" (tirar o mouse da imagem) desaparece a cx de texto. Veja o exemplo da função para criação da cx de texto e onde posiciona a mesma próxima ao cursor do mouse:

description = function(desc:String, posX:Number, posY:Number){
this.createTextField("myDesc", this.getNextHighestDepth(), posX, posY, 0, 0);
myDesc.autoSize = true;
myDesc.selectable = false;
myDesc.border = true;
myDesc.background = true;
myDesc.text = desc;
myDesc.borderColor = 0x333333;
myDesc.backgroundColor = 0xFFFFCC;
}
carrega_mc.onRollOver = function(){
description(infodafoto, _xmouse + 3, _ymouse - 10)
}
carrega_mc.onRollOut = function(){
myDesc.removeTextField();
}

 

Espero que seja útil.

Att.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Uma forma de conseguir o resultado é utilizar uma caixa de texto dinâmica (com bordas e cor de fundo para destacar);

Primeiro, acrescente as informarções de cada imagem no XML, ex:

<fotos grande="prato_1a.png" info="Informações desta imagem"/>

No AS, recupere também e guarde em uma nova variável estas novas informações. ex:

infodafoto=leitor.firstChild.childNodes[filho].attributes.info;

Em uma nova função como exemplo abaixo, crie a cx de texto dinamicamente setando os valores desejados e associando o valor da nova variável com a respectiva imagem, adicione a chamada da função no evento "rollOver" do mouse, isto é, quando posicionar o mouse sobre a imagem aparece a cx. de texto (tooltip), e no evento "rollOut" (tirar o mouse da imagem) desaparece a cx de texto. Veja o exemplo da função para criação da cx de texto e onde posiciona a mesma próxima ao cursor do mouse:

description = function(desc:String, posX:Number, posY:Number){
this.createTextField("myDesc", this.getNextHighestDepth(), posX, posY, 0, 0);
myDesc.autoSize = true;
myDesc.selectable = false;
myDesc.border = true;
myDesc.background = true;
myDesc.text = desc;
myDesc.borderColor = 0x333333;
myDesc.backgroundColor = 0xFFFFCC;
}
carrega_mc.onRollOver = function(){
description(infodafoto, _xmouse + 3, _ymouse - 10)
}
carrega_mc.onRollOut = function(){
myDesc.removeTextField();
}

 

Espero que seja útil.

Att.

 

 

Obrigado pela ajuda mas no caso a "nuvem" que seria o tooltipe é uma imagem nao precisa colocar decriçao em texto ... sera que isso muda alguma coisa no que voce explicou?

Compartilhar este post


Link para o post
Compartilhar em outros sites

"Nuvem"? "ToolTip"?

Primeiro você diz que quer a descrição depois diz que não! Assim fica difícil ajudar!

Explica melhor então colega.

 

Att.

 

 

So queria que ao passar o mouse encima da foto carregada pelo xml aparecece a descriçao seguindo o mouse estilo tooltip , essa descriçao nao tem campos de texto é so outra imagem.png entendeu melhor amigo?

 

grato

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aproveitando alguma coisa da minha primeira resposta!

Crie seu objeto (MovieClip) que seria esse tooltip, faz um "linkage" e deixe-o na biblioteca (Library);

Nos eventos do mouse "rollOver" e "rollOut" sobre a imagem carregada pelo XML, você atacha e remove este objeto respectivamente.

 

No caso de várias imagens e um objeto para cada, crie os clips seguindo a orientação acima e inclua também a informação destes no XML e a cada chamada (load) attache o respectivo clip.

 

Se preferir utilizar para estes também imagens externas, acrescente os caminhos no XML e crie um segundo mc receptor para estes, carregue estes normalmente mas para o efeito, pode trabalhar com visível e invisível ao evento do mouse.

 

Att.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aproveitando alguma coisa da minha primeira resposta!

Crie seu objeto (MovieClip) que seria esse tooltip, faz um "linkage" e deixe-o na biblioteca (Library);

Nos eventos do mouse "rollOver" e "rollOut" sobre a imagem carregada pelo XML, você atacha e remove este objeto respectivamente.

 

No caso de várias imagens e um objeto para cada, crie os clips seguindo a orientação acima e inclua também a informação destes no XML e a cada chamada (load) attache o respectivo clip.

 

Se preferir utilizar para estes também imagens externas, acrescente os caminhos no XML e crie um segundo mc receptor para estes, carregue estes normalmente mas para o efeito, pode trabalhar com visível e invisível ao evento do mouse.

 

Att.

 

Obrigado, resolvido

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.