Foros del Web » Creando para Internet » HTML »

PRoblema

Estas en el tema de PRoblema en el foro de HTML en Foros del Web. Bueno quiciera saber si me podian ayudar a hacer algo q tenia pensado vera mi idea es colocar un selec y pues q aparescan varias ...
  #1 (permalink)  
Antiguo 22/03/2011, 22:20
 
Fecha de Ingreso: marzo-2011
Mensajes: 120
Antigüedad: 6 años, 8 meses
Puntos: 3
PRoblema

Bueno quiciera saber si me podian ayudar a hacer algo q tenia pensado vera mi idea es colocar un selec y pues q aparescan varias opciones (1,2,3) y q existan 3 imagenes estas tres imagenes estarian en un div o x el caso es q lo q sta en ese div (la imagen) cambiaria dependiendo del selec q yo kiera si el selec coloco <option>1</option> pues en mi div saldria la imagen 1 alguna idea? mi idea era cambiar la promiedad src es decir la url de la imagen del tag img nc q otra tienen?
  #2 (permalink)  
Antiguo 22/03/2011, 22:37
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: PRoblema

pues tu idea anda muy acertada utiliza en javascript el evento onchange dentro del select y has que cambie el src y alt de la imagen con la condicional if
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 22/03/2011, 22:41
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 7 años, 6 meses
Puntos: 63
Respuesta: PRoblema

es un script bastante sencillo, es algo como esto:

Código HTML:
Ver original
  1. <select id="select" onchange="prueba()">
  2. <option value="0">flor</option>
  3. <option value="1">mi casa</option>
  4. <option value="2">mi finca</option>
  5. <div>
  6. <img src="images.jpg" id="target" />
  7. </div>

Código Javascript:
Ver original
  1. function prueba() {
  2.     var sel = document.getElementById("select").selectedIndex;
  3.     if(sel == 0) {
  4.         document.getElementById("target").src = "images.jpg";
  5.     }
  6.     if(sel == 1) {
  7.         document.getElementById("target").src = "images2.jpg";
  8.     }
  9.     if(sel == 2) {
  10.         document.getElementById("target").src = "images3.jpg";
  11.     }
  12. }
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #4 (permalink)  
Antiguo 22/03/2011, 22:55
 
Fecha de Ingreso: marzo-2011
Mensajes: 120
Antigüedad: 6 años, 8 meses
Puntos: 3
Respuesta: PRoblema

Mmmmm ok bueno es lo q mas o mens me imaginaba hacer pero keria ver si habia algo mas sencillo gracias gente :D
  #5 (permalink)  
Antiguo 23/03/2011, 17:40
 
Fecha de Ingreso: marzo-2011
Mensajes: 120
Antigüedad: 6 años, 8 meses
Puntos: 3
Respuesta: PRoblema

Buenas de nuevo saben q quiero hacerlo pero el tag img esta dentro de una imagen y son varios tag sin embago pues no logro ejecutar pondre el codigo a ver si me pueden ayudar

Código:
FUNCION JAVA SCRIPT

  function cambio() {
    var diente = document.getElementById("diente").selectedIndex;
	var xdo = document.getElementById("xdo").selectedIndex;
	//var hecho = document.getElementById("hecho").selectedIndex;
    
	if(xdo == 1) {
        document.getElementById(diente).src = "1.png";
    }
    if(xdo == 2) {
        document.getElementById(diente).src = "2.png";
		
    }
    if(xdo == 3) {
        document.getElementById(diente).src = "3.png";
		
    }
}

y esta es la tabla con que estoy trabajando a ver si me pueden ayudar :D

<table width="936" height="552" border="1" align="center">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><div id="cambios2">
<p>Diente
<select name="diente" id="diente">
<option value="0">Eliga una Opcion</option>
<option value="18">18</option>
<option value="17">17</option>
<option value="16">16</option>
<option value="15">15</option>
<option value="14">14</option>
<option value="13">13</option>
<option value="12">12</option>
<option value="11">11</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="48">48</option>
<option value="47">47</option>
<option value="46">46</option>
<option value="45">45</option>
<option value="44">44</option>
<option value="43">43</option>
<option value="42">42</option>
<option value="41">41</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
</select>
Efecto: Por hacer
<label for="efecto"></label>
<select name="xdo" id="xdo" onchange="cambio() ">
<option value="0" selected="selected">Eliga una Opcion</option>
<option value="1" >Corona</option>
<option value="2">Tratamiento Conducto</option>
<option value="3">Diente Reparado con defecto</option>
</select>
Hecho
<label for="hecho"></label>
<select name="hecho" id="hecho">
<option value="0">Eliga una Opcion</option>
<option value="1">Corona</option>
<option value="2">Tratamiento Conducto</option>
<option value="3">Por Sacar</option>
</select>
<input type="submit" value="Aceptar" onclick="cambio() " />
</p>
</div>
<table width="906" height="173" border="0">
<tr>
<td><table width="200" border="0">
<tr>
<td><label>18</label><br /><div><img src="#" id="18" height="35" width="50"/></div></td>
<td><label>17</label><br /><div><img src="#" id="17" height="35" width="50"/></div></td>
<td><label>16</label><br /><div><img src="#" id="16" height="35" width="50"/></div></td>
<td><label>15</label><br /><div><img src="#" id="15" height="35" width="50"/></div></td>
<td><label>14</label><br /><div><img src="#" id="14" height="35" width="50"/></div></td>
<td><label>13</label><br /><div><img src="#" id="13" height="35" width="50"/></div></td>
<td><label>12</label><br /><div><img src="#" id="12" height="35" width="50"/></div></td>
<td><label>11</label><br /><div><img src="#" id="11" height="35" width="50"/></div></td>
</tr>
</table></td>
<td><table width="200" border="0">
<tr>
<td><label>21</label><br /><div><img src="#" id="21" height="35" width="50"/></div></td>
<td><label>22</label><br /><div><img src="#" id="22" height="35" width="50"/></div></td>
<td><label>23</label><br /><div><img src="#" id="23" height="35" width="50"/></div></td>
<td><label>24</label><br /><div><img src="#" id="24" height="35" width="50"/></div></td>
<td><label>25</label><br /><div><img src="#" id="25" height="35" width="50"/></div></td>
<td><label>26</label><br /><div><img src="#" id="26" height="35" width="50"/></div></td>
<td><label>27</label><br /><div><img src="#" id="27" height="35" width="50"/></div></td>
<td><label>28</label><br /><div><img src="#" id="28" height="35" width="50"/></div></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="200" border="0">
<tr>
<td><label>48</label><br /><div><img src="#" id="48" height="35" width="50"/></div></td>
<td><label>47</label><div><img src="#" id="47" height="35" width="50"/></div></td>
<td><label>46</label><div><img src="#" id="46" height="35" width="50"/></div></td>
<td><label>45</label><div><img src="#" id="45" height="35" width="50"/></div></td>
<td><label>44</label><div><img src="#" id="44" height="35" width="50"/></div></td>
<td><label>43</label><div><img src="#" id="43" height="35" width="50"/></div></td>
<td><label>42</label><div><img src="#" id="42" height="35" width="50"/></div></td>
<td><label>41</label><div><img src="#" id="41" height="35" width="50"/></div></td>
</tr>
</table></td>
<td><table width="200" border="0">
<tr>
<td><label>31</label><br /><div><img src="#" id="31" height="35" width="50"/></div></td>
<td><label>32</label><div><img src="#" id="32" height="35" width="50"/></div></td>
<td><label>33</label><div><img src="#" id="33" height="35" width="50"/></div></td>
<td><label>34</label><div><img src="#" id="34"height="35" width="50"/></div></td>
<td><label>35</label><div><img src="#" id="35" height="35" width="50"/></div></td>
<td><label>36</label><div><img src="#" id="36"height="35" width="50"/></div></td>
<td><label>37</label><div><img src="#" id="37"height="35" width="50"/></div></td>
<td><label>38</label><div><img src="#" id="38" height="35" width="50"/></div></td>
</tr>
</table></td>
</tr>
</table>
<p></p></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
  #6 (permalink)  
Antiguo 23/03/2011, 17:49
 
Fecha de Ingreso: marzo-2011
Mensajes: 120
Antigüedad: 6 años, 8 meses
Puntos: 3
Respuesta: PRoblema

ya resolvi al parecer no estaba tomando el valor verdader del select diente ya lo coji y funciona a la perfeccion :D cualkier

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:21.