JScript

Programação & Desenvolvimento


Você não está conectado. Conecte-se ou registre-se

JScript »  Forumeiros (Avançado) » Ajuda & Suporte » Código HTML

Código HTML

2 participantes

Ir para baixo  Mensagem [Página 1 de 1]

1Código HTML Empty Código HTML Sáb 14 Set 2013, 9:54 am

Convidado

avatar
Convidado

Criei uma página HTML para o meu fórum e gostaria de saber como fazer um efeito..

note a página criada abaixo:

http://somosmugiwara.forumeiros.com/h9-

gostaria de saber como fazer este efeito abaixo:

Código HTML UgY1t7r

Este mapa mostrado na imagem e enorme, mas fica dentro daquela janelinha e o usuário pode mover para os todos os lados dentro daquela caixa que poderá ver o mapa todo, queria saber como faço este efeito.....

pois quero usar o efeito de mapear imagem junto com este efeito de caixa, mas apenas sei o efeito de mapear, agora quero saber como fazer este efeito descrito por mim.

meu fórum:

http://somosmugiwara.forumeiros.com/

2Código HTML Empty Re: Código HTML Sáb 14 Set 2013, 11:26 am

Legolas

Legolas
Moderadores
Moderadores

OLá. Isso é um script que trabalha com as coordenadas no mapa. Posso tentar fazer um, mas sem coordenadas, deseja?

http://aden.rpgwars.net

3Código HTML Empty Re: Código HTML Sáb 14 Set 2013, 12:42 pm

Convidado

avatar
Convidado

Humrum, pode fazer sim, me explicando o funcionamento do mesmo e como colocar as coordenadas que eu tento colocar

4Código HTML Empty Re: Código HTML Sáb 14 Set 2013, 1:47 pm

Legolas

Legolas
Moderadores
Moderadores

Certo. Peço que aguarde um pouco para que eu finalize.

http://aden.rpgwars.net

5Código HTML Empty Re: Código HTML Sáb 14 Set 2013, 1:53 pm

Convidado

avatar
Convidado

ok Legolas, sem pressa...

6Código HTML Empty Re: Código HTML Sáb 14 Set 2013, 3:08 pm

Legolas

Legolas
Moderadores
Moderadores

Veja se é isso que deseja: http://apenasum.forumeiros.com/h1-teste-do-mapa

PS: este apenasum.forumeiros.com é um fórum de testes meu

http://aden.rpgwars.net

7Código HTML Empty Re: Código HTML Dom 15 Set 2013, 12:36 am

Convidado

avatar
Convidado

Sim, isto mesmo meu caro, ficou do jeito que queria.....

ainda vai funcionar a função de mapear imagem ne?

8Código HTML Empty Re: Código HTML Dom 15 Set 2013, 8:02 pm

Legolas

Legolas
Moderadores
Moderadores

Olá. A que se refere quando diz "mapear"? Pois ele assim mostra todo o mapa.

http://aden.rpgwars.net

9Código HTML Empty Re: Código HTML Dom 15 Set 2013, 8:55 pm

Convidado

avatar
Convidado

A função mapear imagem usa as coordenadas da imagem para eu poder colocar diversos links na imagem, ex. Quando se passa o mouse sobre alguma ilha, o mesmo fica com o cursor pointer e pode redirecionar para o link, entende

10Código HTML Empty Re: Código HTML Dom 15 Set 2013, 9:23 pm

joelson0007

joelson0007
Moderadores
Moderadores

@Houdini Veja esse exemplo como base para estudos.

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

Qualquer dúvida nos retorne que ajudaremos.

11Código HTML Empty Re: Código HTML Dom 15 Set 2013, 11:55 pm

Convidado

avatar
Convidado

Humrum, eu já sabia fazer isto meu caro, aqui fiz um exemplo Legolas.

Código:

<!DOCTYPE html>
<html>
<body>

<img src="http://i.imgur.com/cf5w4fx.jpg" width="auto" height="auto" alt="Mapa dos Blues" usemap="#bluemap">

<map name="bluemap">
<area shape="rect" coords="230,641,287,677" alt="Ohara Island" href="http://somosmugiwara.forumeiros.com/f62-ohara-island">
<area shape="rect" coords="243,553,277,577" alt="Kagero Island" href="http://somosmugiwara.forumeiros.com/f66-kagero-island">
<area shape="rect" coords="91,591,135,615" alt="Kimotsu Town" href="http://somosmugiwara.forumeiros.com/f157-kimotsu-town">
 
</map>

</body>
</html>
O que quero saber e como colocar este efeito naquele código que você fez do mapa, entende?
eu sabendo como colocar o resto e fácil eu consigo fazer...

12Código HTML Empty Re: Código HTML Seg 16 Set 2013, 12:08 pm

