Ir ao conteúdo
  • Cadastre-se

Javascript Tooltip | Js and More


Ir à solução Resolvido por DiF,

Posts recomendados

Olá a todos. Então.. eu estava praticando um pouco de HTML / CSS e no fim cheguei a um resultado bem legal e simples claro disto aqui:

 

P3gt5f9.png

 

Eu sei que alguns vão reconhecer isto.. Mas para quem não conhece é algo relacionado ao game MU ONLINE.

Enfim. Como podem ver eu inventei alguns adicionais que no caso são as características dessa armadura, porém eu gostaria de aplicar um efeito em que esses adicionais apareçam quando eu passar o mouse por cima da imagem da armadura.. como se fosse dentro do game.

Abaixo vão alguns exemplos:

Efeito aplicado em um projeto HTML: 

txJAXYn.png

 

O mesmo efeito In Game:

r7tfz0u.png

 

Sei que pode parecer algo meio trivial mas gostaria muito de aprender como eu faço para criar algo igual, se puderem me ajudar eu agradeço de coração.

 

O meu projeto ficou assim: HTML

<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <title>Coden - MU</title>
    
      <link rel="stylesheet" type="text/css" href="styles.css">

    
  </head>
  <body bgcolor="181818">
    
  
    <center>
    <div class="waritem">
    <img src="https://scontent.fsdu7-1.fna.fbcdn.net/v/t1.15752-9/54516648_2075730542491989_5516055588066295808_n.png?_nc_cat=101&amp;_nc_eui2=AeF_-on6lpeNQRt5TzCqhngSOhEqWNfW7HaS9fu-VT_HRngsDzwIQoiFs0Fukr0dvNiOIsEj6-JzxL3Y8ZBUQBJx25s_s7f5IZEKf3hG76S7gQ&amp;_nc_ht=scontent.fsdu7-1.fna&amp;oh=4120f3acc0b84f10c9313ef4701e2fdc&amp;oe=5D1AE237" alt="" class="img" style="width: 188px; height: 395px;">
      
  <p>Set of War [C][RL] +15</p>
      <p>&nbsp;</p>
      <div class="adds">
        <p>Defesa: 366</p>
        <p>Aumenta 62% do Dano</p>
        
        <p>Absorve 55% do Dano</p>
        
        <p>Aumenta Velocidade</p>
        
        <p>Durabilidade: [255/255]</p>
        
        <p>Level necessário: 330</p>
        
        <p>&nbsp;</p>
        
        <p><span style="color:#97afd5">Aumenta vida em +125 pontos</p></span>
        
      <p><span style="color:#97afd5">Aumenta mana em 125 pontos</p></span>
    
    <p><span style="color:#97afd5">Ignora o poder defensivo do oponente em 3%</p></span>
  
  <p><span style="color:#97afd5">Aumenta Máximo de AG +50</p></span>

<p><span style="color:#97afd5">Aumenta velocidade de ataque (mágico) em +5</p></span>

<p><span style="color:#97afd5">Sorte (taxa de sucesso +25% para Jewel of Soul)</p></span>

<p><span style="color:#97afd5">Sorte (dano crítico +5%)</p></span>

<p><span style="color:#97afd5">Recuperação de vida 7%</p></span>

  <p>&nbsp;</p>

</div>
  </div>

<div class="plusadd">
  <p>War Option:</p>
    </div>

<p>&nbsp;</p>

<p><span style="color:#97afd5">Absorve Dano +10% (equipado com Fenrir ou Dino Green)</p></span>
<p><span style="color:#97afd5">Ataque Total +7% (equipado com Fenrir ou Dino Green ou Gold)</p></span>
<p><span style="color:#97afd5">Aumenta 4% dano adicional (às Sexta-feira)</p></span>
<p><span style="color:#97afd5">Aumenta 3% dano total (equipado com Ring e Pendant of Style)</p></span>
<p><span style="color:#97afd5">Aumenta +2% defesa total (quando oponente estiver equipado com Fenrir Red)</p></span>
<p><span style="color:#97afd5">Perde -5% de defesa (quando oponente estiver equipado com Fenrir Gold)</p></span>
<p><span style="color:#97afd5">cai 20 Antidotes a cada 30 minutos conectados</p></span>
</center>


  </body>
</html>

 

O CSS:

.waritem{
  
font-weight: bold;
font-size: 15px;
font-family: "Verdana", sans-serif;
color: #2c9672;
background-color: transparent;
text-align:center;

}

.adds{
  
  font-weight: normal;
  font-family: "Verdana", sans-serif;
  font-size: 15px;
  color: #ffffff;
  background-color:transparent;
  padding-top: 1px;
  padding-botton: 1px;
  text-align:center;
}

.plusadd{
  
  font-weight:bold;
  font-size: 15px;
  font-family: "Verdana", sans-serif;
  color:#ffffff;
  background-color:#2c9672; 
  text-align:center;
}

E mais um adicional seria pedir ajuda com isto aqui:

RPXEIIR.png

Como podem ver nessa imagem acima ela tem um total de 10 itens que são icones pequenos que ao clicar neles logo ele irá dar loading na foto do item completo, gostaria de saber como fazer isso.

 

 

(PARA ESTA ULTIMA DUVIDA NÃO TENHO CÓDIGO BASE POR QUE NÃO SEI NADA DE JS ENTÃO NEM COMECEI)

OBRIGADO!

Link para o comentário
Compartilhar em outros sites

  • Moderador
  • Solução

@Kijin Olá,  seja bem vindo em nosso Clube do Hardware.

 

A sua primeira pergunta sobre o hover, é simples de fazer.

Crie uma estrutura de elemento DIV e esconda com o CSS.  No próprio CSS você pode definir para mostrar quando passar o mouse.

 

Exemplo:https://jsfiddle.net/dife/17bqyt0L/12/

 

O pulo do gato é o simbolo  "  ~ " 

.item:hover ~ .atributos{
display : block;
}

Isso indica que quando executar o hover no elemento .item,  o elemento .atributos serão mostrados.

 

Claro dá para fazer com javascript também.  

 

 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

@DiF

Então... sua resposta já me fez andar praticamente 98% do projeto.. agradeço de verdade!

Mas é o seguinte tenho umas outras 2 duvidas sobre.. como pode ver funcionou completamente:

 

btFvpoS.png

 

A primeira pergunta seria: Ha como eu modificar o tamanho do quadrado preto e achata-lo.. exemplo eu quero que fique assim:

U9koMjM.png

 

Como pode ver ele é mais "gordinho" , essa questão é mais por estética mesmo.

 

E outra o comando lá ele aparece somente quando passo o mouse por cima e por ai só já está sensacional.
Mas há como eu fazer ele perseguir o mouse dentro da área da imagem da armadura? Ou somente com JS?

 

#Edit

E para fazer o efeito abaixo é algo muito complicado?

Quero somente fazer isso mesmo o item dar um "pulinho" para cima ao passar o mouse!

 

source.gif

Link para o comentário
Compartilhar em outros sites

  • Moderador

@Kijin

Sim, você pode estilizar o elemento do jeito que achar melhor "gordinho" ou "espichado"  basta definir o width e height no elemento desejado.

 

Quanto a parte de mover o mouse, bem.. aí o javascript entra em cena. Aqui tem um exemplo, mas não é perfeito.

Fiz às pressas,  e não sei dizer como melhora-lo no momento.. Mas ele pode servir de norte para você entender a mecânica e consertar o que tiver de errado.

 

https://jsfiddle.net/dife/17bqyt0L/70/

 

@Kijin Reveja o link acima. Eu alterei o código, deixando mais simples e funcional. Só quem alguns detalhezinhos que você mesmo pode arrumar :D 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

@DiF Não sei se é permitido o post duplo mas preciso fazer uma pergunta.. eu não consigo usar o mesmo código 2x não? 

 

Exemplo:

 

<!-- SET ADDS -->

<div class="box">
  <div class="item"><img src="images/set.png"></div>
<div class="waritem">

<p><span style="color:#2c9672">Set of War [R] +15</p></span>

        <p>&nbsp;</p>
        <p>Defesa: 366</p>
        <p>Aumenta 62% do Dano</p>
        <p>Absorve 55% do Dano</p>
        <p>Aumenta Velocidade</p>
        <p>Durabilidade: [255/255]</p>
        <p>Level necessário: 330</p>
        <p>&nbsp;</p>
        
  <p><span style="color:#97afd5">Aumenta vida em +125 pontos</p></span>
  <p><span style="color:#97afd5">Aumenta mana em 125 pontos</p></span>
  <p><span style="color:#97afd5">Ignora o poder defensivo do oponente em 3%</p></span>
  <p><span style="color:#97afd5">Aumenta Máximo de AG +50</p></span>
  <p><span style="color:#97afd5">Aumenta velocidade de ataque (mágico) em +5</p></span>
  <p><span style="color:#97afd5">Sorte (taxa de sucesso +25% para Jewel of Soul)</p></span>
  <p><span style="color:#97afd5">Sorte (dano crítico +5%)</p></span>
  <p><span style="color:#97afd5">Recuperação de vida 7%</p></span>

  </div>
</div>

<!-- SET ADDS END -->



<!-- SWORD ADDS -->

<div class="box1">
  <div class="item1"><img src="images/sw.png"></div>
<div class="waritem1">

  <p><span style="color:#2c9672">Sword of God +15</p></span>

      <p>&nbsp;</p>
        <p>Velocidade de Ataque: 255</p>
        <p>Durabilidade: [255/255]</p>
        <p>Força necessária: 2541</p>
        <p>Agilidade necessária: 2506 </p>
        <p>&nbsp;</p>
        
<p><span style="color:#97afd5">Falling Slash skill (Mana:9)</p></span>
<p><span style="color:#97afd5">Sorte (taxa de sucesso +25% para Jewel of Soul)</p></span>
<p><span style="color:#97afd5">Sorte ( dano crítico +5%)</p></span>
<p><span style="color:#97afd5">Dano adicional +28</p></span>
<p><span style="color:#97afd5">Taxa de Dano excelente +10%</p></span>
<p><span style="color:#97afd5">Aumenta Dano em +2%</p></span>
<p><span style="color:#97afd5">Aumenta velocidade de ataque (mágico) em +7</p></span>
<p><span style="color:#97afd5">Aumenta a taxa de recuperação de Vida após caçar monstros +Vida/8</p></span>
<p><span style="color:#97afd5">Aumenta a taxa de recuperação de Mana após caçar monstros +Vida/8</p></span>

  </div>
</div>


<!-- SWORD ADDS END -->

 

.item{
margin-top: 840px;
margin-left: 113px;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-size: cover;
position:absolute;
z-index:1;
}

.waritem{

font-size:9px;
width: 320px;
height: 265px;
font-weight:normal;
line-height:5px;
font-family: "Verdana", sans-serif;
color: #ffffff;
text-align:center;
position: absolute;
top: 1130px;
left: 100px;
background: #000000;
display: none;
}

.item:hover ~ .waritem{
display : block;
}

.item1{
margin-top: 840px;
margin-left: 400px;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-size: cover;
position:absolute;
z-index:1;
}

.waritem1{

font-size:9px;
width: 320px;
height: 265px;
font-weight:normal;
line-height:5px;
font-family:"Verdana", sans-serif;
color: #ffffff;
text-align:center; 
position: absolute;
top: 1130px;
left: 250px;
background: #000000;
display: none;
}

.item:hover ~ .waritem1{
display : block;
}

hGLWYs8.png

 

Em lado vai em outro não...

Só criar classes com nome diferentes não resolve? 

 

Desculpe o incomodo mais uma vez!

Link para o comentário
Compartilhar em outros sites

  • Moderador

@Kijin Não, não é ideal criar diversas classes diferentes, somente se fosse ID.  Como estas usando class, pode repetir.

A ideia é ser dinâmico, a sua estrutura vai ser gerada por PHP e disparada pelo JS com apenas 1 código.

Não precisa repetir o mesmo código várias vezes.

 

 

 

Veja este novo exemplo:  https://jsfiddle.net/dife/17bqyt0L/97/

 

 

 

Alterei algumas coisas no código, repare que ele está muito mais simples do que você usou e dos exemplos anteriores.

O lance é que usei o e.pageX  e e.pageY   subtraído pelo offset.left  e offset.top  respectivamente o eixo  X e Y

 

Repare também que no HTML os blocos são completamente iguais, as mesmas classes.  Assim você define apenas 1 regra no css e usa para vários blocos.

 

Para pegar o offset do elemento que está em cima no momento, você usa o $(this)

var offset = $(this).offset();

Recomendo não usar o CSS inline como está fazendo, e o elemento span, está sendo usado de forma errada.  Geralmente o span é usado para agrupar em uma linha algumas informações ou para destacar parte de texto.

 

Por exemplo: https://jsfiddle.net/dife/w5f3s0ag/

<p> esta é uma frase com cor Azul. 
    <span>porém, aqui nesta parte é Vermelho</span> 
    e agora está Azul novamente. 
</p>

CSS:

p{
color: blue;
}

p span{
  color: red;
}

 

 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...