YionTown: Tutorial del viste para impresionar

Esto le puede servir a alguien para su blog entonces lo voy a compartir, esto lo cree solita entonces si tienen alguna pregunta no duden en dejarla en los comentarios, lo unico que necesitas es el codigo que te dejo abajo y esta pag pixeldolls alli vas a elegir lo que mas te guste, yo personalmente elegi Bratz.

Tienes que empezar a elegir lo que te guste (por temas de complejidad yo solo puse cabello, ropa y zapatos) cada elemento tiene una url distinta, lo unico que vas a necesitar de esta pagina es en el elemento que quieras cuando lo tengas en la pantalla grande le das click derecho y copiar url de la imagen.

Ahora si vamos con el codigo:

<span>★ Viste para impresionar ★</span>

</div>

</div>

<span class="w-label" id="w-hair-name">Cabello</span>

</div>

</div>

<span class="w-label" id="w-bot-name">Falda/Jeans</span>

</div>

<span class="w-label" id="w-shoe-name">Zapatos</span>

</div>

window.addEventListener('load', function() {

var hairAssets = [

{ name: 'Blonde', url: 'https://pixeldolls.net/dollmakers/files/bratz/hair42.gif', w: 77, h: 134, left: 2, top: -5 },

{ name: 'Brunette', url: 'https://pixeldolls.net/dollmakers/files/bratz/hair25.gif', w: 95, h: 154, left: -6, top: -9 }

];

var topAssets = [

{ name: 'Pink Top', url: 'https://pixeldolls.net/dollmakers/files/bratz/top19.gif', w: 47, h: 34, left: 18, top: 62 },

{ name: 'Black Top', url: 'https://pixeldolls.net/dollmakers/files/bratz/top7.gif', w: 32, h: 51, left: 25, top: 55 }

];

var botAssets = [

{ name: 'Black Jean', url: 'https://pixeldolls.net/dollmakers/files/bratz/pants14.gif', w: 37, h: 106, left: 23, top: 106 },

{ name: 'Blue Jean', url: 'https://pixeldolls.net/dollmakers/files/bratz/pants9.gif', w: 37, h: 105, left: 23, top: 105 }

];

var shoeAssets = [

{ name: 'Platform Boots', url: 'https://pixeldolls.net/dollmakers/files/bratz/shoe2.gif', w: 47, h: 70, left: 18, top: 150 },

{ name: 'Fur Boots', url: 'https://pixeldolls.net/dollmakers/files/bratz/shoe3.gif', w: 47, h: 70, left: 18, top: 150 }

];

var h = 0, t = 0, b = 0, s = 0;

function applyLayer(imgEl, asset) {

imgEl.src = asset.url;

imgEl.style.width = asset.w + 'px';

imgEl.style.height = asset.h + 'px';

imgEl.style.left = asset.left + 'px';

imgEl.style.top = asset.top + 'px';

}

function changeOutfit() {

applyLayer(document.getElementById('doll-layer-hair'), hairAssets[h]);

document.getElementById('w-hair-name').textContent = hairAssets[h].name;

applyLayer(document.getElementById('doll-layer-top'), topAssets[t]);

document.getElementById('w-top-name').textContent = topAssets[t].name;

applyLayer(document.getElementById('doll-layer-bottom'), botAssets[b]);

document.getElementById('w-bot-name').textContent = botAssets[b].name;

applyLayer(document.getElementById('doll-layer-shoes'), shoeAssets[s]);

document.getElementById('w-shoe-name').textContent = shoeAssets[s].name;

}

document.getElementById('w-hair-prev').addEventListener('click', function() { h = (h - 1 + hairAssets.length) % hairAssets.length; changeOutfit(); });

document.getElementById('w-hair-next').addEventListener('click', function() { h = (h + 1) % hairAssets.length; changeOutfit(); });

document.getElementById('w-top-prev').addEventListener('click', function() { t = (t - 1 + topAssets.length) % topAssets.length; changeOutfit(); });

document.getElementById('w-top-next').addEventListener('click', function() { t = (t + 1) % topAssets.length; changeOutfit(); });

document.getElementById('w-bot-prev').addEventListener('click', function() { b = (b - 1 + botAssets.length) % botAssets.length; changeOutfit(); });

document.getElementById('w-bot-next').addEventListener('click', function() { b = (b + 1) % botAssets.length; changeOutfit(); });

document.getElementById('w-shoe-prev').addEventListener('click', function() { s = (s - 1 + shoeAssets.length) % shoeAssets.length; changeOutfit(); });

document.getElementById('w-shoe-next').addEventListener('click', function() { s = (s + 1) % shoeAssets.length; changeOutfit(); });

changeOutfit();

});

</script>

<style>

.yion-wardrobe-widget {

all: initial;

display: block;

width: 210px;

background: #ffcfe2;

border: 2px dotted #ff1493;

padding: 2px;

box-sizing: border-box;

font-family: 'MS Sans Serif', Tahoma, sans-serif;

margin: 10px auto;

box-shadow: 2px 2px 0px rgba(255, 20, 147, 0.2);

user-select: none;

}

.yion-wardrobe-widget .wardrobe-title-bar {

background: #ff1493;

color: #ffffff;

font-size: 9px;

font-weight: bold;

padding: 4px;

text-align: center;

text-shadow: 1px 1px #000;

letter-spacing: 0.5px;

}

.yion-wardrobe-widget .wardrobe-body {

background: rgba(255, 255, 255, 0.7);

padding: 6px;

display: flex;

flex-direction: column;

align-items: center;

gap: 8px;

}

