www.webdeveloper.com
Results 1 to 8 of 8

Thread: Interaction between "select" tag and "canvas" / "div" tag

Hybrid View

  1. #1
    Join Date
    Mar 2013
    Posts
    5

    Interaction between "select" tag and "canvas" / "div" tag

    I'm am attempting to build a drop down list, that when you select your option from the drop down list, it display's several images on the canvas, or perhaps in a div, that can then be drag/drop activated. And moved to a seperate div/canvas. I've been searching online, and attempting to write myself, and the best I have come up with is a drop down menu that shows images in the drop down list. This isn't what im after.

    So a drop down of lets say, various animal types, Dogs/Cats/Frogs
    and when you select Dogs from the list, it then adds several images of dogs inside a div or canvas that can then be interacted with. The dog images should be drag/drop able. and when you hover over the dogs, it should reveal information about them. (dog breed / what part of the world its from / life expectancy). I don't want the page to have to click thru to get this effect, but be instant, (so when you select dogs, it instantly fills in the desired area with dog images)

    Thanks in advance for any assistance.
    ~Ntr0pi

  2. #2
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    What you are asking for is way over the top considering you have not put anything on the table yet.

    Furthermore: what you are asking is not all that difficult but not what I plan to do in the near future.

    I will give you a leg up with the select box but it will be up to you do pull yourself up to a higher level of knowledge.

    this is a rough and ready version just to get you started

    The html

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>xxx</title>
    <script src="dropDown.js"></script>
    </head>
    <body>
    <select id="opt">
        <option value="0">Select</option>
    	<option value="1">cow</option>
    	<option value="2">cat</option>
    	<option value="3">bird</option>
    </select>
    <hr >
    <div id="here"></div>
    </body>
    </html>
    the javascript file to be named *dropDown.js* or change the html file to suit

    Code:
    var fancyStuff = (function () {
    	var selected, arrAnimal, imageNew, divHere;
    	function downEm() {
    	    var animal, imgSrc, cnt;
    		divHere.innerHTML = '';
    		animal = selected.value;
    		cnt = 0;
    		while (cnt < 2) {
    		    imgSrc = arrAnimal[animal - 1][cnt];
    		    imageNew = new Image();
    		    imageNew.src = imgSrc;
    			imageNew.width = 100;
    			imageNew.height = 100;
    			imageNew.alt = 'done';
    		    imageNew.onload = divHere.appendChild(imageNew);
    			cnt += 1;
    		}
    	}
    	function init() {
    	    selected = document.getElementById('opt');
    		selected.addEventListener('change', downEm, false);
    		arrAnimal = [['http://www.freephotos.se/images/photos_small/black-and-white-cow-1.jpg',
    		          'http://www.freephotos.se/images/photos_small/black-and-white-cow-3.jpg'],
    				  ['http://www.freephotos.se/images/photos_small/cat-1.jpg',
    		          'http://www.freephotos.se/images/photos_small/kitten-1.jpg'],
    				  ['http://www.freephotos.se/images/photos_small/swimming-mallard-1.jpg',
    		           'http://www.freephotos.se/images/photos_small/flying-seagull-close-up-1.jpg']
    				  ];
    	    //http://www.freephotos.se
    		divHere = document.getElementById('here');
    	}
    	return {
    	    start: init
    	};
    }());
    window.onload = function () {
    	fancyStuff.start();
    };

  3. #3
    Join Date
    Mar 2013
    Posts
    5
    I was using a modified version of the code I found on this page, its the fourth one down I had been working with, but same problem applying the title attribute.

    http://stackoverflow.com/questions/2...-option-change

  4. #4
    Join Date
    Mar 2013
    Posts
    5
    Wow, thanks, that's pretty close to what I'm after, after I posted this request last night I looked around and got something to kinda work, but not like this. Thanks for the leg up I've already started expanding it and swapping the image url's to suit my needs. I was using title attribute on the image tags to give my image's a hover effect (to show extra data about the images) when i change the image src on the arrAnimal, i assume i can point them at a folder and my own .png images, my question is, can the title attribute be applied to them in the javascript this way?

    To use what you've provided as an example, when you hovered over the first cow, it would say some things about it, but the hover over the second cow would be unique to that image as well.

    Anyways, thanks for your help, I used to write code more, but I got out of the habit and working to fix that.

  5. #5
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    Quote Originally Posted by Ntr0pi View Post
    .......
    my question is, can the title attribute be applied to them
    ..........
    Yes... actually you can add all the standard image properties...

    see the amended JS below

    save it as dropDown2.js and change the HTML from last post to point to it...
    Code:
    var fancyStuff2 = (function () {
    	var objAnimal, selected, divHere;
    	function downEm() {
    	    var animal, imgNew, cnt, picObj;
    		divHere.innerHTML = '';
    		animal = selected.value;
    		cnt = 0;
    		while (cnt < 2) {
    		    picObj = objAnimal[animal + cnt];
    			imgNew = new Image();
    			imgNew.src = picObj.src;
    			imgNew.width = picObj.width;
    			imgNew.height = picObj.height;
    			imgNew.alt = picObj.alt;
    			imgNew.title = picObj.title;
    			imgNew.className += picObj.klass;
    			imgNew.onload = divHere.appendChild(imgNew);
    			cnt += 1;
    		}
    	}
    	function init() {
    	    selected = document.getElementById('opt');
    		selected.addEventListener('change', downEm, false);
    		divHere = document.getElementById('here');
    	    objAnimal = {
                10: {
    				src: 'http://www.freephotos.se/images/photos_small/black-and-white-cow-1.jpg',
    				width: 128, height: 96, alt: 'cow-1', title: 'cow-1', klass: 'one_cow'
    			},
    			11: {
    				src: 'http://www.freephotos.se/images/photos_small/black-and-white-cow-3.jpg',
    				width: 128, height: 96, alt: 'cow-3', title: 'cow-3', klass: 'three_cow'
    			},
    			20: {
    				src: 'http://www.freephotos.se/images/photos_small/cat-1.jpg',
    				width: 128, height: 96, alt: 'cat-1', title: 'cat-1', klass: 'one_cat'
    			},
    			21: {
    				src: 'http://www.freephotos.se/images/photos_small/kitten-1.jpg',
    				width: 96, height: 128, alt: 'kitten-1', title: 'kitten-1', klass: 'two_kitten'
    			},
    			30: {
    				src: 'http://www.freephotos.se/images/photos_small/swimming-mallard-1.jpg',
    				width: 128, height: 91, alt: 'bird-1', title: 'bird-1', klass: 'one_bird'
    			},
    			31: {
    				src: 'http://www.freephotos.se/images/photos_small/flying-seagull-close-up-1.jpg',
    				width: 91, height: 128, alt: 'bird-2', title: 'bird-2', klass: 'two_bird'
    			}
    		};
    	}
    	return {
    	    start: init
    	};
    }());
    window.onload = function () {
    	fancyStuff2.start();
    };
    hover mouse over images to see the title...

    use the console to inspect the html layout...
    Last edited by grumpyOleMan; 03-24-2013 at 01:41 AM. Reason: added a little

  6. #6
    Join Date
    Mar 2013
    Posts
    5
    Wow, thanks again, this is much of what I was after. I appreciate what you have done here. And am working diligently to shape it more to my needs.

  7. #7
    Join Date
    Mar 2013
    Posts
    5
    When changing the url's to my images i've encountered another problem. How can I add more than 10 images to each option. I have 20 images for each option. This, unless i'm confused, only holds 10 image options for each option. Thanks in advance for any assistance. ^^

  8. #8
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    Quote Originally Posted by Ntr0pi View Post
    ......
    unless i'm confused, only holds 10 image options for each option.
    ...
    remove the confusion by doing a bit of homework on object and how they are made and used..

    as for the 10 limit you need to understand how those number work.

    the select has values 0-3 which in the JS is the animal and the following numbers are the images...

    I did say it was rough and ready...

    you need now to work through and understand it all and not be a cNv professional.

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