Jump to content


Photo

Colorir Fundo Quando Checkbox Estiver Marcada


  • Faça o login para participar
13 replies to this topic

#1 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 15/08/2007, 10:42

Tô quebrando a cabeça aqui pra fazer essa coisa bem simples. Cheguei em algo que funciona, mas de uma forma nada a ver com o que eu quero :P

Ocorre isso:

<tr id="fundo">
style='background-color:#ccc;'
</tr>
<tr id="fundo">
<td width="50">
  <input value="1" name="check" onclick="cbalterna(this)" type="checkbox">
</td>
<td width="350">
teste teste teste teste
</td>
<td width="100">
teste 2 teste 2 teste 2
</td>
</tr>


Ou seja, ferra com a minha tabela.

Ah, sim, o meu código é esse:

<script type="text/javascript">
function cbalterna(cb) {
elemento = document.getElementById("fundo");

elemento.innerHTML = cb.checked ? "style='background-color:#ccc;'" : "";
}
</script>

<form action="#">


<TABLE ALIGN="CENTER" WIDTH="500" border="1">
<TR id="fundo">
<TD WIDTH="50"><input type="checkbox" value="1" name="check" onclick="cbalterna(this)"></TD>
<TD WIDTH="350">teste teste teste teste</td>
<TD WIDTH="100">teste 2 teste 2 teste 2</TD>
</tr>
<TR id="fundo">
<TD WIDTH="50"><input type="checkbox" value="1" name="check" onclick="cbalterna(this)"></TD>
<TD WIDTH="350">teste teste teste teste</td>
<TD WIDTH="100">teste 2 teste 2 teste 2</TD>
</tr>
</TABLE>

</form>


Notei que não dá certo por dois motivos:
1. Ele nao insere o style="" ali dentro da tag TR, mas sim como conteúdo dela, e isso me ferra.

