www.webdeveloper.com
Results 1 to 3 of 3

Thread: load some images to a div

  1. #1
    Join Date
    Nov 2013
    Posts
    44

    load some images to a div

    i want to load some images using new image() object method.i can do the same thing using normal array indexing.but i want to do it in this way only for learning purpose.can anyone tell me where the mistakes here
    HTML Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    #this{
    	width:500px;
    	height:100px;
    	border:1px solid blue;
    }
    #this img{
    	width:100px;
    	height:100px;
    }
    </style>
    </head>
    
    <body>
    <div id="this"></div>
    <script>load();</script>
    <script>
    
    	var imag = new array(4);
    	imag[0] = new image();
    	imag[0].src = "image1.jpg";
    	imag[1] = new image();
    	imag[1].src = "image2.jpg";
    	imag[2] = new image();
    	imag[2].src="image3.jpg";
    	imag[3] = new image();
    	imag[3].src ="image4.jpg";
    	imag[4] =new image();
    	imag[4].src="image5.jpg";
    function load(){
    	var m=document.getElementById("this");
    	var i;
    	for(i=0;i<imag.length;i++){
    		m.innerHTML += '<img src="'+imag[i].src+'" id="'+i+'" onClick="show(this.id);" />';
    	}
    }
    	</script>
    </body>
    </html>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    you can only call function load after it exists
    and Array() and Image() are case sensitive


    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    #this{
    	width:500px;
    	height:100px;
    	border:1px solid blue;
    }
    #this img{
    	width:100px;
    	height:100px;
    }
    </style>
    </head>
    
    <body>
    <div id="this"></div>
    <script>
    
    	var imag = new Array();
    	imag[0] = new Image();
    	imag[0].src = "image1.jpg";
    	imag[1] = new Image();
    	imag[1].src = "image2.jpg";
    	imag[2] = new Image();
    	imag[2].src="image3.jpg";
    	imag[3] = new Image();
    	imag[3].src ="image4.jpg";
    	imag[4] =new Image();
    	imag[4].src="image5.jpg";
    
    function load(){
    	var m=document.getElementById("this");
    	var i;
    	for(i=0;i<imag.length;i++){
    		m.innerHTML += '<img src="'+imag[i].src+'" id="'+i+'" onClick="show(this.id);" />';
    	}
    }
    	</script>
    <script>load();</script>
    </body>
    </html>
    Last edited by vwphillips; 11-30-2013 at 08:00 AM.
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Nov 2013
    Posts
    44
    thanks

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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