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

@Ntr0piMar 22.2013

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

to post a comment

JavaScript

7 Comments(s) _↴

@grumpyOleManMar 23.2013 — #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

[code=html]<!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>
 [/code]

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();
 };
 [/CODE]

@Ntr0piauthorMar 23.2013 — #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.

@Ntr0piauthorMar 23.2013 — #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/2382461/how-to-use-javascript-to-swap-images-with-option-change

@grumpyOleManMar 24.2013 — #
.......

my question is, can the title attribute be applied to them

..........
[/QUOTE]

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();
 };[/CODE]

hover mouse over images to see the title...

use the console to inspect the html layout...

@Ntr0piauthorMar 24.2013 — #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.

@Ntr0piauthorMar 25.2013 — #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. ^{^^{^}}

@grumpyOleManMar 26.2013 — #......

unless i'm confused, only holds 10 image options for each option.

...
[/QUOTE]

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.

Also in #JavaScript _↴

Close Button Dragging Table Rows in Dojo 1.0 Display image depending on URL

Success!

Help @Ntr0pi spread the word by sharing this article on Twitter...

Tweet This

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

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

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

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