Image Select from 'dropdown'

Hi Bob and Max
Vs 4 is great!! Though this is hopefully a pretty basic solution that I am hoping you can just point out where my error is...
I wish to have a dropDown menu that selects a small thumbnail. With 'onChange' the thumbnail changes to match the selection.

The Javascript is:

<!--
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->

This I have put into the "load JS" tab/pane in the ACTIONS panel.

and the HTML is:

<tr>
<td width="50%"><form name="mygallery"><p>
<select name="picture" size="1" onChange="showimage()">
<option selected value="images/tmp_thmb/style1.jpg">Style No.1</option>
<option selected value="images/tmp_thmb/style2.jpg">Style No.2</option>
<option selected value="images/tmp_thmb/style3.jpg">Style No.3</option>
</select>
</p>
</form>
</td>
<td width="50%"><p align="center"><img src="images/tmp_thmb/style1.jpg" name="pictures" width="98" height="60"></td>
</tr>

This has gone into a "Custom Element" through the "Form Wizard" panel

A single image loads and the dropDown appears as it should; though the script is not being taken up.

Question: Can you see any errors... am I putting these elements into the right areas

TIA - Simon

Hi simong,

Here's a version that appears to work.
Form HTML (added ids and removed the JavaScript):

<?php
JHTML::_( 'behavior.mootools' );
?>
<table>
<tr>
  <td width="50%">
    <select name="picture" id="picture" size="1" >
      <option selected value="images/tmp_thmb/style1.jpg">Style No.1</option>
      <option selected value="images/tmp_thmb/style2.jpg">Style No.2</option>
      <option selected value="images/tmp_thmb/style3.jpg">Style No.3</option>
    </select>
  </td>
  <td width="50%"><p align="center">
    <img src="images/tmp_thmb/style1.jpg" name="pictures" id="pictures" width="98" height="60">
  </td>
</tr>
</table>

Javascript:

window.addEvent('domready', function() {
  $('picture').addEvent('change', showImage);
});
function showImage()
{
  $('pictures').src = $('picture').value;
}

Bob

Ahhh.. your amazing Bob

Worked a charm. Thanks... how many cases is that now???? 😀

HI Bob;
your solution seems doesn't works under Internet Explorer...how fix the problem?
Thanks so much
Regards
monak1983

Hi monak83,

Please post a link to the form so we can take a quick look.

Bob

Hi Bob,
now seems to works perfectly...😲
I don't know why.
Here my form:
http://www.crperformance.com/index.php?option=com_content&view=article&id=65:honda-cd-250-immagini-dx&catid=39:cross&Itemid=57

P.S. I have ask about copy a text from select to text box...can you help me?
SORRY for this OT😉

regards

monak1983

Hi Bob,
I have a problem: in my form I have used the VALUE to put a number that I need to do some calculus like here:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 195px;">Tipo</label>
    <select class="cf_inputbox validate-selection" id="select_2" size="1" title="Effettua una scelta!"  name="tipo" onChange="updatethis(this.form);displaydesc(document.poster.select_2, thetext1, 'textcontainer1')">
<option value="">Clicca per scegliere</option>
<option value="1">Manifesti 6x3</option>
<option value="2">Manifesti 4x2</option>
<option value="3">Manifesti 400x300</option>
<option value="4">Manifesti 140x200</option>
<option value="5">Manifesti 100x140</option>
<option value="6">Manifesti 70x100</option>
<option value="295">Manifesti 70x100 stampa offset 600pz</option>
<option value="415">Manifesti 70x100 stampa offset 1000pz</option>
<option value="495">Manifesti 70x100 stampa offset 1500pz</option>
<option value="7">Misure personalizzate</option>
    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Tipo :: Stampa a colori con inchiostri per esterni su carta da affissione 120gr</div>

I can't replace the value with the image path because if I do that I can't calculate some things.

Ho can I do to show the image for each option of my select?

Regars

monak1983

Hi monak83,

Then I think you need to add a data array so tha tyou can look up the image name from the number.

window.addEvent('domready', function() {
  $('picture').addEvent('change', showImage);
});
function showImage()
{
  var images = new Array();
  images[1] = 'some_image_1.jpg';
  images[2] = 'some_image_2.jpg';
  images[3] = 'some_image_3.jpg';
  images[4] = 'some_image_4.jpg';
  // . . .
  $('pictures').src = '/path/to/images/folder/'+images[$('picture').value];
}

Bob

Hi bob for the images I have another idea:
I have a SWITCH / CASE to set-up some variables from select like here:

var tipo1 = form.elements['tipo_nolavorazioni'].value;
switch (tipo1) {
   
   case "1":
    costo_tiponolav = 7.5;
    peso = 0.45;
	foto = 'cherry.jpg';
    break;
   
  case "2":
    costo_tiponolav = 10;
    peso = 0.45;
	foto = 'pears.jpg';
    break;
   
   case "3":
    costo_tiponolav = 10.8;
    peso = 0.5;
	foto = 'peas.jpg';
    break;
   
   case "4":
    costo_tiponolav = 13;
    peso = 0.5;
	foto = 'strawberry.jpg';
    break;

   case "5":
    costo_tiponolav = 21;
    peso = 0.68;
	foto = 'strawberry.jpg';
    break;
   
   case "6":
    costo_tiponolav = 21;
    peso = 0.45;
	foto = 'strawberry.jpg';
    break;
   
   case "7":
    costo_tiponolav = 10;
    peso = 0.45;
	foto = 'strawberry.jpg';
    break;
}

How can I make a js function to show images from variable "foto" without create an array like you have send to me?

Thanks so much.

HERE MY FORM:
http://www.sgagrafica.com/index.php?option=com_content&view=article&id=76&Itemid=119

I'm trying also using your ARRAY code but dosen't works.
Can you help me?
Thanks so much
Regards
monak83

Sorry Bib,
I found the solution and I used you array code.
It dosen't works because I took at name tag of the form and not at ID tag.
Thanks so much.
monak83

Hi Bob, the last thing:
How can I dosen't shown any image until I select an option in my dropdown?
Regards
monak83

Hi monak83,

I'd probably use JavaScript to set/hide the visibility of the image space.

Bob