Jump to content
Fórum Script Brasil
  • 0

Varias IDs em uma só imagem em javascript


Question

Olá pessoal, não entendo quase nada e sou daqueles q usam FrontPage até hoje, porque minhas paginas html são muito simples.

Mas agora preciso criar varias IDs em uma só imagem.

Preciso alterar a cor dos pontos coloridos dessa imagem (dependendo do retorno no xml)

A parte do xml sei fazer, se saberia alterar a imagem toda, mas não posso alterar a imagem toda para cada situação,

porque o servidor é muito fraco.

Tentei fazer em camadas no FrontPage, mas a imagem fica deslocada.

Tem como resolver isso sem ter quer recarregar totalmente a imagem, recarregar só os pontos coloridos ???

 

PONTOS.png

Edited by h3lyofillho
Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0
Posted (edited)
9 horas atrás, wendelApOliveira disse:

Olá bom dia Wendel.

Preciso mudar os pontos coloridos na imagem (amarelo, verde, vermelho, azul), laranja), mas sem ter que recarregar a imagem toda novamente, senão eu teria que ter varias imagens em tamanho normal(grande), quero mudar apenas alguns pedaços da imagem, (ao passar o mouse, por exemplo)

Pesquisei bastante ontem, e parece que o caminho é usar "usemap" com as coodernadas da imagem.

No caso da imagem abaixo, marquei uma seta indicando que quero mudar a cor (esta em azul) quero deixar vermelho), então baseado no que li, fiz o seguinte:

Abri o Paint e peguei as coodenadas do ponto azul, nesse caso: 328,90,310,82.

Editei uma imagem em vermelho pequena pra substituir o ponto azul (somente o ponto azul marcado, o resto da imagem continua).

Agora preciso substituir o ponto azul pelo vermelho, ao passar o moouse.

Com esse código consigo criar um link no ponto azul, mas o que preciso é mudar a cor dele, ao passar o mouse.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>TROCA IMAGEM</title>
</head>

<body>

<img src="ponto.png" alt="Workplace" usemap="#GRAVADOR" width="513" height="535">
<map name="GRAVADOR">
<area shape="rect" coords="328,90,311,82" alt="globo" href="http://globo.com">
</map>

</body>
</html>

9 horas atrás, wendelApOliveira disse:

Acho que é esse o caminho.

 

 

verm.gif

ponto.png

Edited by h3lyofillho
Link to post
Share on other sites
  • 0

Então coloquei a pagina aqui para ver como ficava o htm e entendi seu problema, como te disse estou começando.  Fiz um esboço aqui usando addEventeListener(movemouseout, e o mouseouver em uma variável do tipo Div html,  acho que pode te ajudar clarear uma maneira de ter o evento e um estilo posicionando o tamanho. 

    a.addEventListener("mouseout",clicar);
    a.addEventListener("mouseover",enter);

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id= "Area" class="shadowbox">
        interaja....
    </div>

    <style>
        .shadowbox {
            width: 15em;
            box-shadow: 8px 8px 5px #444;
            padding: 8px 12px;
            
        }
    </style>

    <script>
        var a = window.document.getElementById("Area");
        a.addEventListener("mouseout",clicar);
        a.addEventListener("mouseover",enter);

        
        function clicar(){
            a.innerText ="click"
            a.style.background = "black"
            
        }
        function enter(){
            a.innerText ="entrar"
            a.style.background = "red"
        }
    </script>
</body>
</html>

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      148849
    • Total Posts
      644846
×
×
  • Create New...