Foros del Web » Programando para Internet » Javascript »

Select que produzca imagen

 Estas en el tema de Select que produzca imagen en el foro de Javascript en Foros del Web. Buenas, Tengo este select: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original < form action = "javascript" >             < table ...
  #1 (permalink)  
Antiguo 05/07/2013, 12:51
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 12 años, 10 meses
Puntos: 5
Exclamación Select que produzca imagen
Buenas,

Tengo este select:

Código Javascript: 
Ver original
  1. <form action="javascript">
  2.             <table width="100%">
  3.             <tr><td>Choose a map</td>
  4.             <td>
  5.             <select name="map" id="mapvalue" onChange="$('mapframe').src = $('mapvalue').value;">
  6.             <option value=""></option>
  7.             <optgroup label="Satellite views">
  8.                 <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-B1_bw.jpg">Atlantic</option>
  9.                 <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-H_bw.jpg">North Atlantic</option>
  10.                 <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-G_bw.jpg">Europe / Asia</option>
  11.                 <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-C_bw.jpg">Europe / Africa</option>
  12.                 <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-E_bw.jpg">Indian Ocean</option>
  13.                 <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-A_bw.jpg">North / South America</option>
  14.                 <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-I_bw.jpg">North Pacific</option>
  15.                 <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-F_bw.jpg">South Pacific</option>
  16.                 <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-M_bw.jpg">Trans Atlantic</option>
  17.             </optgroup>
  18.             <optgroup label="TEMSI Maps">
  19.                 <option value="http://aviationweather.gov/data/iffdp/2106.gif">Asia / Oceania</option>
  20.                 <option value="http://aviationweather.gov/data/iffdp/2132.gif">Atlantic / North Pole</option>
  21.                 <option value="http://aviationweather.gov/data/iffdp/2130.gif">Atlantic (Europe/Africa/America)</option>
  22.                 <option value="http://aviationweather.gov/data/iffdp/2104.gif">Europe / Africa</option>
  23.                 <option value="http://aviationweather.gov/data/iffdp/2107.gif">Europe / Asia</option>
  24.                 <option value="http://aviationweather.gov/data/iffdp/2105.gif">Europe / Central Asia</option>
  25.                 <option value="http://aviationweather.gov/data/iffdp/2108.gif">Europe / North America</option>
  26.                 <option value="http://aviationweather.gov/data/iffdp/2101.gif">North America</option>
  27.                 <option value="http://aviationweather.gov/data/iffdp/2133.gif">North Pacific</option>
  28.                 <option value="http://aviationweather.gov/data/iffdp/2131.gif">Pacific</option>
  29.                 <option value="http://aviationweather.gov/data/iffdp/2109.gif">South Africa / Australia</option>
  30.                 <option value="http://aviationweather.gov/data/iffdp/2103.gif">South Atlantic</option>
  31.                 <option value="http://aviationweather.gov/data/iffdp/2134.gif">South Pacific</option>
  32.             </optgroup>
  33.             <optgroup label="Color TEMSI Maps">
  34.                                 <option value="http://ows-public.sembach.af.mil/gifImages/21OWS_EUROPE_ANALYSIS_METSAT_00_SFC_METSAT-ANALYSIS-7.gif">Europe Current</option>
  35.                 <option value="http://ows-public.sembach.af.mil/gifImages/21OWS_EUROPE_FITL_PROG-BRIEFING_24.gif">Europe Forecast 24h</option>
  36.                 <option value="http://ows-public.sembach.af.mil/gifImages/21OWS_EUROPE_FITL_PROG-BRIEFING_48.gif">Europe Forecast 48h</option>
  37.                 <option value="http://ows-public.sembach.af.mil/gifImages/21OWS_EUROPE_FITL_PROG-BRIEFING_72.gif">Europe Forecast 72h</option>
  38.                 <option value="http://ows-public.sembach.af.mil/gifImages/21OWS_EUROPE_FITL_PROG-BRIEFING_96.gif">Europe Forecast 96h</option>
  39.                 <option value="http://ows-public.sembach.af.mil/gifImages/21OWS_EUROPE_FITL_PROG-BRIEFING_120.gif">Europe Forecast 120h</option>
  40.                             </optgroup>
  41.             <optgroup label="WINTEM Maps">
  42.                 <option value="http://aviationweather.gov/data/iffdp/2315.gif">Americas - FL100</option>
  43.                 <option value="http://aviationweather.gov/data/iffdp/2311.gif">Americas - FL340</option>
  44.                 <option value="http://aviationweather.gov/data/iffdp/2415.gif">Africa / Americas - FL100</option>
  45.                 <option value="http://aviationweather.gov/data/iffdp/2411.gif">Africa / Americas - FL340</option>
  46.                 <option value="http://aviationweather.gov/data/iffdp/2737.gif">Asia - FL100</option>
  47.                 <option value="http://aviationweather.gov/data/iffdp/2733.gif">Asia - FL340</option>
  48.                 <option value="http://aviationweather.gov/data/iffdp/2797.gif">Asia / Oceania - FL100</option>
  49.                 <option value="http://aviationweather.gov/data/iffdp/2793.gif">Asia / Oceania - FL340</option>
  50.                 <option value="http://aviationweather.gov/data/iffdp/2917.gif">Europe / Africa - FL100</option>
  51.                 <option value="http://aviationweather.gov/data/iffdp/2913.gif">Europe / Africa - FL340</option>
  52.                 <option value="http://aviationweather.gov/data/iffdp/2857.gif">Europe / Africa / Asia - FL100</option>
  53.                 <option value="http://aviationweather.gov/data/iffdp/2853.gif">Europe / Africa / Asia - FL340</option>
  54.                 <option value="http://aviationweather.gov/data/iffdp/2517.gif">North America / Europe - FL100</option>
  55.                 <option value="http://aviationweather.gov/data/iffdp/2513.gif">North America / Europe - FL340</option>
  56.                 <option value="http://aviationweather.gov/data/iffdp/2255.gif">Pacific - FL100</option>
  57.                 <option value="http://aviationweather.gov/data/iffdp/2251.gif">Pacific - FL340</option>
  58.                 <option value="http://aviationweather.gov/data/iffdp/2200.gif">North Pacific - FL100</option>
  59.                 <option value="http://aviationweather.gov/data/iffdp/2196.gif">North Pacific - FL340</option>
  60.             </optgroup>
  61.             <optgroup label="CAT Forecast">
  62.                 <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN24a.GIF">Atlantic - 0h UTC</option>
  63.                 <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN6a.GIF">Atlantic - 6h UTC</option>
  64.                 <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN12a.GIF">Atlantic - 12h UTC</option>
  65.                 <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN18a.GIF">Atlantic - 18h UTC</option>
  66.                 <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN24.GIF">Pacific - 0h UTC</option>
  67.                 <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN6.GIF">Pacific - 6h UTC</option>
  68.                 <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN12.GIF">Pacific - 12h UTC</option>
  69.                 <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN18.GIF">Pacific - 18h UTC</option>
  70.                 <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN24p.GIF">Northern Hemisphere - 0h UTC</option>
  71.                 <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN6p.GIF">Northern Hemisphere - 6h UTC</option>
  72.                 <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN12p.GIF">Northern Hemisphere - 12h UTC</option>
  73.                 <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN18p.GIF">Northern Hemisphere - 18h UTC</option>
  74.             </optgroup>
  75.             </select>
  76.             </td></tr>
  77.             </table>
  78.         </form>
  79.  
  80.         <iframe src="" id="mapframe" width="100%" height="650" frameborder="0"></iframe>

Lo que quiero que haga es que cuando seleciones una opción se te cargue la imagen correspondiente. Yo esto antes lo hacia con prototypejs. De hecho si le añadís este script a esto os funcionará. Pero debido a una incompatibilidad tengo que cambiar.

Cómo podría hacer para que con otro librería si hiciese lo que quiero??
  #2 (permalink)  
Antiguo 05/07/2013, 18:56
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Select que produzca imagen
Hola:

¿Usas una librería para asignar un valor a un atributo?...

Seguro que si cambias "$" por el método que parece ser su "alias": document.getElementById...

Por cierto, los manipuladores de eventos se escriben en minúsculas (onchange)...

Aunque con un name en el iframe creo que sería mejor...

select onchange="document.frames[el_nombre_del_iframe].href = this.value"...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: funcion, js, select
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:19.