Legolas

Legolas
Moderadores
Moderadores

Amigo, vou ser sincero com você. Eu não sei fazer isso. Nunca mexi com essa tag <map>.

Talvez o @JScript ou o @joelson0007 possam lhe ajudar.

http://aden.rpgwars.net

13Código HTML Empty Re: Código HTML Seg 16 Set 2013, 12:24 pm

Convidado

avatar
Convidado

Humrum, entendo legolas... esperarei eles então.

E tentarei aqui fundir aquele código seu com esse meu.

Sim, poderia finalizar aquele código que você fez?

14Código HTML Empty Re: Código HTML Seg 16 Set 2013, 1:06 pm

Legolas

Legolas
Moderadores
Moderadores

Sim, aqui está:

Código:
<script src="https://googledrive.com/host/0B1BK7t8dgValV2p2bTJlVHdfZzg/jquery.min.js"></script>
</script>
<script src="https://googledrive.com/host/0B1BK7t8dgValV2p2bTJlVHdfZzg/scriptMapaByLegolas2.js"></script>
</script>
<style>
#conteudo {
margin:20px auto 0;
width:700px;
}
.mostrar {
float:left;
width:700px;
height:350px;
-moz-box-shadow:0 0 5px #ddd;
-webkit-box-shadow:0 0 5px #ddd;
box-shadow:0 0 5px #ddd;
}
.mostrar img{
cursor:move;
}
.preloader {
background:url(http://i73.servimg.com/u/f73/18/41/92/43/loader10.gif) no-repeat center #fff;
}
</style><div id="conteudo"><div><div style="position: absolute; overflow: hidden; cursor: move;" class="mostrar"><div style="z-index: 1; position: block; max-width: 1287px; max-height: 843px;" class="mostrarMapa">
<img style="max-width: 1287px; max-height: 843px;" src="http://i.imgur.com/cf5w4fx.jpg" class="mapa"></div></div></div>

http://aden.rpgwars.net

15Código HTML Empty Re: Código HTML Ter 17 Set 2013, 8:58 am

Convidado

avatar
Convidado

Não consegui fundir, mais consegui fazer isso abaixo:

http://somosmugiwara.forumeiros.com/h9-

mas note o queria fazer abaixo:

Código HTML WTEF3RJ

Note o quadrado vermelho, gostaria de colocar um ali, e também aquele texto, que cabecem 4 desse texto dentro desse quadrado...

seria possível?

Tentei colocar os textos, mas sempre não ficavam alinhados..

Código:


<!DOCTYPE html>
<html>
<title>Mapa dos Blues</title><link rel="shortcut icon" type="image/x-icon" href="http://i69.servimg.com/u/f69/17/63/00/37/images10.png" />
<body>
<body background="http://i.imgur.com/kit3KPp.png" >

<h1 style="
    float: right;
    font-family: Verdana;
    color: #686262;
    text-shadow: 1px 2px 1px #7E7D7D;
    margin-right: 23px;
"> Mapa dos Blues </h1>

<h1 style="
    float: right;
    font-size: 12px;
    font-family: Verdana;
    color: #707070;
    margin-right: -230px;
"> <a href="http://somosmugiwara.forumeiros.com/forum" class="postlink" style="
    color: #797373;
    text-decoration: none;
"> >> Voltar ao Forum << </a></h1>

<img src="http://i.imgur.com/fctAGZJ.jpg" width="auto" height="auto" alt="Mapa dos Blues" usemap="#bluemap" style="
    margin-top: 7px;
    border: 2px solid #6F6A6A;   
">

<map name="bluemap">
<area shape="rect" coords="230,641,287,677" title="Ohara Island" href="http://somosmugiwara.forumeiros.com/f62-ohara-island">
<area shape="rect" coords="184,428,214,445" title="Clique para ver Kagero Island" href="http://somosmugiwara.forumeiros.com/f66-kagero-island">
<area shape="rect" coords="91,591,135,615" title="Kimotsu Town" href="http://somosmugiwara.forumeiros.com/f157-kimotsu-town">
 
</map>

</body>
</html>

16Código HTML Empty Re: Código HTML Ter 17 Set 2013, 10:33 am

Legolas

Legolas
Moderadores
Moderadores

Você retirou o efeito que pediu?

Enfim... pra fazer o que deseja, basta aplicar uma tabela ou duas divs.

Por exemplo:

Código:
<table style="text-align: left; width: 1003px;" border="0"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="width: 661px;">
      <img src="http://i.imgur.com/fctAGZJ.jpg"
 alt="Mapa dos Blues" usemap="#bluemap"
 style="border: 2px solid rgb(111, 106, 106); margin-top: 7px; width: 723px; height: 658px;"><map
 name="bluemap">
      <area shape="rect" coords="230,641,287,677"
 title="Ohara Island"
 href="http://somosmugiwara.forumeiros.com/f62-ohara-island">
      <area shape="rect" coords="184,428,214,445"
 title="Clique para ver Kagero Island"
 href="http://somosmugiwara.forumeiros.com/f66-kagero-island">
      <area shape="rect" coords="91,591,135,615"
 title="Kimotsu Town"
 href="http://somosmugiwara.forumeiros.com/f157-kimotsu-town">
      </map>
      </td>
      <td style="width: 255px;">
      <h1
 style="font-family: Verdana; color: rgb(104, 98, 98); text-shadow: rgb(126, 125, 125) 1px 2px 1px; margin-top: -337px; width: 296px;">Mapa
dos Blues </h1>
      <h1
 style="float: center; font-size: 12px; font-family: Verdana; color: rgb(112, 112, 112); text-align: center;">
      <a href="http://somosmugiwara.forumeiros.com/forum"
 class="postlink"
 style="color: rgb(121, 115, 115); text-decoration: none;">&gt;&gt;
Voltar ao Forum &lt;&lt; </a></h1>
<p style="color: white;">Ilha 1</p>
<p style="color: white;">Ilha 1</p>
<p style="color: white;">Ilha 1</p>
      </td>
      <br>
    </tr>
  </tbody>
</table>
Agora basta editar a seu gosto.

http://aden.rpgwars.net

17Código HTML Empty Re: Código HTML Ter 17 Set 2013, 11:11 am

Convidado

avatar
Convidado

Ficou legal demais, só tem um problema:

Código HTML Kw46DBp

Teria como deixar as ilhas lado a lado, note que ficam uma e, baixo da outra e fica muito grande, queria deixa-las lado a lado.

Quanto ao código que você vez, vou utilizar sim. mas ainda vou edita-lo, colocar o fundo e outras coisas.

18Código HTML Empty Re: Código HTML Ter 17 Set 2013, 11:22 am

Legolas

Legolas
Moderadores
Moderadores

Sim, veja:

Código:
<table style="text-align: left; width: 1003px;" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="width: 661px;">
      <img src="http://i.imgur.com/fctAGZJ.jpg" alt="Mapa dos Blues" usemap="#bluemap" style="border: 2px solid rgb(111, 106, 106); margin-top: 7px; width: 723px; height: 658px;"><map name="bluemap">
      <area shape="rect" coords="230,641,287,677" title="Ohara Island" href="http://somosmugiwara.forumeiros.com/f62-ohara-island">
      <area shape="rect" coords="184,428,214,445" title="Clique para ver Kagero Island" href="http://somosmugiwara.forumeiros.com/f66-kagero-island">
      <area shape="rect" coords="91,591,135,615" title="Kimotsu Town" href="http://somosmugiwara.forumeiros.com/f157-kimotsu-town">
      </map>
      </td>
      <td style="width: 255px;">
      <h1 style="font-family: Verdana; color: rgb(104, 98, 98); text-shadow: rgb(126, 125, 125) 1px 2px 1px; margin-top: -337px; width: 296px;">Mapa
dos Blues </h1>
      <h1 style="float: center; font-size: 12px; font-family: Verdana; color: rgb(112, 112, 112); text-align: center;">
      <a href="http://somosmugiwara.forumeiros.com/forum" class="postlink" style="color: rgb(121, 115, 115); text-decoration: none;">&gt;&gt;
Voltar ao Forum &lt;&lt; </a></h1>
<center>
<p style="color: white; display: inline; padding: 0 10px;">Ilha 1</p>
<p style="color: white; display: inline; padding: 0 10px;">Ilha 1</p>
<p style="color: white; display: inline; padding: 0 10px;">Ilha 1</p>
<p style="color: white; display: inline; padding: 0 10px;">Ilha 1</p>
<br><br>
<p style="color: white; display: inline; padding: 0 10px;">Ilha 1</p>
<p style="color: white; display: inline; padding: 0 10px;">Ilha 1</p>
<p style="color: white; display: inline; padding: 0 10px;">Ilha 1</p>
<p style="color: white; display: inline; padding: 0 10px;">Ilha 1</p>
      </center></td>
     
    </tr>
  </tbody>
</table>

http://aden.rpgwars.net

19Código HTML Empty Re: Código HTML Ter 17 Set 2013, 11:38 am

Convidado

avatar
Convidado

Perfeito man, tudo resolvido.....

ajudou demais...

Conteúdo patrocinado



Ir para o topo  Mensagem [Página 1 de 1]

JScript »  Forumeiros (Avançado) » Ajuda & Suporte » Código HTML

Permissões neste sub-fórum
Não podes responder a tópicos