Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Denis Gubaua

Problemas para usar opacity em imagem

Por , em Desenvolvimento frontend

Recommended Posts

Denis Gubaua    0

Denis Gubaua
Postado

Bom dia, boa tarde, boa noite. :)

 

Meu primeiro post aqui, acho que estou no local certo para tirar minha duvida.

 

Estou com problema para colocar um evento de mouse em uma imagem mapeada, segundo tudo que eu li em varios sites, pode sim usar onMouseOver na tag <area>, porém ela não esta me dando efeito algum.

 

No meu caso é assim, me pediram para estar fazendo um topo de um site, a agência que me contratou passou um PSD eu fiz tudo e está funcionando, mais eu queria colocar aquele simples efeito de transparencia nos botões, para isto o que eu fiz foi estar tentando usar o onMouseOver e o onMouseOut dentro da tag <area> da minha imagem mapeada (no fim posto o codigo), mais não funciona, tanto a transparencia como o evento, não sei mais como fazer e como tentar aí resolvi procurar ajuda de pessoas mais experientes. Vou postar todo meu código aqui, pode não ser o melhor, mais é o que eu sei fazer.

 

Obs: Eu não posso modificar o arquivo fonte, então não posso colocar bibliotecas como jquery, só posso mexer no "header" do site, pois eles me passaram um login/senha para acessar por todo um sistema para lojas online. Lá tenho um editor de topo, onde posso adicionar html, css e js, mais não tem como usar biblioteca nenhuma para js.

 

 

<style type="text/css">
body {
    background-image: url(images/bg.png);
    background-repeat: repeat-x;
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
 }
</style>

<body>

<img src="images/logo_menor.png" width="473" height="150" border="0" usemap="#Map" style="float:left" />
<map name="Map" id="Map">
  <area shape="poly" coords="122,41,224,24,266,5,358,5,443,55,444,120,351,147,112,147" href="#" />

</map>


<img src="images/botoes_menor.png" width="512" height="150" border="0" usemap="#Map2" style="float:right;"/>

<map name="Map2" id="Map2">

  <area shape="rect" coords="45,8,171,29" href="#"  style="opacity:0.8" onMouseOver="style.opacity=1.0" onMouseOut="style.opacity=0.8"/>
  
  <area shape="rect" coords="202,8,326,29" href="#"  style="opacity:0.8" onMouseOver="style.opacity=1.0" onMouseOut="style.opacity=0.8"/>
  
  <area shape="rect" coords="350,8,487,29" href="#;"  style="opacity:0.8" onMouseOver="style.opacity=1.0" onMouseOut="style.opacity=0.8"/>

  <area shape="rect" coords="196,78,237,119" href="#" target="_blank"  style="opacity:0.8" onMouseOver="style.opacity=1.0" onMouseOut="style.opacity=0.8"/>
 
<area shape="rect" href="#" coords="245,78,285,119" target="_blank"  style="opacity:0.8" onMouseOver="style.opacity=1.0" onMouseOut="style.opacity=0.8"/>
    
  <area shape="rect" coords="293,78,334,119" href="#" target="" style="opacity:0.8" onMouseOver="style.opacity=1.0" onMouseOut="style.opacity=0.8"/>
</map>
</body>

Eu estava tentando assim por ultimo, ja tentei usar div tmb e manipular o css mais não funcionou também, já tentei colocar aspas simples para os valores de opacity e nada, todos os modos que eu tentei ele não dava efeito algum. Como a imagem é mapeada não tenho como usar tag <a> e se tem eu não sei como faço porque das formas que tentei não funciona. Espero que alguem me ajude, se tiverem uma duvida sobre o meu problema fala que eu tento explicar. O sistema que eu uso para mexer é o da empresa Ciashop de loja SMP segundo o que tem no site deles, não sei se resolve alguma coisa. Aí é bem limitado o que eu posso fazer, pelo menos o que eu aprendi nesses ultimos 4 dias mexendo. Alguem me da uma dica por favor.

 

Desde já agradeço a vocês...!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Denis Gubaua    0

Denis Gubaua
Postado

O problema que você não postou a Loja online para visualizar como está hoje. Peço que poste a loja online.

 

http://secure.ciashop.com.br/loja/default.asp?store=108421

 

ta aí a loja, sendo criada ainda, reparem que só posso modificar a parte onde se encontra a logo ate os botões de redes sociais e carrinho.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Buchechafs    6

Buchechafs
Postado

Conselho.

 

Trabalhar com 1 imagem com 2 partes dentro dela.

 

Como assim?

 

Ter uma imagem que dentro dela possua uma imagem com opacidade e outra sem opacidade e trabalhar somente com o css. propriedade background-position.

 

Espero ter ajudado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Denis Gubaua    0

Denis Gubaua
Postado

Conselho.

 

Trabalhar com 1 imagem com 2 partes dentro dela.

 

Como assim?

 

Ter uma imagem que dentro dela possua uma imagem com opacidade e outra sem opacidade e trabalhar somente com o css. propriedade background-position.

 

Espero ter ajudado.

 

 

Se eu entendi no caso usar o rollover? Assim, não entendi muito bem como você quis dizer uma imagem que dentro possua a com opacidade, no caso ter duas imagens iguais uma com opacidade ate ai eu entendi, dai você fala para chamar ela usando o comando normal de evento do mouse?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Buchechafs    6

Buchechafs
Postado

Tem que organizar melhor isso ai, separando tudo. Está só uma imagem, para fazer isso que você quer precisaria de varias imagens diferentes do mesmo tamanho e trabalhar com a propriedade z-index do css e isso ficarei muito grande.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Denis Gubaua    0

Denis Gubaua
Postado

Tem que organizar melhor isso ai, separando tudo. Está só uma imagem, para fazer isso que você quer precisaria de varias imagens diferentes do mesmo tamanho e trabalhar com a propriedade z-index do css e isso ficarei muito grande.

entendi... estou separando as imagens, vou ter que posicionar 1 por 1 no layout ne? nao sei macete para fazer com que organize todas rapidamente, ja estou terminando na verdade, se eu conseguir posto o resultado aqui, to fazendo uns cambalaxo mais ta indo kkkk

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito