Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS

Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17235
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Uma imagem, 2 posicionamentos

23-01-2008 17:29

Nesse artigo vou explicar como é possível usar 2 backgrounds ( gerado por uma única figura ), trabalhando somente com seus posicionamentos.

A figura que vai ser usada vai ser essa:
Imagem

Você pode criar qualquer outra imagem conforme deseje.

Vejamos o CSS usado:

<style type="text/css"> .div_1{ width:50px; height:50px; background:url(trans.gif); background-repeat:no-repeat; } .div_2{ width:50px; height:50px; background:url(trans.gif); background-repeat:no-repeat; background-position:-51px 0px; } </style>

Note no div_2 o background-position, que é a largura de um dos quadrados menos 1 px.

o HTML

<div class="div_1"></div> <br> <div class="div_2"></div>

Basta agora, salvar a imagem no seu PC e rodar o script acima no mesmo diretório.

Agora um exemplo usando troca das imagem quando passar o cursor.
<div class="div_1" onmouseover="this.className='div_2'" onmouseout="this.className='div_1'"></div>

0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado