Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Dynamically loading images

  1. #1
    Join Date
    May 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Dynamically loading images

    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;" />

  2. #2
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    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

  3. #3
    Join Date
    May 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    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.

    Last edited by Bob90; 05-21-2007 at 07:49 AM.

  5. #5
    Join Date
    May 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    > 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()}

  6. #6
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    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()
    Last edited by Bob90; 05-22-2007 at 09:11 AM.

  7. #7
    Join Date
    May 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  8. #8
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    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.
    Last edited by Bob90; 05-22-2007 at 06:36 PM.

  9. #9
    Join Date
    May 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I finally figured it out. Duh...

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

  10. #10
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    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*">

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
  •