PDA

View Full Version : Dynamically loading images



mattgb1
05-20-2007, 07: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:


<script language="Javascript">
var normColor = "#000000";
var PALE_YELLOW = "#FFFFC0";
var LIGHT_YELLOW = "#FFFF80";
var PALE_GREEN = "#C0FFC0";
var varHeight = "60px";
</script>
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 -


<img id="Img1" src="Images/A0812300.JPG"
onclick="return IMG1_onclick()" height="60px"
style="position: relative; left: 8px; top: 0px; width: 78px; border-right: 1px solid;
border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid;" />

Bob90
05-20-2007, 08:38 PM
To dynamically add an image use this:


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.



//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, 10: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...
...

<img id="ImageButton02" src="Images/BRR02111.JPG" onmouseover="showmyPic(getMyPic('Images/BRR02111.JPG'), event, '#D9FFD9', 210, 300)" onclick="return IMG1_onclick()" height="60"
style="position: relative; left: 8px; top: 0px; width: 78px; border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid;" />

<img id="ImageButton03" src="Images/AA801400.JPG" onmouseover="showmyPic(getMyPic('Images/AA801400.JPG'), event, '#D9FFD9', 210, 300)" onclick="return IMG1_onclick()" height="60"
style="position: relative; left: 8px; top: 0px; width: 78px; border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid;" />

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. :o

Bob90
05-21-2007, 07: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


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. :confused:

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

:)

mattgb1
05-21-2007, 04: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, 09:06 AM
Having a look at your code would be soo much easier, but as far as I understand...


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

document.getElementById("panel_id")

Change the blue part to your own function name

myonclickfunction()

mattgb1
05-22-2007, 04: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, 05:55 PM
right. Let me just write the whole thing for you :p

Here is some 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.



<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, 06:46 PM
I finally figured it out. Duh... :o

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

Bob90
05-22-2007, 07:02 PM
function removeChildren(el){
var d = document.getElementById(el);
while(d.firstChild)
{
d.removeChild(d.childNodes[0]);
}
}


So something like


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

mattgb1
05-22-2007, 08:08 PM
you Rule!

Now I'm trying to figure out a way to sort of nest this function.

What I want to do is load images into a panel, and give each image its own customized onmouseover code for loading an image into a second panel.

What I'm finding difficult is how to embed that onmouseover code into the images as they're loaded by your function.

Bob90
05-22-2007, 09:03 PM
I found this hard myslef. I had problems with IE, which didn't like dynamically adding event handlers to dynamically created images (Firefox was fine).

I'll have a think and get back to you.

I'm sure the moderators of this forum could do it :cool: . Maybe they'll drop by.

mattgb1
05-22-2007, 09:26 PM
I'll keep my fingers crossed. :rolleyes:

And i'll try not to think about the next step: handling that dynamic image loading matter from the data layer. :eek:

My web site is written in vb.net against a SQL server database. A user's selection on the web page will need to pass some value into the database (via a SqlDataSource control that handles the connection) and get back the appropriate image names for populating the panel.

This javascript stuff is so handy, but i don't know how well it can talk to the data layer. I'm hoping that the ever-versatile document.getElementById function can become my mediator in both directions between the control and the scripts.