1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Usar 'anchors' com 'map' para secções?

Discussão em 'Web Development' iniciada por Renshu Rong, 13 de Março de 2009. (Respostas: 6; Visualizações: 802)

  1. Renshu Rong

    Renshu Rong Power Member

    Estou a criar um site feito só com imagens para evitar o rightclick porque o site onde o estou a fazer não permite javascripts nem nada do género - só HTML e CSS. No site que estou a criar estou a tentar fazer secções (anchors) com links a abrir dentro da mesma pagina como se fossem para outras (não sei se me estou a fazer entender). Isto que eu acabei de dizer só com texto funciona bem mas com imagens não estou a conseguir... Também não sei se é possível, mas penso que sim... O código que tenho é este:

    Código:
     
    <table style="margin: 0px auto;">
    <div style="width: 947px; height: 31px;" class="structurediv" align="left">
    <img src="[URL]http://img13.imageshack.us/img13/2222/barra.tif[/URL]" usemap="#barra">
    <map name="barra">
    <area shape="rect" coords="260, 0, 360, 31" <a href="#link1"></a>
    <area shape="rect" coords="360, 0, 460, 31" <a href="#link2"></a>
    <area shape="rect" coords="460, 0, 560, 31" <a href="#link3"></a>
    <area shape="rect" coords="560, 0, 660, 31" <a href="#link4"></a>
    <area shape="rect" coords="660, 0, 770, 31" <a href="#link5"></a>
    </map></div>
    <td valign="top">
    <div style="width: 947px; height: 602px; overflow-y: hidden;" class="structurediv">
    <a name="link1"><div style="width: 945px; height: 602px;" align="left"></a>
    <img src="[URL]http://img23.imageshack.us/img23/2710/content1.tif[/URL]">
    </div>
    <a name="link2"><div style="width: 947px; height: 602px;" align="left"></a>
    <img src="[URL]http://img24.imageshack.us/img24/9243/content2.tif[/URL]">
    </div> 
    <a name="link3"><div style="width: 947px; height: 602px;" align="left"></a>
    <img src="[URL]http://img8.imageshack.us/img8/5448/content3.tif[/URL]">
    </div>
    <a name="link4"><div style="width: 947px; height: 602px;" align="left"></a>
    <img src="[URL]http://img5.imageshack.us/img5/5049/content4.tif[/URL]">
    </div>
    <a name="link5"><div style="width: 947px; height: 602px;" align="left"></a>
    <img src="[URL]http://img12.imageshack.us/img12/1253/content5.tif[/URL]">
    </div>
    </div></td></tr></table>
    
    Quando guardo no pc pa experimentar funciona bem, alias funciona sempre mesmo que eu troque no 'map' alguma tag. Mas quando coloco online, no site, não funciona!
    Alguém com uma solução?
     
  2. geoblast

    geoblast Power Member

    Primeiro, o javascript está disponível sempre! se tens dúvidas, escreve um alert no onload do html e verificas.
    Código:
    <body onload="alert('teste')">
    Quanto às imagens tens que usar jpeg's, gif's ou png's.
     
  3. Renshu Rong

    Renshu Rong Power Member

    Sim, as imagens a usar no site estão no formato PNG.
    Mas o site onde estou a criar o "sub-site" não permite javascprits nem nada parecido, só HTML e CSS - daí eu ter que fazer o site todo em imagens...

    Mas mesmo assim, eu queria saber é como ponho a barra a funcionar ao clicar por cima das letras ir para o sítio pretendido como exemplificado no código acima.
    Essa é a minha dúvida.
     
  4. geoblast

    geoblast Power Member

    Fecha o anchor após a imagem,parece-me que é isto. Como é que um alojamento não suporta javascript?? O javascript não é processado no servidor mas sim no browser do cliente.
     
  5. Renshu Rong

    Renshu Rong Power Member

    Tentei fechar a anchor após as imagens mas continua a não dar.
    O problema não estará na parte da barra?

    Código:
     
    <table style="margin: 0px auto;">
    <div style="width: 947px; height: 31px;" class="structurediv" align="left">
    <img src="[URL]http://img13.imageshack.us/img13/2222/barra.tif[/URL]" usemap="#barra">
    <map name="barra">
    <area shape="rect" coords="260, 0, 360, 31" <a href="#link1"></a>
    <area shape="rect" coords="360, 0, 460, 31" <a href="#link2"></a>
    <area shape="rect" coords="460, 0, 560, 31" <a href="#link3"></a>
    <area shape="rect" coords="560, 0, 660, 31" <a href="#link4"></a>
    <area shape="rect" coords="660, 0, 770, 31" <a href="#link5"></a>
    </map></div>
    
    Não sei onde está o problema mas parece ali algures no map que algo esteja a fazer com que algo não funcione, não sei...
     
  6. geoblast

    geoblast Power Member

    tens razão..

    Código:
    <area shape="rect" coords="159,165,357,249" href="#link1" />
    Este é o código correcto do area map.
     
  7. Renshu Rong

    Renshu Rong Power Member

    Nem assim funciona... Já tentei de todas as maneiras, até inventei!!! Acho que anchors e maps não se dão lá muito bem!
     

Partilhar esta Página