Solved

How do you dynamically specify a backgroun image to a <DIV>?

Posted on 2006-06-28
16
290 Views
Last Modified: 2007-12-19
How do you dynamically specify a backgroun image to a <DIV>? I use ASP.NET 2.0 (C#) in VS2005.
0
Comment
Question by:chuang4630
  • 7
  • 6
  • 3
16 Comments
 
LVL 27

Expert Comment

by:Sammy
ID: 17004876
run the Div at server and use something like this

this.myDiv.Style.Add("background", "url(rightBorder.gif) repeat-y right");

of course change myDiv to match your Div ID and this has to be placed in page load

HTH
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17004905
What does "repeat-y right" for?
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005007
I added this line but it does not work. For test purpose, I added this in the buton exception handler.
I also view the source of the page, the style has no change at all.

0
 
LVL 27

Expert Comment

by:Sammy
ID: 17005187
repeat is for the image to repeat itself based on the X and Y coodinates of the browser
it has to be added in page load
If you have a div called test and add the code I provided for you, run the page and the source would show this

<div id="test" style="background:url(rightBorder.gif) repeat-y right;">
    <p>Test div</p>
    </div>
    <div>
make sure your image is stored in a proper directory in order for it to work

HTH
0
 
LVL 27

Expert Comment

by:Sammy
ID: 17005202
if you want to do another test try it with this image
this.test.Style.Add("background", "url(http://webdivisions.net/Images/banner.gif) repeat-y right");
you will see the image strech and aligned to the right

HTH
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005231
It works now. The problem is about the event handler.

Is it possible to "FEED" the image from memory rather than load from file system?
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17005233
use a panel

it is the equal to div then you can set the Panel1.BackImageUrl, this is the easiest way.
0
 
LVL 27

Expert Comment

by:Sammy
ID: 17005256
You should be able to feed the image from memory if you plug in the outout to a variable and replace the url(myvar). but why create the extra work?
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17005268
opps you go it working already...

from memory
http://aspalliance.com/726
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005475
panel is not desirable since it mess up the page on FireFox.
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005490
http://aspalliance.com/726: commercial product of netCharting?
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005519
This is a document review application. Each document has its own watermark in the background. It has to be created dynamically. It is done. The remaining issue is to "FEED" it to the browser as a background. The backup plan is to ssave it on the file system and let the browser to load it up. It is done, thanks to Sammy's suggestion. The drawback is the scalability and the concurrency. The best way is to feed the image from memory. The memory will be reclaimed once it is done.

Is there any sample?
0
 
LVL 27

Expert Comment

by:Sammy
ID: 17005559
try to stream the image like its done here
http://www.eggheadcafe.com/articles/20050911.asp
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005608
But how do you stream the image to Background (or background style sheet)?
0
 
LVL 27

Expert Comment

by:Sammy
ID: 17005674
how are you streaming the image?
the image should be saved in the stream so how and given a name, you can use that name in the url.
I have to leave now but if you want, post your stream code and I will take a look at it at a later time. in case I dont make it I am sure there are a lot of guys who can help once they see the stream code
0
 
LVL 12

Accepted Solution

by:
deanvanrooyen earned 500 total points
ID: 17015081
please take a look at this for some javascript manipulations from file


aspx page
////////////////////////////////////
<%@ Page Language="C#"  AutoEventWireup="true" CodeFile="div.aspx.cs" Inherits="div" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
<script type="text/javascript">
function getObj(name)
{
  if (document.getElementById)
  {
        this.obj = document.getElementById(name);
      this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
      this.obj = document.all[name];
      this.style = document.all[name].style;
  }
  else if (document.layers)
  {
         this.obj = document.layers[name];
         this.style = document.layers[name];
  }
}
function changeDiv(col)
{
      var x = new getObj('q');
      x.style.height = 200;
      x.style.backgroundImage = 'url(' + col +')'
}
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="q">
        <br />
        <a  href="javascript:changeDiv('IMG_0413.jpg');" title="color">html change color anchor</a>
        <br />
        <asp:HyperLink ID="HyperLink1" runat="server">HyperLink control change color anchor</asp:HyperLink>
        <br />
        <a  href="javascript:changeDiv('');" title="color">clear div</a>
        </div>
    </form>
</body>
</html>

code behind
////////////////////////////

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class div : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            string image = "IMG_0413.jpg";
            string js = "changeDiv('" + image + "')";
            this.HyperLink1.Attributes.Add("href", "javascript:" + js);
        }
    }

}

0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now