Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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 .
-
Hola, lo muevo a un nuevo tema para crear una nueva conversación independiente. Saludos.
-
Ok, perdón y gracias de nuevo, pero la gente no sabrá de donde viene el tema. ¿no?
-
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 ::)
-
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,
<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é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>
-
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. ;)
-
Se queda la pagina en blanco, pero funciona bien si elimino la siguiente linea:
//if (radios[i].name = "search_query1") {...}
Ahora al intentar que funcione para las 3 imagenes no lo consigo, he probado lo siguiente:
<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:
anadirImgSQ1()&&anadirImgSQ2()&&anadirImgSQ3();}
por:
anadirImgSQ1();
anadirImgSQ2();
anadirImgSQ3();}
Gracias Cesar ;)