Hi all. Just need a bit of help with my js code. I want my script to display an image/s when a certain text is shown. For example in the following code, when the:
var imagesToBeShown;
var d = document.getElementById('selctx');
if (d.innerHTML == "Hex: #AD8D7E") imagesToBeShown = ['1.jpg', '2.jpg', '3.jpg'];
for (var i = 0; i < imagesToBeShown.length; i++) {
var img = document.createElement('img');
img.src = imagesToBeShown[i];
img.alt = imagesToBeShown[i];
d.parentNode.insertBefore(img, d.nextSibling);
}
You will want to keep track of the currently showing images in an array, or put them all in a container, so you can remove them easily.
I have a pretty good idea of what you are trying to do. You want to dynamically show a dynamic amount of images, depending on the contents of a DOM element.
Hey venegal. Yeah the code you game me is great. Just testing it out now. Where will i need to host the image files (i.e '1.jpg', '2.jpg', '3.jpg') would it be possible to display the images in small seperate window?
The way the code is right now, those images will be looked for in the same folder in which your html resides. Of couse you can put them in a subfolder and use img.src = "subfolderName/" + pics[i]; .
The code I gave you shows the images by manipulating the DOM. If you want the images to show in a seperate window, it's a much better idea to use a server side language, i.e. send a request containing the hex code to, say, PHP, and let it knit together a new page containing the appropriate images.
It's only example code, mind you. You will have to initialize imagesToBeShown to some standard value to account for the fact that d.innerHTML might not match any of your conditions. And I forgot to change a variable when renaming them to more descriptive ones.
This should give you a working example:
Code:
var imagesToBeShown = [];
var d = document.getElementById('selctx');
function mo(ref) {
a = document.getElementById('disp');
c = document.getElementById('disptx');
a.style.backgroundColor = ref.style.backgroundColor;
c.innerHTML = "Hex: " + ref.innerHTML; // + " " + ref.style.backgroundColor;
}
function cl(ref) {
b = document.getElementById('selc');
d = document.getElementById('selctx');
b.style.backgroundColor = ref.style.backgroundColor;
d.innerHTML = "Hex: " + ref.innerHTML; // + " " + ref.style.backgroundColor;
}
if (d.innerHTML == "Hex: #AD8D7E") imagesToBeShown = ['1.jpg', '2.jpg', '3.jpg'];
for (var i = 0; i < imagesToBeShown.length; i++) {
var img = document.createElement('img');
img.src = imagesToBeShown[i];
img.alt = imagesToBeShown[i];
d.parentNode.insertBefore(img, d.nextSibling);
}
If you decide to do it with DOM manipulation, you will of course have to style those new image via CSS. And if you want to make the whole thing dynamic (no new page requests), you will have to add some code for removing those images before adding the new ones.
Im using php to script my code. The idea in the long run when i figure out how to get the image showing next to "Hex: #AD8D7E" (eg) is to use mysql database which contains 1000s of ranges of carpets. i have added a "hexcode" field in the database and will hope to do a lookup of the database to find the required fielddata and then in turn the image. :/
It's only example code, mind you. You will have to initialize imagesToBeShown to some standard value to account for the fact that d.innerHTML might not match any of your conditions.
I see. If you don't want to reload the page after the user selects a color, you will have to use ajax, let PHP return the appropriate images (preferably using JSON) and use the DOM manipulation stuff above in order to show them.
If page reloading is not a problem for you, you can just let PHP echo out those images in the appropriate place.
Do you already have an idea how to populate that hexcode database field? It's probably not a trivial task to calculate the average/dominating/[looks similar to the human eye] color of each carpet, and the right color offset tolerance.
If the standard image to be shown if no matches occurred is named 'noImagesFound.jpg', you just put var imagesToBeShown = ['noImagesFound.jpg']; up there, which will be overwritten later on in the conditions, should there have been a color match.
Can you explain JSON to me please? Haven't used that before.
Basically i'm going to update the hexcode database manually (guessing will have to use an array somehow to store numerous codes?) not to sure about the colour offset as of yet... thats the last task to work on i hope!
Sure. JSON is just Javascript object literals put in strings. That makes it very easy to work with, because all you have to do is eval it in order get back the underlying object.
will give you a string containing ["1.jpg","2.jpg","3.jpg"].
In Javascript, after using some ajaxy stuff in order to get that string into var jsonString, you just use
Code:
var imagesToBeShown = eval('(' + jsonString + ')');
and, voilà, you converted your PHP array into a Javascript one.
(Of course you should only use the eval notation when the source is trusted, which is the case here.)
As for the manually updating the hexcode database, how exactly are you planning on converting a carpet into a single hexcode (or several, for that matter)?
Super, ill try to get my head around that and impliment it into the code somehow
Regarding the hexcode database, im planning on manually entering the hexcode returned from palatte generator into the hexcode field for each individual carpet. I then want the js to lookup the database and try to find the 3 closest matches to the d.innerHTML = "Hex: " + ref.innerHTML;
Before you post, read our: 
