CODEWITHSUNDEEP
javascriptjquerycssimageselect
user3393314
user3393314

Reputation: 43

Change image based on dropdown using javascript.

I am a beginer in javascript and I want to change an image based upon options in my dropdown (select) I find this tutorial, but I am having some problems.

In this tutorial they replace iljbild by the name of the picture files you are going to use if you want to use the code as it is the names of the picture files have got to be of the same type as in the example, ie the only thing telling the files apart should be a number, e g pict0.gif, pict2.gif etc. if you are using jpg images you will have to replace gif by jpg. set the WIDTH and the HEIGHT of the images if you change the (length of the) words in the selection list you will also have to change the number after charAt (here it is 8)

it's what i did by replacing iljbid by: http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg but it doesn't work.

Upvotes: 3

Views: 27661

Answers (3)

SparoHawk
SparoHawk

Reputation: 557

The tutorial expect you to have a list of images with a named convention. That is {prefix}{number}.{extension}. For exmaple: image0.jpg image1.jpg image2.jpg and so on...

The prefix on all images must be the same, and the extension on all images must be the same. This is a simple tutorial to get the effect done.

It can be expanded once you have more JavaScript knowledge.

Also, that tutorial is really bad (don't mean to disrespect, but it is really lacking. Copying and pasting the example itself into JSFiddle throws errors everywhere).

The tutorial is from 1998. That is 16 years old. I strongly suggest you to look for newer tutorials. (2010+)

Here is an example replica of the tutorial that works: http://jsfiddle.net/VmWD9/

HTML

<img src="http://www.flowsim.se/picts/selec01.jpg" width="70" height="70" name="myImage" />
<form method="" action="" name="myForm">
    <select size="8" name="switch" onchange="switchImage();">
        <option value="1">Image 1</option>
        <option value="2">Image 2</option>
        <option value="3">Image 3</option>
        <option value="4">Image 4</option>
        <option value="5">Image 5</option>
        <option value="6">Image 6</option>
        <option value="7">Image 7</option>
    </select>
</form>

JavaScript

// This is the code to preload the images
var imageList = Array();
for (var i = 1; i <= 7; i++) {
    imageList[i] = new Image(70, 70);
    imageList[i].src = "http://www.flowsim.se/picts/selec0" + i + ".jpg";
}

function switchImage() {
    var selectedImage = document.myForm.switch.options[document.myForm.switch.selectedIndex].value;
    document.myImage.src = imageList[selectedImage].src;
}

Though nowadays people use JavaScript libraries such as jQuery or MooTools to acomplish things like that. I do find that it is better to first explore things in pure JS before heading into these libraries, though it is not a necessity. Most of these libraries are easy to grasp, but when you want to make something big you might need to have prior JS knowledge.

I recommend that you go through the Codecademy JavaScript tutorial.

Upvotes: 5

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

Here try this FIDDLE

<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
    <option value="1" selected>Picute 1</option>
    <option value="2">Picute 2</option>
    <option value="3">Picute 3</option>
    <option value="4">Picute 4</option>
    <option value="5">Picute 5</option>
</select>

var pictureList = [
    "http://lorempixel.com/400/200/sports/1",
    "http://lorempixel.com/400/200/sports/2",
    "http://lorempixel.com/400/200/sports/3",
    "http://lorempixel.com/400/200/sports/4",
    "http://lorempixel.com/400/200/sports/5", ];

$('#picDD').change(function () {
    var val = parseInt($('#picDD').val());
    $('img').attr("src",pictureList[val]);
});

Upvotes: 4

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

There are multiple ways to achieve the desired.

This one is by getting the Number value after the select change event and get that src out of the imagesArray Array key.

<select id="changeImage">
  <option value="0">image 0</option>
  <option value="1">image 1</option>
  <option value="2">image 2</option>
</select>
<img id="image" src='//placehold.it/50x50/cf5'>


var imagesArray = [
  "//placehold.it/50x50/cf5", // represents val 0,
  "//placehold.it/50x50/f1f", // 1,
  "//placehold.it/50x50/444"  // 2 ...
];

$('#changeImage').change(function(){
  $('#image')[0].src = imagesArray[this.value];
});

The other one is to have image names inside the option text:

<select id="changeImage">
  <option>image.jpg</option>
  <option>something.png</option>
  <option>nature.jpg</option>
</select>
<img id="image" src='image.jpg'>


$('#changeImage').change(function(){
  $('#image')[0].src = this.value;
});

Upvotes: 2

Related Questions