Autor Tema: cambiar imágenes al pulsar botón radio con javascript (Leído 12616 veces)

lynxstyle · « **en:** 29 de Diciembre 2013, 11:56 »

Perdonar por mi abuso, estoy intentando rizar el rizo, quiero colocar al lado unas imágenes pero que cambien al seleccionar un radio, estas imagenes formarian el cuerpo de una mujer y lo dividiria en 2 partes, cabeza (por el cabello) y silueta, la silueta es la parte que me lo complica, ya que combinarian tanto la silueta en si como el estilo de ropa, una mujer puede tener curvas y llevar ropa atrevida o llevar ropa elegante, o puede ser de cuerpo atletico y llevar ropa atrevida o llevar ropa elegante, por lo que realmente usaría 6 imagenes, 2 para la cabeza y 4 para la silueta.

Gracias de antemano .

Alex Rodríguez · « **Respuesta #1 en:** 30 de Diciembre 2013, 09:19 »

Hola, lo muevo a un nuevo tema para crear una nueva conversación independiente. Saludos.

lynxstyle · « **Respuesta #2 en:** 30 de Diciembre 2013, 19:36 »

Ok, perdón y gracias de nuevo, pero la gente no sabrá de donde viene el tema. ¿no?

Alex Rodríguez · « **Respuesta #3 en:** 30 de Diciembre 2013, 22:42 »

Podría ser pero la idea es que cada tema lleve un título que permita identificarlo bien y en este caso estaríamos tratando dos problemas, por un lado el cambiar el contenido de un input tipo text de un formulario al cambiar la selección de radio buttons, y por otro el cambiar una imagen al cambiar la selección de radio buttons. De todas formas también habría tenido lógica dejarlo junto como dices

César Krall · « **Respuesta #4 en:** 02 de Enero 2014, 10:15 »

Creo que este código resuelve el cambio de imágenes. No está hecho con distintas imágenes sino solo con una que va cambiando según la selección, pero aquí está la idea, con esta idea se puede completar el tener varias imágenes y cambiarlas según la selección. Saludos,

Código: [Seleccionar]

<html>
<head>
    <script type="text/javascript">
	
		function anadir(obj) {
			anadir1(obj);
			if (obj.name =='search_query1'){
			anadirImgSQ1();}						
		}
	
        function anadir1(obj) {		
			var radios = document.getElementsByTagName('input');
			var value;
			obj.form.search_query.value = "";
			for (var i = 0; i < radios.length; i++) {
				if (radios[i].type === 'radio' && radios[i].checked) {
				//if (radios[i].name = "search_query1") {...}
				value = radios[i].value;  
				obj.form.search_query.value = obj.form.search_query.value + value;							
				}
			}						
		}
					
		function anadirImgSQ1(){
			var radio = document.getElementsByName('search_query1');
			var colorPelo = document.getElementById('colorPelo');  
			if (radio[0].checked){
				colorPelo.src = "http://ritsi.org/wp-content/uploads/2013/03/luis_cabeza_honorifico.jpg";
			}
			if (radio[1].checked){
			colorPelo.src = "http://entimg.msn.com/i/150/Movies/Actors4/brigged0194557_150x200.jpg";
			}
		}
</script>
</head>

    <div id="search_block_left" class="block exclusive">
        <form name="formulario" method="post" action="{$link->getPageLink('search', true)}" id="searchbox">
            <p class="block_content">
                <label for="search_query_block">{l s='Enter a product name or description.' mod='blocksearch'}</label>
                <input type="hidden" name="orderby" value="position" />
                <input type="hidden" name="controller" value="search" />
                <input type="hidden" name="orderway" value="desc" />      
                <!-- Selectores Personal Shoppers -->  
                <div>
                <input type="radio" name="search_query1" value="moreno " onchange="anadir(this)"  />Moreno
                <input type="radio" name="search_query1" value="Rubio " onchange="anadir(this)" />Rubio
                </div>
                <div>
                <input type="radio" name="search_query2" value="con curvas " onchange="anadir(this)"/>con Curvas
                <input type="radio" name="search_query2" value="atletica " onchange="anadir(this)" />Atl&eacute;tica
                </div>
                <div>
                <input type="radio" name="search_query3" value="atrevida " onchange="anadir(this)" />Atrevida
                <input type="radio" name="search_query3" value="elegante " onchange="anadir(this)" />Elegante
                </div>            
                <input class="search_query" type="text" id="search_query_block" name="search_query" value="" />
                <input type="submit" id="search_button" class="button_mini" value="{l s='Go!' mod='blocksearch'}" />
            </p>
        </form>
    </div>
 <img name="colorPelo" id="colorPelo" src="http://images.luisaviaroma.com/small58I/B0E/010_99a6f5e4-33f3-4afd-9681-19acc7f7c2d6.JPG" >	
</html>

lynxstyle · « **Respuesta #5 en:** 06 de Enero 2014, 23:41 »

Sorry con estos de las fiestas y que me he tragado todos los festivos trabajando no habia prestado atención, voy a probar el código, ahora te cuento.

lynxstyle · « **Respuesta #6 en:** 07 de Enero 2014, 13:46 »

Se queda la pagina en blanco, pero funciona bien si elimino la siguiente linea:

Código: [Seleccionar]

//if (radios[i].name = "search_query1") {...}
Ahora al intentar que funcione para las 3 imagenes no lo consigo, he probado lo siguiente:

Código: [Seleccionar]

<script type="text/javascript">
	function anadir(obj) {
			anadir1(obj);
			if (obj.name =='search_query1'||'search_query2'||'search_query2'){
			anadirImgSQ1()&&anadirImgSQ2()&&anadirImgSQ3();}									
		}
	
	function anadir1(obj) {		
			var radios = document.getElementsByTagName('input');
			var value;
			obj.form.search_query.value = "";
			for (var i = 0; i < radios.length; i++) {
				if (radios[i].type === 'radio' && radios[i].checked) {
				value = radios[i].value;  
				obj.form.search_query.value = obj.form.search_query.value + value;							
				}
			}						
		}
	function anadirImgSQ1(){
			var radio = document.getElementsByName('search_query1');
			var colorPelo = document.getElementById('colorPelo');  
			if (radio[0].checked){
				colorPelo.src = "http://ritsi.org/wp-content/uploads/2013/03/luis_cabeza_honorifico.jpg";
			}
			if (radio[1].checked){
			colorPelo.src = "http://entimg.msn.com/i/150/Movies/Actors4/brigged0194557_150x200.jpg";
			}
		}
	
	function anadirImgSQ2(){
			var radio = document.getElementsByName('search_query2');
			var siluetaCuerpo = document.getElementById('siluetaCuerpo');  
			if (radio[0].checked){
				siluetaCuerpo.src = "http://ritsi.org/wp-content/uploads/2013/03/luis_cabeza_honorifico.jpg";
			}
			if (radio[1].checked){
			siluetaCuerpo.src = "http://entimg.msn.com/i/150/Movies/Actors4/brigged0194557_150x200.jpg";
			}
		}
	
	function anadirImgSQ3(){
			var radio = document.getElementsByName('search_query3');
			var estiloRopa = document.getElementById('estiloRopa');  
			if (radio[0].checked){
				estiloRopa.src = "http://ritsi.org/wp-content/uploads/2013/03/luis_cabeza_honorifico.jpg";
			}
			if (radio[1].checked){
			estiloRopa.src = "http://entimg.msn.com/i/150/Movies/Actors4/brigged0194557_150x200.jpg";
			}
		}
</script>

La primera imagen se cambia pero las otras dos no, en el htm está sus respectivos name e id

PD: Y conseguí que funcione, corrigiendo la siguiente linea:

Código: [Seleccionar]

anadirImgSQ1()&&anadirImgSQ2()&&anadirImgSQ3();}
por:

Código: [Seleccionar]

anadirImgSQ1();
anadirImgSQ2();
anadirImgSQ3();}

Gracias Cesar

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: cambiar imágenes al pulsar botón radio con javascript (Leído 12616 veces)

lynxstyle

cambiar imágenes al pulsar botón radio con javascript

Alex Rodríguez

Re:cambiar imágenes al pulsar botón radio con javascript

lynxstyle

Re:cambiar imágenes al pulsar botón radio con javascript

Alex Rodríguez

Re:cambiar imágenes al pulsar botón radio con javascript

César Krall

Re:cambiar imágenes al pulsar botón radio con javascript

lynxstyle

Re:cambiar imágenes al pulsar botón radio con javascript

lynxstyle

Re:cambiar imágenes al pulsar botón radio con javascript

Preguntas y respuestas