www.webdeveloper.com
Results 1 to 10 of 10

Thread: Trying to adjust multiple borders on single image selection

  1. #1
    Join Date
    Aug 2012
    Posts
    6

    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';
    }}
    Thanks for the help.

  2. #2
    Join Date
    Aug 2012
    Posts
    6
    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.

  3. #3
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    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>
    Last edited by bionoid; 08-20-2012 at 05:20 PM.
    JavaScript: Learn | Validate | Compact | bionoid

  4. #4
    Join Date
    Aug 2012
    Posts
    6
    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.

  5. #5
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    A slight modification to the script then, showing images at 250ms increments and on their own lines:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Borders</title>
    
    		<style type="text/css">
    
    			IMG {vertical-align: top;}
    			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 = 0;
    
    				function imageSelection(id)
    				{
    					var i;
    					for (i = 0; i < images.length; ++i) {
    						images[i].className = (i === id) ? 'selected' : (i < id ? 'normal' : 'old');
    					}
    				}
    				function showImage()
    				{
    					var e;
    					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(document.createElement('div')).appendChild(e);
    					if (++i < images.length) {setTimeout(showImage, 250);}
    				}
    				setTimeout(showImage, 250);
    			}());
    
    		</script>
    
    	</body>
    </html>
    JavaScript: Learn | Validate | Compact | bionoid

  6. #6
    Join Date
    Aug 2012
    Posts
    6
    Hmmm, doesn't work for me. I'll play around with it.

  7. #7
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    The code works as is in the document around it, copy-pasting the code directly into your project might not work.
    JavaScript: Learn | Validate | Compact | bionoid

  8. #8
    Join Date
    Aug 2012
    Posts
    6
    Right, I'm trying to modify the code to flip the display order - i.e. the newest added image is on top, rather than on bottom. And I'm stuck.

  9. #9
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Borders</title>
    
    		<style type="text/css">
    
    			IMG {vertical-align: top;}
    			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;
    
    				function imageSelection(id)
    				{
    					var i;
    					for (i = 0; i < images.length; ++i) {
    						images[i].className = (i === id) ? 'selected' : (i < id ? 'old' : 'normal');
    					}
    				}
    				function showImage()
    				{
    					var e;
    					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(document.createElement('div')).appendChild(e);
    					if (i-- > 0) {setTimeout(showImage, 250);}
    				}
    				i = images.length - 1; setTimeout(showImage, 250);
    			}());
    
    		</script>
    
    	</body>
    </html>
    JavaScript: Learn | Validate | Compact | bionoid

  10. #10
    Join Date
    Aug 2012
    Posts
    6
    And I got it! Thank you very much for the help.

    Ooops. It seems you posted a solution too. Luckily our solutions agree so I feel pretty confident.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles