- Postagens: 9
- Obrigados Recebidos: 0
Sprite CSS inline dentro de artigos.
- Superolavo
-
Autor do Tópico
- Offline
- JCB! Novato
-
Menos
Mais
13 anos 10 meses atrás #34940
por Superolavo
Superolavo created the topic: Sprite CSS inline dentro de artigos.
Olá a todos!
Estou fazendo um artigo simples onde fiz uma tabela 4X4 com divs. Usei sprites e o background position para chamar as imagens. Na mesma imagem de sprite tb existe as imagens que eu editei para serem hover nas divs.
Consegui fazer com que as divs ficassem com as img's hovers, mas somente declarando as classes no head de um html.
Alguem sabe como fazer o mesmo efeito utilizando o css inline? (nos artigos joomla todos os css sao inline, acho!).
Um exemplo de como esta:
<div style="float: left; padding: 20px;">
<div style="background: url(images/sprite.png); background-position: 0px -210px; width: 300px; height: 200px;"></div>
</div>
<div style="float: left; padding: 20px;">
<div style="background: url(images/sprite.png); background-position: 0px -630px; width: 300px; height: 200px;"></div>
</div>
<div style="clear: both;"></div>
<div style="float: left; padding: 20px;">
<div style="background: url(images/sprite.png); background-position: 0px -1050px; width: 300px; height: 200px;"></div>
</div>
<div style="float: left; padding: 20px;">
<div style="background: url(images/sprite.png); background-position: 0px -1470px; width: 300px; height: 200px;"></div>
</div>
So falta descobrir como por o hover na div e chamar a outra posicao da imagem.
HELP!!!
Olavo Monteiro
Estou fazendo um artigo simples onde fiz uma tabela 4X4 com divs. Usei sprites e o background position para chamar as imagens. Na mesma imagem de sprite tb existe as imagens que eu editei para serem hover nas divs.
Consegui fazer com que as divs ficassem com as img's hovers, mas somente declarando as classes no head de um html.
Alguem sabe como fazer o mesmo efeito utilizando o css inline? (nos artigos joomla todos os css sao inline, acho!).
Um exemplo de como esta:
<div style="float: left; padding: 20px;">
<div style="background: url(images/sprite.png); background-position: 0px -210px; width: 300px; height: 200px;"></div>
</div>
<div style="float: left; padding: 20px;">
<div style="background: url(images/sprite.png); background-position: 0px -630px; width: 300px; height: 200px;"></div>
</div>
<div style="clear: both;"></div>
<div style="float: left; padding: 20px;">
<div style="background: url(images/sprite.png); background-position: 0px -1050px; width: 300px; height: 200px;"></div>
</div>
<div style="float: left; padding: 20px;">
<div style="background: url(images/sprite.png); background-position: 0px -1470px; width: 300px; height: 200px;"></div>
</div>
So falta descobrir como por o hover na div e chamar a outra posicao da imagem.
HELP!!!
Olavo Monteiro
Please Entrar ou Registrar to join the conversation.
- angelo.galo
-
- Offline
- JCB! Professional
-
13 anos 10 meses atrás #34956
por angelo.galo
[center:pq7gqxir]Tudo Sobre PC
Tecnologia em um só lugar!
[url:pq7gqxir]http://www.tudosobrepc.com.br[/url:pq7gqxir][/center:pq7gqxir]
angelo.galo replied the topic: Re: Sprite CSS inline dentro de artigos.
Respondendo a sua duvida...
Pelo que eu entendi vc quer colocar 4 imagens dentro de um artigo com rollover sendo que cada uma das imagens em uma posição diferente? que seriam 4 posições certo?
Se for isso que entendi a solução que eu encontrei está abaixo. Faça um teste e me responda se é isso que vc deseja.
Abraços
Pelo que eu entendi vc quer colocar 4 imagens dentro de um artigo com rollover sendo que cada uma das imagens em uma posição diferente? que seriam 4 posições certo?
Se for isso que entendi a solução que eu encontrei está abaixo. Faça um teste e me responda se é isso que vc deseja.
Abraços
<table style="height: 200px; width: 300px; padding: 20px; float: left;" border="0">
<tbody>
<tr>
<td><img src="images/imagem1.png" border="0" width="300" height="200" onmouseover="this.src='images/imagem1.1.png';" onmouseout="this.src='images/imagem1.png';" style="margin: -210px 0px 0px 0px;" /></td>
<td><img src="images/imagem2.png" border="0" width="300" height="200" onmouseover="this.src='images/imagem2.2.png';" onmouseout="this.src='images/imagem2.png';" style="margin: -630px 0px 0px 0px;" /></td>
</tr>
<tr>
<td><img src="images/imagem3.png" border="0" width="300" height="200" onmouseover="this.src='images/imagem3.3.png';" onmouseout="this.src='images/imagem3.png';" style="margin: -1050px 0px 0px 0px;" /></td>
<td><img src="images/imagem4.png" border="0" width="300" height="200" onmouseover="this.src='images/imagem4.4.png';" onmouseout="this.src='images/imagem4.png';" style="margin: -1470px 0px 0px 0px;" /></td>
</tr>
</tbody>
</table>[center:pq7gqxir]Tudo Sobre PC
Tecnologia em um só lugar!
[url:pq7gqxir]http://www.tudosobrepc.com.br[/url:pq7gqxir][/center:pq7gqxir]
Please Entrar ou Registrar to join the conversation.
- Superolavo
-
- Offline
- JCB! Novato
-
Menos
Mais
- Postagens: 9
- Obrigados Recebidos: 0
13 anos 10 meses atrás #34961
por Superolavo
Superolavo replied the topic: Re: Sprite CSS inline dentro de artigos.
Eu quero fazer exatamente isso:
<!-- w --> www.omega7.com.br/sprite <!-- w -->
Nao queria usar tabelas por conta de tentar ficar como web standards. Ai usei divs e uma imagem contendo todas que quero mostrar.
So nao sei fazer isso dentro do artigo, pois so suporta css inline e nao como foi feito no link.
Olavo Monteiro.
<!-- w --> www.omega7.com.br/sprite <!-- w -->
Nao queria usar tabelas por conta de tentar ficar como web standards. Ai usei divs e uma imagem contendo todas que quero mostrar.
So nao sei fazer isso dentro do artigo, pois so suporta css inline e nao como foi feito no link.
Olavo Monteiro.
Please Entrar ou Registrar to join the conversation.
- angelo.galo
-
- Offline
- JCB! Professional
-
13 anos 9 meses atrás #35052
por angelo.galo
[center:pq7gqxir]Tudo Sobre PC
Tecnologia em um só lugar!
[url:pq7gqxir]http://www.tudosobrepc.com.br[/url:pq7gqxir][/center:pq7gqxir]
angelo.galo replied the topic: Re: Sprite CSS inline dentro de artigos.
Amigo,
Já estou quase resolvendo o seu problema pois vai me ajudar muito no meu site tbm...
só estou com um problema na parte de aplicar o style... assim que resolver posto a solução completa....
Abraços
Já estou quase resolvendo o seu problema pois vai me ajudar muito no meu site tbm...
só estou com um problema na parte de aplicar o style... assim que resolver posto a solução completa....
Abraços
[center:pq7gqxir]Tudo Sobre PC
Tecnologia em um só lugar!
[url:pq7gqxir]http://www.tudosobrepc.com.br[/url:pq7gqxir][/center:pq7gqxir]
Please Entrar ou Registrar to join the conversation.
- fernandoalmeida
-
- Offline
- JCB! Senior
-
13 anos 9 meses atrás #35067
por fernandoalmeida
"Só sei que nada sei"
fernandoalmeida replied the topic: Re: Sprite CSS inline dentro de artigos.
Você pode usar o botão "Trocar Editor" para ocultar o editor e colocar a classe que quiser editando o código diretamente.
Ou também criar o arquivo editor.css no diretório css de seu template, definir as classes e usá-las através do item Style do editor.
No JCE oculta o editor em "ocultar/exibir" e as classes são definidas no template.css.
Ou também criar o arquivo editor.css no diretório css de seu template, definir as classes e usá-las através do item Style do editor.
No JCE oculta o editor em "ocultar/exibir" e as classes são definidas no template.css.
"Só sei que nada sei"
Please Entrar ou Registrar to join the conversation.