Código HTML
2 participantes
Página 1 de 1
Código HTML
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:
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/
note a página criada abaixo:
http://somosmugiwara.forumeiros.com/h9-
gostaria de saber como fazer este efeito abaixo:
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/
Convidado- Convidado
Re: Código HTML
OLá. Isso é um script que trabalha com as coordenadas no mapa. Posso tentar fazer um, mas sem coordenadas, deseja?
Re: Código HTML
Humrum, pode fazer sim, me explicando o funcionamento do mesmo e como colocar as coordenadas que eu tento colocar
Convidado- Convidado
Re: Código HTML
Veja se é isso que deseja: http://apenasum.forumeiros.com/h1-teste-do-mapa
PS: este apenasum.forumeiros.com é um fórum de testes meu
PS: este apenasum.forumeiros.com é um fórum de testes meu
Re: Código HTML
Sim, isto mesmo meu caro, ficou do jeito que queria.....
ainda vai funcionar a função de mapear imagem ne?
ainda vai funcionar a função de mapear imagem ne?
Convidado- Convidado
Re: Código HTML
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
Convidado- Convidado
Re: Código HTML
@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.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
Qualquer dúvida nos retorne que ajudaremos.
joelson0007- Moderadores
- Time Online : 28d 21h 58m 5s
Mensagens : 373
Data de inscrição : 15/06/2013
Localização : Guarapuava-PR
Re: Código HTML
Humrum, eu já sabia fazer isto meu caro, aqui fiz um exemplo Legolas.
eu sabendo como colocar o resto e fácil eu consigo fazer...
- 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>
eu sabendo como colocar o resto e fácil eu consigo fazer...
Convidado- Convidado
Re: Código HTML
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.
Talvez o @JScript ou o @joelson0007 possam lhe ajudar.
Re: Código HTML
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?
E tentarei aqui fundir aquele código seu com esse meu.
Sim, poderia finalizar aquele código que você fez?
Convidado- Convidado
Re: Código HTML
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>
Re: Código HTML
Não consegui fundir, mais consegui fazer isso abaixo:
http://somosmugiwara.forumeiros.com/h9-
mas note o queria fazer abaixo:
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..
http://somosmugiwara.forumeiros.com/h9-
mas note o queria fazer abaixo:
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>
Convidado- Convidado
Re: Código HTML
Você retirou o efeito que pediu?
Enfim... pra fazer o que deseja, basta aplicar uma tabela ou duas divs.
Por exemplo:
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;">>>
Voltar ao Forum << </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>
Re: Código HTML
Ficou legal demais, só tem um problema:
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.
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.
Convidado- Convidado
Re: Código HTML
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;">>>
Voltar ao Forum << </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>
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|