Trying to adjust multiple borders on single image selection
As the title says, I'm trying to specifically adjust the borders of every image in a single div tag when one of them is selected.
If that div tag currently has 4 images [A B C D], for example, and the second to the last image[C] is selected, I want to turn C to class 'selected', D to class 'old' and leave A/B alone ('normal').
I add the images to the div tag with the following:
Code:
var oldHTML=document.getElementById('leftcolumn').innerHTML;
var newHTML=' <img ID="image"+imageNumber class="normal" src="http://image.jpg" onclick="imageSelection(2);return true;" > <br>' + oldHTML;
document.getElementById("leftcolumn").innerHTML=newHTML;
This adds every image sequentially to the div tag as I desire, but I can't seem to access them however I try. I've tried putting them all into an array and tried using .border, tried putting their IDs into array and using getElementByID, but nothing seems to do the job.
For example, this code makes my first image have an id tag of "image1". I don't see why the following wouldn't work:
Code:
function imageSelection(imageNum) {
document.getElementById("image"+imageNum).className='selected';
}
for(i=imageNum;i>=0;i--){
document.getElementById("image"+imageNum).className='old';
}}
To clarify (it seems I cannot edit), all I care about is adding a series of images from http links and adjusting the borders appropriately when one is clicked. I'm not attached to my method of adding images or any particular method for adjusting their borders.
You will have to excuse me if I didn't get it quite right, D being old when C is selected is a little confusing (was it because D was previously selected?):
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Borders</title>
<style type="text/css">
IMG.normal {border: 2px dashed green;}
IMG.selected {border: 2px solid red;}
IMG.old {border: 2px dashed silver;}
</style>
</head>
<body>
<div id="leftcolumn"></div>
<script type="text/javascript">
(function()
{
var
base = document.getElementById('leftcolumn'),
images = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg'
], i, e;
function imageSelection(id)
{
var i;
for (i = 0; i < images.length; ++i) {
images[i].className = (i === id) ? 'selected' : (i < id ? 'normal' : 'old');
}
}
for (i = 0; i < images.length; ++i) {
e = document.createElement('img');
e.src = images[i];
e.onclick = (function(id){return function(){imageSelection(id);};}(i));
images[i] = e;
base.appendChild(e);
}
imageSelection(-1);
}());
</script>
</body>
</html>
It almost did what I wanted, and using your code allowed me to figure out how to do what I wanted, so thank you very much.
When I use the following code, it breaks the image selection functionality:
Code:
var newHTML=base.innerHTML + '<br>';
base.innerHTML=newHTML;
In total, I'm trying to add a time delay before each image appears and a line break so that each image is on its own line while keeping everything else. I had the other tasks figured out, but now my code doesn't cooperate with the new code added in.
Code:
var imageInterval = setInterval('inputImages()', 250);
function inputImages(){
if (i > -1){
++imageNumber;
e = document.createElement('img');
e.src = images[i];
e.onclick = (function(id){return function(){imageSelection(id);};}(i));
e.className = 'normal';
images[i] = e;
base.appendChild(e);
var newHTML=base.innerHTML + '<br>';
base.innerHTML=newHTML;
--i;
}
}
Removing the line break and switching it from an interval to a for loop does exactly what I want so far, but I need a time delay and for the images to each have their own line. Thanks again for the help.
Reply With Quote
Bookmarks