Dynamically loading images

**mattgb1** · 05-20-2007, 08:02 PM

Hi Gurus

Please for give the duplicate posting, but I was told that I should have put this here instead of the ASP forum.

I'm trying to figure out how to load images directly into a panel control. I already know how to set constants in my scripts, as in this example:

but I can't find any way to pass variables into an <img> tag.

The only way i know how to put images into a panel are in the HTML markup, where I need to specify each tag explicitly.

In the example below, i'd like to replace height="60px" with something like height="varHeight" but nothing I try seems to work. Is it as simple as a syntax issue, or am I trying to do something that can't be done inside of an <img> tag?

Or better yet, is there a way to bypass that whole process by loading them from JavaScript?

Any suggestions?

Here's the example -

**Bob90** · 05-20-2007, 09:38 PM

To dynamically add an image use this:

Code:

function addImg(parent, id, src, style) {
  var r = document.createElement("img");
  if(id)
  	{
    r.id = id;
	}
	if(src)
  	{
    r.src = src;
	}
  if(style)
  	{
    for(var x in style)
		{
		r.style[x] = style[x];
		}
	}
  parent.appendChild(r);
  return r;
}

and pass something like this to it.

Code:

//Add <img>
var varsrc = "image.png"
var varheight = 60;
var varwidth = 30;
var temp_style = {"position":"relative", "width":varwidth+"px", "height":varheight +"px", "border":"0px", "left":200+"px", "top":200+"px"};
var temp_src = varsrc;
addImg(document, "img_id", temp_src, temp_style);

I'm sure you can work out the rest.
If not reply here with the problem

**mattgb1** · 05-20-2007, 11:49 PM

Thank you so much for this.

How and where would I invoke this in order to load the images into the panel?

Although the panel is created at design time, the images will be loaded at run-time in a context-sensitive manner, and will vary not only by the images selected but also by the quantity of images that will need to be placed on the form.

For example, one rendering of the page might show 3 child images on the panel, but a different rendering of the same page might need to show as many as 30 completely different images (hence the choice of the panel control, which allows for a scroll bar).

I can't disclose the actual business nature of this application, but a parallel analogy might be a recipe program that shows an image of each ingredient. For pizza, we'd see a picture of dough, a picture of cheese, and a picture of tomato sauce. For a BLT, we'd see images of bread, lettuce, bacon and tomato. To make matters more complex, a mouseclick on the bacon picture would have to do something very "bacon-specific."

If I always knew the images to be shown, I would simply specify them in the <body> like this -

<asp:Panel ID="panelImages...
...

But since I never know which images will need to be loaded, I can't hard-code them in like this and have to invoke them somehow.

Is this something I would invoke in the (VB) code-behind? If so, I'm not sure what syntax to use for such a feat. Or is it something I could somehow invoke from the page markup in the body section of the page?

Either way, how is it done?

Thanks again... and thanks in advance for your reply.

**Bob90** · 05-21-2007, 08:41 AM

So.......

The second box of code invokes the 'put image on page' function. The second box shows you a way to set the attributesof the pictures, like height, width etc.

I don't know what an asp panel is.

This is a dynamic function; it can add images to the page after it has loaded.

Something bacon-specific -- like Oinking?

Sure just add another line to the second box. like

Code:

var temp_obj = addImg(document, "img_id", temp_src, temp_style);
temp_obj.onclick = function(){callthisfunctiononclick()}

it is not the same as all the rest of the lines above becasue IE has problems setting the attribute of onclick (Well I think so anyway).

VB, What VB? I thought it was just asp and javascript.

I really don't know what you mean. As I said above this script adds images dynamiclly.

**mattgb1** · 05-21-2007, 05:50 PM

> VB, What VB? I thought it was just asp and JavaScript.

The Panel I'm referring to is an instance of the System.Web.UI.WebControls.Panel class, and it lives in my web form (<form id="form1" runat="server">) in the body section of the HTML markup.

If I understand you correctly (yes, I know it makes me look dumb to ask, but I seem to have a propensity for wrong assumptions) the lines you sent me (below) should go inside of some sort of a "populateImages" function that's entirely in the <script> section? If so, would I pass in the reference to my panel object with a getElementById function?

var temp_obj = addImg(document, "img_id", temp_src, temp_style);
temp_obj.onclick = function(){callthisfunctiononclick()}

**Bob90** · 05-22-2007, 10:06 AM

Having a look at your code would be soo much easier, but as far as I understand...

Code:

function dynamicallyAddImage(src,height,width){
//Add <img>
//Variables
var varsrc = src;
var varheight = height;
var varwidth = width;
var temp_style = {"position":"relative", "width":varwidth+"px", "height":varheight +"px", "border":"0px", "left":200+"px", "top":200+"px"};

//Add images to page
//addImg(parent object, id, src, style)
addImg(document, "img_id", tempvarsrc , temp_style);

//add onclick to img
temp_obj.onclick = function(){callthisfunctiononclick()}
}

Change the red part to the panel

Code:

document.getElementById("panel_id")

Change the blue part to your own function name

Code:

myonclickfunction()

**mattgb1** · 05-22-2007, 05:42 PM

Can we take this down to the tag level?

Let's say the parent panel is called panelParent and the image is currently showing as a thumbnail, like this

<img id="ImageButton02" src="Images/BRR02111.JPG" ... and so on

What should I put into the onmouseover= clause, and how should I re-write the addImg and dynamicallyAddImage functions?

**Bob90** · 05-22-2007, 06:55 PM

right. Let me just write the whole thing for you

Here is some code

Code:

<script type="text/javascript">
function dynamicallyAddImage(src,height,width){
//Add <img>
//Variables
var varsrc = src;
var varheight = height;
var varwidth = width;
var temp_style = {"position":"relative", "width":varwidth+"px", "height":varheight +"px", "border":"0px"};

//Add images to page
//addImg(parent object, id, src, style)
temp_obj = addImg(document.getElementById("panelParent"), "img_id", varsrc , temp_style);

//add onclick to img
temp_obj.onclick = function(){callthisfunctiononclick()}
temp_obj = null;
}
</script>

For every image you want on the page add a line like this.

Code:

<img id="ImageButton02" src="Images/BRR02111.JPG" onclick="dynamicallyAddImage('image_src.png',60,30); dynamicallyAddImage('image_src2.png',70,20); dynamicallyAddImage('image_src3.png',50,40);">

When you click on the image it will add 3 new images to panelParent.
The images it adds have an onclick too, that when clicked on call a function named 'callthisfunctiononclick()'. You can change this to whatever function you like.

**mattgb1** · 05-22-2007, 07:46 PM

I finally figured it out. Duh...

Is there a quick way to flush out the child images before loading a new one?

**Bob90** · 05-22-2007, 08:02 PM

Code:

function removeChildren(el){
var d = document.getElementById(el);
while(d.firstChild)
	{
	d.removeChild(d.childNodes[0]);
	}
}

So something like

Code:

<img onmouseover="removeChildren('panelParent'); *images*">

Thread: Dynamically loading images

Thread Tools

Search Thread

Dynamically loading images

Bookmarks

Bookmarks

Posting Permissions