Pregunta sobre z-index, append, jquery, css – Jquery: ¿Cómo superponer imágenes una sobre otra?

1

En el siguiente código tengo una página que construye una camiseta. Cuando el usuario hace clic en una opción ("Hombre / Mujer"), la sección "#shirt" muestra la camisa construida colocando las imágenes PNG en capas una encima de la otra. Por ejemplo, al seleccionar un color base de 'azul' se mostrará una imagen de una camisa azul. Luego, al seleccionar una costura del cuerpo de "acanalado" se colocará una imagen en la parte superior de la camisa azul que agrega el detalle del acanalado. En este momento, mi problema es que cada nueva imagen reemplaza a las anteriores. Todo lo demás funciona bien (las opciones aparecen en respuesta a las opciones previamente seleccionadas).

<div id="gender" class="diy-box">
    Pick Gender<br>
    <input type="radio" name="gender" data-id="" value="male" /><label>Male</label><br>
    <input type="radio" name="gender" data-id="" value="female" /><label>Female</label>

</div>

<section id="displaysection">

    <div id="male" class="desc gender diy-box">

        Pick Body<br>
        <input type="radio" name="male" data-id="105" value="" /><label>Blue</label><br>
        <input type="radio" name="male" data-id="120" value="" /><label>Black</label><br>
        <input type="radio" name="male" data-id="145" value="" /><label>White</label>

    </div>

    <div id="female" class="desc gender diy-box">

        Pick Body<br>
        <input type="radio" name="female" data-id="107" value="" /><label>Blue</label><br>
        <input type="radio" name="female" data-id="211" value="" /><label>Black</label><br>
        <input type="radio" name="female" data-id="212" value="" /><label>Pink</label>

    </div>

</section>

<div id="body_stitching" class="diy-box">

    Body Stitching<br>
    <input type="radio" name="body_stitching" data-id="" value="body_stitching_plain" /><label>Plain</label><br>
    <input type="radio" name="body_stitching" data-id="" value="body_stitching_rib" /><label>Rib</label>

</div>

<section id="displaysection">

    <div id="body_stitching_plain" class="desc body_stitching diy-box">

        Plain<br>
        <input type="radio" name="body_stitching_plain" data-id="324" value="" /><label>Blue</label><br>
        <input type="radio" name="body_stitching_plain" data-id="325" value="" /><label>Red</label>

    </div>

    <div id="body_stitching_rib" class="desc body_stitching diy-box">

        Rib<br>
        <input type="radio" name="body_stitching_rib" data-id="" value="black" /><label>Black</label><br>
        <input type="radio" name="body_stitching_rib" data-id="" value="green" /><label>Green</label>

    </div>

</section>

<div class="clear"></div>

<div id="shirt"></div>

<div id="pricefield" style="float:right"></div>

<script>

$(document).ready(function() {
    $("div.desc").hide();

    var data = {
        "105" : { img: "http://oceandrive.localhost/images/diy-images/105.png", label: "color 1", price: "100" },
        "120" : { img: "http://oceandrive.localhost/images/diy-images/120.png", label: "color 2", price: "110" },
        "145" : { img: "http://oceandrive.localhost/images/diy-images/145.png", label: "color 3", price: "120" },
        "107" : { img: "http://oceandrive.localhost/images/diy-images/107.gif", label: "color 4", price: "130" },
        "211" : { img: "http://oceandrive.localhost/images/diy-images/211.png", label: "color 5", price: "140" },
        "212" : { img: "http://oceandrive.localhost/images/diy-images/212.png", label: "color 6", price: "150" },
        "324" : { img: "http://oceandrive.localhost/images/diy-images/324.png", label: "color 7", price: "160" },
        "325" : { img: "http://oceandrive.localhost/images/diy-images/325.png", label: "color 8", price: "170" },
    };


    $('input[name]').click(function() {


        var value = $(this).val();   // pics the value of the radio button

        if(value=='male' || value=='female') {
            $("div.gender").hide('slow');
            $("div.gender input:radio").removeAttr('checked');
        }

        if(value=='body_stitching_plain' || value=='body_stitching_rib') {
            $("div.body_stitching").hide('slow');
            $("div.body_stitching input:radio").removeAttr('checked');
        }

        $("#" + value).show('slow');  // addresses the div with the radio button value picked



        if(this.checked) {

            //var value = $(this).val();
            var value = $(this).data('id');

            if (data[value] != undefined)
            {

                var html = '';
                html = html + '<img style="z-index:2;" src="'+data[value].img+'"/>';
                $('#shirt').html(html);

                var html = '';
                html = html + '- '+data[value].label+' - '+data[value].price+' NT<br>';
                $('#pricefield').html(html);

            }

        }

    });

});
¿Está diciendo que desea colocar imágenes en capas una encima de la otra, de modo que pueda agregar imágenes de detalles de diferentes colores sobre la imagen de una camiseta base? RustyTheBoyRobot
Revisé su código para ver si podía captar su intención:jsfiddle.net/CJ62j - Todavía no estoy seguro de lo que túquerer ¿conseguir? Por favor explique qué debería hacer y dónde. SpaceBison
Ok, entonces en el Jsfiddle: por ejemplo, si eliges el color azul del cuerpo, muestra el cuerpo de una camisa. Más tarde, si selecciona costuras de cuerpo y luego azul, reemplazará la imagen del cuerpo original. Sin embargo, debe agregarlo. La imagen es todos los paquetes y encajan perfectamente entre sí. Lo mismo para la información de precios que se muestra en el div campo de precios. Ahora está sustituido, pero debe ser agregado. Stefan Schneider
No está muy claro lo que estás preguntando. Cuando dices "añadir el uno al otro", ¿qué quieres decir? lucuma
Sí, exactamente, ponerme una encima de la otra es lo que quiero decir. Stefan Schneider

Tu respuesta

2   la respuesta
1

debe decidir en qué orden deben aparecer sus imágenes. Por ejemplo, desde su código, diría que tiene dos niveles (puede agregar más niveles si los necesita):

BaseCostura del cuerpo

En segundo lugar, asigne cada nivel a un índice z y cree<div> Elementos para cada uno. Estas<div>Los 's deben ser diseñados para que su posicionamiento sea absoluto, así:

<div id="baseImage" style="z-index:1; position: absolute;"></div>
<div id="stitchImage" style="z-index:2; position: absolute;"></div>
...

Probablemente también especificaría el ancho / alto de cada<div> para que coincida con sus imágenes.

Finalmente, usa jQuery para posicionar cada<div> en la parte superior de la imagen base.

$("#stitchImage").offset($("#baseImage").offset());

Luego, cuando necesite reemplazar las imágenes, simplemente use el código que tiene:

$("#stitchImage").html("<img src='" + src + "' />");

Tenga en cuenta que tendrá que usar una imagen de posición en blanco para que los usuarios puedan ver las capas inferiores cuando aún no hayan seleccionado capas superiores.

Gracias, que hizo el trabajo. Stefan Schneider
0

En lugar de usar:

$('#shirt').html(html);
('#pricefield').html(html);

utilizar el.append(...) método.

$('#shirt').append(html);
('#pricefield').append(html);

jQuery .append ()

ah ok, mal entendido tu pregunta CoryDorning
Eso culmina en:jsfiddle.net/CJ62j/1 - Que cuando se usa, no se ve bien. No pienses que esta es la intención. SpaceBison
Esto anexa las imágenes dentro de las secciones. Que no es la intención. Dentro de las secciones, las imágenes deben reemplazarse, pero las secciones deben agregarse una por una. Entonces, escoges el color del cuerpo de una camiseta, luego agregas un color de costura, etc. Stefan Schneider

Preguntas relacionadas