.yion-wardrobe-widget .wardrobe-display {

width: 100%;

height: 280px;

background: #ffffff;

border: 1px dashed #ff69b4;

position: relative;

overflow: hidden;

display: flex;

justify-content: center;

align-items: flex-start;

box-sizing: border-box;

}

.yion-wardrobe-widget .doll-wrapper {

position: relative;

width: 83px;

height: 220px;

transform: scale(1.2);

transform-origin: top center;

margin-top: 10px;

}

.yion-wardrobe-widget .doll-layer {

position: absolute !important;

image-rendering: pixelated;

}

#doll-body-base {

top: 0 !important;

left: 0 !important;

width: 83px !important;

height: 220px !important;

z-index: 10;

}

#doll-layer-shoes { z-index: 15; }

#doll-layer-bottom { z-index: 20; }

#doll-layer-top { z-index: 30; }

#doll-layer-hair { z-index: 40; }

.yion-wardrobe-widget .wardrobe-controls {

width: 100%;

display: flex;

flex-direction: column;

gap: 4px;

}

.yion-wardrobe-widget .w-row {

display: flex;

justify-content: space-between;

align-items: center;

background: #ffffff;

border: 1px solid #ff69b4;

padding: 1px;

}

.yion-wardrobe-widget .w-label {

font-size: 9px;

color: #d1156c;

font-weight: bold;

text-align: center;

}

.yion-wardrobe-widget .w-btn {

background: #ffcfe2;

border: 1px solid #ff1493;

color: #ff1493;

font-size: 8px;

padding: 2px 5px;

cursor: pointer;

}

.yion-wardrobe-widget .w-btn:hover {

background: #ff1493;

color: #ffffff;

}

</style>

Ahora para editarlo vas a hacer lo siguiente

Para la muñequita base vas a buscar esta parte del codigo:

Y lo que vas a cambiar es lo que dice "TU LINK DE CUERPO DE MUÑECA" alli solo vas a poner el link de la muñequita que quieras

Ahora para la ropa es un poco mas complicado, tienes varias opciones en la pagina y vas a elegir las que mas te gusten y vas a hacer algo similar, vas a copiar los url de las imágenes y los vas a pegar en estas partes:

Para el cabello:

var hairAssets = [

{ name: 'Blonde', url: 'https://pixeldolls.net/dollmakers/files/bratz/hair42.gif', w: 77, h: 134, left: 2, top: -5 },

{ name: 'Brunette', url: 'https://pixeldolls.net/dollmakers/files/bratz/hair25.gif', w: 95, h: 154, left: -6, top: -9 }

];

Para los tops:

var topAssets = [

{ name: 'Pink Top', url: 'https://pixeldolls.net/dollmakers/files/bratz/top19.gif', w: 47, h: 34, left: 18, top: 62 },

{ name: 'Black Top', url: 'https://pixeldolls.net/dollmakers/files/bratz/top7.gif', w: 32, h: 51, left: 25, top: 55 }

];

Para los pantalones:

var botAssets = [

{ name: 'Black Jean', url: 'https://pixeldolls.net/dollmakers/files/bratz/pants14.gif', w: 37, h: 106, left: 23, top: 106 },

{ name: 'Blue Jean', url: 'https://pixeldolls.net/dollmakers/files/bratz/pants9.gif', w: 37, h: 105, left: 23, top: 105 }

];

Para los zapatos

var shoeAssets = [

{ name: 'Platform Boots', url: 'https://pixeldolls.net/dollmakers/files/bratz/shoe2.gif', w: 47, h: 70, left: 18, top: 150 },

{ name: 'Fur Boots', url: 'https://pixeldolls.net/dollmakers/files/bratz/shoe3.gif', w: 47, h: 70, left: 18, top: 150 }

];

Recuerda que siempre los links de las imagenes van despues del URL: " y plis revisa siempre que este cerrado el " . Ahora algo bien importante, ajustar cada uno de los elementos y para esto tenemos que mover esta parte del código de cada uno de los ítems que pongas

w: 47, h: 70, left: 18, top: 150

y estos funcionan asi

left → mueve la prenda horizontalmente (más alto = más a la derecha, más bajo o negativo = más a la izquierda)

top → mueve la prenda verticalmente (más alto = más abajo, más bajo o negativo = más arriba)

w y h → el ancho y alto con que se dibuja esa imagen (si la haces más grande/chica, puede que también tengas que reajustar left/top para que siga centrada)

Es ir jugando con los números y ver que se ajusta mejor a lo que quieres, de todas maneras cualquier duda me pueden escribir un comentario

7 comentarios:

Marthox10 de julio de 2026 a las 10:44 p.m.
Eyyy esta increíble quiero hacer algo parecido, me sirve mucho!!
ResponderBorrar
Respuestas
ꫀᦓρꫀᥴꪻ᥅ꪖ˚˖𓍢ִ໋🦢˚18 de julio de 2026 a las 10:35 p.m.
holii!! no sé si seré muy tonta o qué, pero cómo puedo conseguir los id de cada prenda? muchas gracias por el tutorial!!
ResponderBorrar
Respuestas
CherryInNegative21 de julio de 2026 a las 10:01 p.m.
Holiii yo tengo una pregunta, es que intentado poner la ropa y el cabello pero no me sale para que se este cambiando con las flechas, jashjas si me hago entender? no me aparece para que se vaya cambiando cuando le doy con las flechas
ResponderBorrar
Respuestas
chellita25 de julio de 2026 a las 9:21 p.m.
hola, oyem, me puedes ayudar? tu código no me funciono y pues me gusto mucho la muñeca y la quiero en mi blog, alguna solucion?
ResponderBorrar
Respuestas

Agregar un comentario

10 jul 2026

Tutorial del viste para impresionar

7 comentarios: