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: .jpg but it doesn't work.
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/wikipedia/mons/1/1e/Stonehenge.jpg but it doesn't work.
Share Improve this question edited Mar 7, 2014 at 15:59 Lokesh Suthar 3,2021 gold badge17 silver badges28 bronze badges asked Mar 7, 2014 at 15:49 user3393314user3393314 431 gold badge1 silver badge3 bronze badges 3- 1 Please show us some code... – Alex Commented Mar 7, 2014 at 15:51
- 1 Hello, this is very easy to do with Javascript, but you must put some code for us to help you... And, by the way, you put jquery as a Tag, but in the example there's no jquery at all... it's just plain Javascript – Cesar Vasquez Ibaceta Commented Mar 7, 2014 at 15:52
- the site you're reading this tricks is really poor. There are amazing resources on how to achieve the desired. Guess one. Exactly, StackOverflow – Roko C. Buljan Commented Mar 7, 2014 at 16:06
3 Answers
Reset to default 5The 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/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 aplish 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 remend that you go through the Codecademy JavaScript tutorial.
Here try this FIDDLE
<img src="http://lorempixel./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./400/200/sports/1",
"http://lorempixel./400/200/sports/2",
"http://lorempixel./400/200/sports/3",
"http://lorempixel./400/200/sports/4",
"http://lorempixel./400/200/sports/5", ];
$('#picDD').change(function () {
var val = parseInt($('#picDD').val());
$('img').attr("src",pictureList[val]);
});
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;
});