7 Replies Latest reply on Feb 8, 2013 8:21 PM by drsqueegee

    use div or img?

    tmacka_88 Level 1

      Hi,

       

      This may sound like a studpid question but i want to know the difference in using a div or img for images. They both work, so why should i specify my images as a img and not just keep them as a div?

       

       

      Should all images be specified as a img within edge?

       

      thanks

        • 1. Re: use div or img?
          resdesign Adobe Community Professional & MVP

          IF you have a image on the stage and want to replace it by other images dynamically, you need it to be img and not div.

          An image is loaded with:

          sym.$('elementName').attr('src','images/myimage.jpg');

           

          For example you could have an array with image names like image0, image1, image2,... And load them with:

          sym.$('elementName').attr('src','images/image' + i +'.jpg');

           

          On a click event for example.

           

          image names could be in a Jason file or could come from a database, etc...

           

          If you forget to set your image to img and it is div, the other images will not load because basically images load into a div container and it is the images that load, not the div.

           

          Hope this makes sense.

          • 2. Re: use div or img?
            drsqueegee Level 1

            I like to see how that works. Could you upload a simple example of that?

            • 3. Re: use div or img?
              tmacka_88 Level 1

              sorry but no it doest really make sense. Im still new to javascript so kinda doesnt do anything more me...

               

              Basically even with all my img's set as a div they work fine. Should i still change then to an img?

               

              cheers

              • 4. Re: use div or img?
                resdesign Adobe Community Professional & MVP

                Hey drsqyeegee,

                Here is a sample file:

                https://www.box.com/s/ddci4qeyh8nlxn4g7usl

                 

                This was done a while ago so maybe I would do it differently today but there are many different ways to do things. Check the code in composition ready.

                 

                tmacka, So you are right, either way works. It depends how you process your images. If you check the file above, you will notice that I have an img and not div. Here the css code is using attr('src','image.jpg') and needs img instead of div. Try to change it to div and it will not work.

                 

                However if you load the images into a div, this can be done a little differently. See great tutorial here:

                http://www.gotoandlearn.com/play.php?id=168

                 

                So you are right, either way works. It just depends on how you proceed to load your images.

                • 5. Re: use div or img?
                  drsqueegee Level 1

                  Thanks for sharing! Very cool. I have a couple of questions...

                   

                  • If you had an array with let's say 1000 pictures, would all subsequent images be called from the server one at time?
                  • Would you alter this code to read (see below), where x is always the second last number in your array of images?

                   

                  index = 0;

                  updateMyInfo(0);

                  btn.click(function(){

                            index++;

                   

                   

                            if (index>X){

                            index = 0;

                            }

                            updateMyInfo(index);

                  });

                  • 6. Re: use div or img?
                    resdesign Adobe Community Professional & MVP

                    Yes they would be called one at a time. This is how I did it for the table of the elements. The element info on click loads the image of each element.

                    http://mjpagedesign.com/testing2/

                    you could use length for the array.

                     

                    btn.click(function(){

                              index++;

                     

                     

                              if (index>youarrayname.length){

                              index = 0;

                              }

                              updateMyInfo(index);

                    });

                     

                    Did you look at the tutorial too? It is a nice way to load images too.

                    • 7. Re: use div or img?
                      drsqueegee Level 1

                      Just watched it, and bookmarked it. It's a little over my head, but I'm starting to get it. Knowing these tricks makes edge so much more powerful.