2. Como todas as TR tem id="fundo", se eu clico no checkbox da TR de baixo, ferra com a de cima, mexe com a de cima apenas :(

Teria então que conseguir um jeito de detectar que a checkbox pertence aquela TR (é filha dela) e que deve alterar portanto só o fundo da sua TR pai. O problema é: como faço isso??

Dei uma olhada em algumas documentações e afins, mas não consegui ainda. Qualquer sugestão é bem vinda.

Abraços!
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#2 Allan Carvalho

Allan Carvalho

    Òó :: ^^

  • Usuários
  • 471 posts
  • Sexo:Masculino
  • Localidade:Campinas - SP
  • Interesses:Um PC novo e rápido. ^^

Posted 16/08/2007, 01:12

Olá!

Meu caro, veja:

<script type="text/javascript">
function cbalterna(cb) {
elemento = document.getElementById("fundo"+cb.id);

elemento.style.backgroundColor = cb.checked ? "#ccc'" : "#fff";
}
</script>

<form action="#">


<TABLE ALIGN="CENTER" WIDTH="500" border="1">
<TR id="fundoc1">
<TD WIDTH="50"><input type="checkbox" value="1" id="c1" name="check" onclick="cbalterna(this)"></TD>
<TD WIDTH="350">teste teste teste teste</td>
<TD WIDTH="100">teste 2 teste 2 teste 2</TD>
</tr>
<TR id="fundoc2">
<TD WIDTH="50"><input type="checkbox" value="1" id="c2" name="check" onclick="cbalterna(this)"></TD>
<TD WIDTH="350">teste teste teste teste</td>
<TD WIDTH="100">teste 2 teste 2 teste 2</TD>
</tr>
</TABLE>

</form>


Tá funcional agora.

Vou explicar as alterações. Veja que coloquei todas em negrito cor verde. Vamos na ordem:
1º - Pega o id do checkbox para procurar pelo elemento de id + id do checkbox. Exemplo: fundoc1. Logo verá o porquê.
2º - Define o estilo do elemento que foi pego mudando seu background-color (innerHTML não!)
3º - Define uma cor caso o checkbox não esteja checado. Nesse caso #fff (branco)
4º - Adicionei o c1 pois temos que vinculá-lo ao checkbox. Lembre-se: isso tem que ser sucessivo a cada TR que você for criar. Não pode haver mais que um id igual numa página. Exemplo id="fundoc3", id="fundoc4", id="fundoc5"...
5º - Assim como o item acima, deve ser colocado sucessivo também a cada checkbox para mantermos nosso vinculo e o script funcionar. Exemplo: id="c3", id="c4", id="c5"...

Os dois ultimos pontos que estão somente em negrito é para você notar a ordem sucessiva que deve ser criada.

Dúvidas?

Há sim uma maneira mais simples para fazer isso, porém, com esse "explicadão" que passei você pode deixar mais simples se estudar bem a lógica.


Beleza?

Flw!
Nome: Allan V. Ferreira de Carvalho.
Localidade: Campinas - SP
Linguagem de desenvolvimento: XHTML | CSS (Tableless) | JavaScript | AJAX | PHP
Contatos: brkamikasecps@gmail.com | brkamikasecps@hotmail.com

Posted Image


#3 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 16/08/2007, 08:49

Bah, valeu mesmo cara!

Eu sei que fiz uns negócios meio (ou muito) banais ali, mas é porque recém comecei a futricar com JS e apesar de ter umas lógicas na cabeça, eu acabo fazendo diferente por não saber como por em prática (como o lance do innerHTML, que agora deu pra entender como funciona).

De qualquer forma, tá muito bem explicado, só com um QI -100 não dá pra entender dessa forma heheh

Abração!

EDIT::

Acho que não convém abrir outro tópico pra postar algo que tenha relação com esse código, então vou colocar aqui mesmo. Seguinte: como posso integrar isso com aquele código do "Marcar" / "Desmarcar" todos os checkbox? Tentei copiar simplesmente a função cbalterna para dentro da de marcar/desmarcar, mas seria inviável, visto que não consigo pegar o TR a que me refiro.

Eu já vi em alguns códigos o pessoal usando funções que pegam o elemento parent ou child de onde aquele se encontra. Creio que algo assim resolveria o problema, mas em documentações não estou achando (inclusive se alguém tiver um site bom pra isso, favor me passar - não sendo algo como o w3schools, e sim algo que explique cada elemento, objeto, função e etc do javascript).

Olha só:
<script type="text/javascript">
function cbalterna(cb) {
elemento = document.getElementById("fundo"+cb.id);

elemento.style.backgroundColor = cb.checked ? "#ccc'" : "#fff";
}

function checkall()
{
	for(i = 0; i < document.forms[0].elements.length; i++)
	{
	
	temp = document.forms[0].elements[i];
	
			if( temp.checked == true )
		{
			temp.checked = false;
			document.getElementById("marcar").innerHTML = "<a href=\"java script:checkall('check');\">Marcar</a>"
					}
		else
		{
			temp.checked = true;
			document.getElementById("marcar").innerHTML = "<a href=\"java script:checkall('uncheck');\">Desmarcar</a>"
		}
	}
}
</script>

<div id="marcar"><a href="java script:checkall('check');">Marcar</a></div>
<BR><BR>
<form action="#">


<TABLE ALIGN="CENTER" WIDTH="500" border="1">
<TR id="fundoc1">
<TD WIDTH="50"><input type="checkbox" value="1" id="c1" name="check" onclick="cbalterna(this)"></TD>
<TD WIDTH="350">teste teste teste teste</td>
<TD WIDTH="100">teste 2 teste 2 teste 2</TD>
</tr>
<TR id="fundoc2">
<TD WIDTH="50"><input type="checkbox" value="1" id="c2" name="check" onclick="cbalterna(this)"></TD>
<TD WIDTH="350">teste teste teste teste</td>
<TD WIDTH="100">teste 2 teste 2 teste 2</TD>
</tr>
</TABLE>

</form>

Tudo funciona bem, entretanto quando marco todos ou desmarco todos, a cor não muda (claro, porque não tem nada especificado). Então, como integrar isso da forma mais simples?

Desculpa a encheção, mas não tô com um Norte muito bom pra isso não.

Abraços!

Edição feita por: Firehalk, 16/08/2007, 09:15.

BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#4 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 16/08/2007, 13:28

Aff ... coisa de louco isso ae hein galera. O poder do JS tá em manipular a árvore da página (DOM).


Marcação:
<table>
	<tr>
		<td>
			<input type="checkbox" name="abc" onclick="a(this)" />
		</td>
	</tr>
</table>

JS singelo:
function a(b){
	(b.checked==true) ? b.parentNode.style.background='#f00' : b.parentNode.style.background='#fff';
}

Pra fazer isso rodar dentro da sua função de Marcar/Desmarcar é só mandar um loop no final:
var all = document.forms['nome'].elements;

for(x=0;x<all.length;x++){
  a(all[x]);
}

Por aí...
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#5 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 16/08/2007, 15:27

Bimonti, consegui dar uma alterada seguindo as sugestões. O código está assim agora:

<script type="text/javascript">
function a(b){
(b.checked==true) ? b.parentNode.style.background='#f00' : b.parentNode.style.background='#fff';
}

function checkall()
{

	var all = document.forms[0].elements;

	for(i = 0; i < document.forms[0].elements.length; i++)
	{
	
	temp = document.forms[0].elements[i];
	
			if( temp.checked == true )
		{
			temp.checked = false;
			a(all[i]);
			document.getElementById("marcar").innerHTML = "<a href=\"java script:checkall();\">Marcar</a>"
					}
		else
		{
			temp.checked = true;
			a(all[i]);
			document.getElementById("marcar").innerHTML = "<a href=\"java script:checkall();\">Desmarcar</a>"
		}
	}

	
}
</script>

Mas, tem 2 problemas:

Eu gostaria que ele marcasse o style.backgroundcolor dentro da TR, e não da TD que é como está atualmente. Como faço para que ele pegue o TR pai, e não o TD pai que é como está agora? tentei com parentNode[0], parentNode[1], mas acho que nada disso existe.

Tem um pequeno bug: se eu tinha selecionado algum checkbox manualmente e depois clico no "Marcar" / "Desmarcar", ele não funciona corretamente. O que ocorre se eu clico em "Marcar", por exemplo, e ja tendo algum checkbox marcado, é ele desmarcar o que está marcado e marcar o não marcado. Como poderia corrigir isso?

Valeu!

Edição feita por: Firehalk, 16/08/2007, 15:42.

BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#6 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 16/08/2007, 17:36

Se liga no esquema:

<table>
	<tr id="tr">
		<td id="td">
			<input type="checkbox" name="abc" onclick="alert(this.parentNode.id),alert(this.parentNode.parentNode.id)" />
		</td>
	</tr>
</table>

Isso resolve um dos problemas.

O outro eu vou deixar vc quebrar a cabeça mais um pouco. Recomendo apenas que apague tudo e começo do zero. Você foi alterando várias coisas e chegou a um ponto que não sabe mais como prosseguir. A lógica é essa:

1. Pegar o formulário onde estão os checkbox
2. Pegar todos os inputs dentro do form
3. Verificar se é pra marcar ou desmarcar os checkboxes
4. Fazer um loop nos elementos e aplicar a opção de marcar ou desmarcar
5. Na mesma etapa do processo acima você já chama a função de mudar o fundo, ou seja, a cada iteração do loop ele marca 1 checkbox e já faz a verificação se ele está marcado ou não, colorindo o fundo de acordo.

Referências de funções: http://developer.mozilla.org
Tem uns cara ae que eu nao vou falar o nome que fica tretano de eu não postar o link do MSDN, se você quiser usa o google q lá também tem referências pro IE.
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#7 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 17/08/2007, 11:54

rapaz, acho que fiz uma salada aqui haha

Vou te explicar o que acontece... tô acostumado com ASP, e em javascript me perco em alguns detalhes, faz um revertério na minha cabeça.

Tentei assim:

<script type="text/javascript">
// NOVO

var formulario = document.forms[0].elements;

for (var n=0;n < formulario.lenght;n++) {

function acao(op) { 
if (op == marcar ) {
if (formulario[n].checked == false) {
formulario[n].checked = true;
 document.getElementById("marcar").innerHTML = "<a href=\"java script:checkall(\'desmarcar\');\">Desmarcar</a>";
 op.parentNode.parentNode.style.background='#f00';
}
} else if (op == desmarcar) {
if (formulario[n].checked == true) {
formulario[n].checked = false;
 document.getElementById("marcar").innerHTML = "<a href=\"java script:checkall(\'marcar\');\">Marcar</a>";
  op.parentNode.parentNode.style.background='#fff';
}
}
else  {
(op.checked==true) ? op.parentNode.parentNode.style.background='#f00' : op.parentNode.parentNode.style.background='#fff';
}

}

}

</script>

E na página, está assim:

<div id="marcar"><a href="java script:acao('marcar');">Marcar</a></div>
<BR><BR>
<form action="#">


<TABLE ALIGN="CENTER" WIDTH="500" border="1">
<TR>
<TD WIDTH="50"><input type="checkbox" name="check" onclick="acao(this)"></TD>
<TD WIDTH="350">teste teste teste teste</td>
<TD WIDTH="100">teste 2 teste 2 teste 2</TD>
</tr>
<TR>
<TD WIDTH="50"><input type="checkbox" name="check" onclick="acao(this)"></TD>
<TD WIDTH="350">teste teste teste teste</td>
<TD WIDTH="100">teste 2 teste 2 teste 2</TD>
</tr>
</TABLE>

</form>


Que besteira eu fiz? Deve ter sido algo ridículo, mas não sei o que é.

Edição feita por: Firehalk, 17/08/2007, 11:58.

BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#8 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 17/08/2007, 13:27

É que o javascript é mais próximo de linguagens robustas com suporte a objetos que o ASP. Mas se você seguisse a lógica que eu passei conseguiria fazer tranquilo, e com muito menos código, veja só:

A parte de marcação é simples, vou usar tabelas porque é o que você aparenta estar usando, mas atente que tabelas são bem poderosas se comparado ao que você usufruiu delas até agora pelo que eu vi nesse seu modelo.
<form action="#" name="opts" method="post"><table cellpadding="0" cellspacing="0">	<thead>		<tr>			<th>Opção</th>			<th>Descrição</th>		</tr>	</thead>	<tfoot>		<tr>			<th colspan="2">				<a href="" onclick="changeState('check'); return false;">Marcar Todos</a> |				<a href="" onclick="changeState('uncheck'); return false;">Desmarcar Todos</a>			</th>		</tr>	</tfoot>	<tbody>		<tr>			<th><input onclick="changeBgColor(this);" type="checkbox" name="opt1" /></th>			<td>Opção 01</td>		</tr>		<tr>			<th><input onclick="changeBgColor(this);" type="checkbox" name="opt2" /></th>			<td>Opção 02</td>		</tr>		<tr>			<th><input onclick="changeBgColor(this);" type="checkbox" name="opt3" /></th>			<td>Opção 03</td>		</tr>	</tbody></table></form>

Nada de novo até agora, usei as tabelas (com cabeçalhos, rodapé e corpo definidos). Um formulário e as opções. Repare que os inputs chamam a função "changeBgColor", e os links a função "changeState". Eu prefiro colocar a opção de Marcar e Desmarcar separadas e visíveis desde o início, porque o usuário precisa saber quais opções ele tem.


Agora a parte do java script:
function changeBgColor(b){
	(b.checked==true) ? b.parentNode.parentNode.className='checked' : b.parentNode.parentNode.className='unchecked';
}

Essa função é exatamente a mesma que eu te passei, o que eu fiz foi mudar ao invés da cor de fundo, eu altero a classe do elemento. Acho melhor trabalhar com folhas de estilo.

Agora a função que marca e desmarca todos:
function changeState(a){
	var form = document.forms['opts'];
	var elms = form.elements;
	var  act = (a=='check') ? true : false;

	for(x=0;x<elms.length;x++){
		if(elms[x].type.toLowerCase()=='checkbox'){
			elms[x].checked = act;
			changeBgColor(elms[x]);
		}
	}
}

É isso mesmo, 12 linhas de código, isso contando o nome da função, a linha pra separar o código e as chaves que ficam em linhas separadas para melhor organização. ^^

As 3 primeiras linhas são definições das variáveis. O formulário que contêm os elementos, os elementos em si, e a ação a ser executada na forma de um objeto bool (checked=true, unchecked=false);

Depois é um loop nos elementos do formulário. Dentro do loop eu verifico se o elemento é um checkbox. Não há problema em tentar aplicar o checked em um input text por exemplo. Ele só vai logar um alert no console de erros no FF, e vai mostrar o icone amarelo no IE, mas a execução continua. Para evitar os inconvenientes eu faça a checagem.

Dentro do if só tem os 2 comando que eu preciso. Marcar ou desmarcar o elemento e logo em seguida eu chamo a função de mudar a cor de fundo no elemento que acabou de ser manipulado.

Simples assim. Pegou essa ?!

De brinde leva essa folha de estilos:
*{	padding:0px;	margin:0px;}form{	font:11px Trebuchet MS, Verdana, serif;}table{	border:0px;	width:300px;	margin:5px;}table thead th{	background:#eee;	border-bottom:1px solid #bbb;	border-right:1px solid #fff;	padding:3px;}table tfoot th{	background:#eee;	border-top:1px solid #fff;	border-bottom:1px solid #bbb;	padding:3px;}table tfoot th a{	color:#444;}table tfoot th a:hover{	text-decoration:none;}table tbody td{	padding:2px;	border-top:1px solid #fff;}table tbody th{	text-align:center;}table tbody tr.checked{	background:#eef;}table tbody tr.unchecked{	background:#fff;}

Edição feita por: bimonti, 17/08/2007, 13:29.

WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#9 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 17/08/2007, 14:30

Tô gostando de mexer com javascript mesmo. Quero ver se aproveito a onda e passo para um PHP como linguagem dinâmica, já que ASP é muito ultrapassado com várias coisas (com arrays nem se fala, é um lixo).

Rapaz, tu é fod...! Me ajudou em CSS e agora tem me dado uma mão absurda com JavaScript. Valeu mesmo, funcionou numa boa. Quer dizer, não tinha funcionado antes mas foi porque o cabeção aqui pos language="text/javascript" e nao apenas language="javascript" (nunca dei atenção para o que isso significa, não sabia que modificava brutalmente o funcionamento).

Tá redondo agora. Valeu!
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#10 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 13822 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 28/09/2017, 03:30

Kamagra Douane cialis Propecia Arginina
Synthroid For Cheap Commander Cialis Soft viagra cialis Best Place Buy Strattera Atomoxetine Propecia Spanish
Amoxicillin For Kids 50 Gel Kamagra Oral Jelly Progesterone Low Price cialis Side Effects Expired Cephalexin

#11 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 13822 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 10/10/2017, 06:57

Best Prices Cialis Healthmen Acquistare Viagra Via Internet levitra cialis viagra Xenical Sans Ordonance Dosing Amoxicillin In Humans
Cialis Tadalafil Avis Acheter En Ligne Cytotec generic cialis Ciprofloxacin And Amoxicillin Ulcer Buy Amoxicillin Capsules In Uk
Discount Free Shipping Dutasteride Real Store Cialis Una Volta Al Giorno Commande Cialis Pharmacie cheapest levitra 20mg Androcur Clomid Cialis 10mg Kaufen
Buy Accutane Mastercard Finax For Sale Vente Cialis En Ligne France viagra online Micronised Amoxicillin

#12 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 13822 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 25/10/2017, 16:41

Pilule Cialis viagra Cialis 2 5 Mg Online Priligy Achat Canada Pharmacy 24 Hours
Viagra Generic For Sale Amoxicillin For Uterine Infection viagra Puedo Tomar Cialis Y Alcohol

#13 LarPhozyHah

LarPhozyHah

    Super Veterano

  • Usuários
  • 14515 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 25/10/2017, 18:03

Buy Prednisone Online No Prescription Cheap Cialis 12 Stuck Preis generic cialis Levitra Niedriger Blutdruck Discount Generic Worldwide Stendra Legally Visa Next Day Delivery
Cefotaxime Tadalafil Cheapest Price viagra Cephalexin 500mg Pills Pharmacy Canadian Superstore
buy direct cod isotretinoin sotret in germany overseas Sefton Propecia Servicaixa Acheter Vrai Viagra En Ligne En Antibes generic viagra Cephalexin Lyme Cialis Bonifico Bancario Cheapest Indian Prices For Nizagara
Proper Dosage Amoxicillin Sore Throad Viagra E Paroxetina isotretinoin acutane pills no physician approval overseas viagra online Online Celebrex
Tadalis Sx Soft Contraindications Viagra Wann Einnehmen Accutane Venta Online viagra Levitra Taglich
Viagra Per Amore Ciaclis No Precrib Keflex And Lung Infections viagra prescription Cialis Pharmacie Andorre
Ebay Baclofen generic viagra Donde Comprar Viagra Sin Receta En Barcelona

#14 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 13822 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 07/11/2017, 10:45

Cialis Generic On Line Efficacite Cialis Buy Flagyl 500 Mg With No Script gen health levitra Discount Tadalafil Tablets Discount Cod Only Macrobid Shop Free Consultation
Buy Now Isotretinoin Claravis Discount Elocon Best Website Generic Finasteride Pills viagra prescription Viagra Generique En France Cialis Originale Al Prezzo Piu Basso




2 user(s) are reading this topic

0 membro(s), 2 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq