Results 1 to 5 of 5

Thread: How to show my image object?

  1. #1
    Join Date
    Jan 2011
    Location
    England
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to show my image object?

    Hi all,

    I have a script which generates a random image every 10 seconds. I have created an image object and set the attributes but when I try to display the image it is showing [object HTMLImageElement].

    I searched around but can't seem to find an answer. Here is my code:

    Code:
    function change_image(){
    	var image = new Image();
    	var index = Math.floor((Math.random() * y));//generates a random number between 0-length of array
    	image.setAttribute("src",imgDir+"/"+image_names[index]);
    	image.setAttribute("alt",image_names[index]);
    	console.log(image);
    	/*var image = "<img src='"+imgDir+"/"+image_names[index]+"' alt='Gardenable Products' title='"+image_names[index]+"' id='random_image' />";*/
    	document.getElementById("image_div").innerHTML = image;
    	document.getElementById("text").innerHTML = product_text;
    }
    
    var image_names = new Array("bench1.jpg","bench2.jpg","bench3.jpg","bench4.jpg","bench5.jpg",
    							"binstore1.jpg","binstore2.jpg","binstore3.jpg","binstore4.jpg","binstore5.jpg",
    							"birdhouse1.jpg","birdhouse2.jpg","birdhouse3.jpg","birdhouse4.jpg","birdhouse5.jpg",
    							"gate1.jpg","gate2.jpg","gate3.jpg","gate4.jpg","gate5.jpg",
    							"pethousing1.jpg","pethousing2.jpg","pethousing3.jpg","pethousing4.jpg","pethousing5.jpg",
    							"planter1.jpg","planter2.jpg","planter3.jpg","planter4.jpg","planter5.jpg",
    							"shed1.jpg","shed2.jpg","shed3.jpg","shed4.jpg","shed5.jpg",
    							"table1.jpg","table2.jpg","table3.jpg","table4.jpg","table5.jpg");
    				
    var product_text = "<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature"
    	product_text += "from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked"
    	product_text += "up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage</p>";
    
    var imgDir = "core/product_files";
    
    
    window.onload = setInterval("change_image()",10000);
    The line which is commented out inside the function works but I was advised to just change the attributes rather than creating a new element. Instead of innerHTML I have also tried appendChild, but when I use appendChild it doesn't show anything at all.

    Thank you in advance for any help you can give me.

    Kiind regards,

    LC.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Using innerHTML with that line uncommented is workable but not ideal. And it looks like there are other problems with the code. But if it was working with that commented line uncommented, I suppose it's serviceable. You're not showing any markup. Let's say you have an image somewhere on the page:

    HTML Code:
    <img src="core/product_files/bench1.jpg" id="productimage" alt="products" title="">
    Then to change the image:

    Code:
    function change_image(){
    	var image = document.getElementById('productimage');
    	var index = Math.floor((Math.random() * y));//generates a random number between 0-length of array
    	image.setAttribute("src",imgDir+"/"+image_names[index]);
    	image.setAttribute("alt",image_names[index]);
    	console.log(image.src);
    	document.getElementById("text").innerHTML = product_text;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2011
    Location
    England
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry I should have explained a little better.

    There is no initial image on the page. I create an array and pick a random entry from when the page loads. The reason I haven't hardcoded an image in is because I want a random one each time someone visits. I need a way to be able to build up the <img> tag and then insert it into the DOM (I believe).

    Here is my HTML:
    Code:
    <div id="featured_products_div">
    	<h3>Our featured products!</h3>
    	<div id="image_div"></div>
    	<div id="text"></div>
    </div>
    As you can see I have no initial product, it is all generated by the javascript.

    How can we get around this?

    Would it be best to put an initial image in the html and then change the values and use innerHTML again to re-set the values of the image??

    Thanks for the reply!

    Regards,

    LC.
    Last edited by LearningCoder; 12-12-2012 at 08:42 AM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    You can create it and insert it the first time, then use it every time thereafter:

    Code:
    function change_image(){
    	var image;
    	if(!document.getElementById('productimage')){
    		image = document.createElement('img');
    		image.id = 'productimage';
    		document.getElementById('image_div').appendChild(image);
    	}
    	image = document.getElementById('productimage');
    	var index = Math.floor((Math.random() * y));//generates a random number between 0-length of array
    	image.setAttribute("src",imgDir+"/"+image_names[index]);
    	image.setAttribute("alt",image_names[index]);
    	console.log(image.src);
    	document.getElementById("text").innerHTML = product_text;
    }
    But as I said, it looks like the code has other problems. None of the images will be cached for first time visitors, so things will be a bit jerky until they are. If the images are small enough in byte size, it would be reasonable to preload them or at least the first 2 or 3. And random means random. Any given image may appear at any given time. You might get repeat images or one or more images will show up a lot at the expense of the others. Generally what's done in a case like that is to shuffle array once on page load and allow the images to show in order from that point on. But those are other topics.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2011
    Location
    England
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks very much, only just had a chance to properly read the post. I will work on it in the next few hours.

    Also, my intention was to just get it working, displaying the image then I was going to add a while loop which deals with if it picks the same image again because I had a couple of console.log()'s when I first wrote it which was logging the src's and I noticed then that on the odd occasion it would pick the same image.

    Just to note I have a function which preloads the images when the site is accessed. I didn't add it here because I don't think my problem relates to that. I can post it if you would like to view it.

    Thank you for your knowledge.

    Kind regards,

    Lc.
    Last edited by LearningCoder; 12-13-2012 at 03:34 PM.

Similar Threads

  1. Replies: 2
    Last Post: 12-12-2012, 08:54 AM
  2. Replies: 1
    Last Post: 05-20-2011, 05:05 PM
  3. Replies: 3
    Last Post: 03-13-2009, 08:24 AM
  4. Create object; load file in the object
    By molendijk in forum JavaScript
    Replies: 0
    Last Post: 03-09-2008, 07:30 PM
  5. IE doesn't show flash object
    By djr33 in forum Flash
    Replies: 3
    Last Post: 10-29-2006, 05:21 AM

Bookmarks

Posting Permissions

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