Click here to Skip to main content
15,890,282 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi
I have a task here which deals with retrieving Images from Sql server database and display them in a div. I am currently using Jquery for displaying the images in a div. My task is to connect the Jquery function in such a way that themes should change on button click. Code for that goes here. I would be thankful for the help.

aspx:

XML
aspx:

<script>

style type="text/css">

     #yu {
    width:300px;
    height:420px;
       }

    p {
    font-family:Verdana;
    font-weight:bold;
    font-size:11px
    }
     </style>


 <script language="javascript" type="text/javascript">
   function changeDivImage() {
         var imgPath = new String();
         imgPath = document.getElementById("yu").style.backgroundImage;
         document.getElementById("yu").style.backgroundImage = "url(charttheme/blue.jpg)";
         }

</script>

<body>
<div></div>

<input type="button" value="preview" onclick="changeDivImage()" />
</body>
Posted
Comments
Ahmed Mandur 1-Oct-12 9:54am    
Don't forget to set an id for your div and make it like this to be able to deal with it
<div id="yu"></div>
Regards,

1 solution

Hi,
I think that i can't get your question as you mean it sorry for that
but if do u want to change the background image of DIV and you have the images URL in your Database
so the best solution for me right now is to make the div run at server and start to set the style from the code behind

this is the ASPX page
XML
<body>
    <form id="form1" runat="server">
    <div id="yu" runat="server"></div>
    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

    </form>
</body>



And this is the code of click event of the Button1

C#
yu.Style.Add("background-image", "url('imgs/S(1).jpg')");
yu.DataBind();


you can change this imgs/S(1).jpg with the Image URL you have in your Database

Another Way to set the background image with Javascript code

you can modify the function called changeDivImage to be able to change the image url dynamically by make it like this

XML
<script language="javascript" type="text/javascript">
 function changeDivImage(imgUrl) {
     var imgPath = new String();
     imgPath = document.getElementById("yu").style.backgroundImage;
     document.getElementById("yu").style.backgroundImage = "url('" + imgUrl + "')";
 }

</script>



then from the code behind you have to call the image URL you want like this to fire the javascript Function

C#
string ImgPath = "the retrieved image URL from the Database";
     ScriptManager.RegisterStartupScript(this, this.GetType(), "starScript", "changeDivImage('" + ImgPath + "');", true);

Regards,
Ahmed Mandour
 
Share this answer
 
v2
Comments
Raghavanand 1-Oct-12 10:17am    
Thanks a lot Sir. This means a lot .Can you please elaborate
"ScriptManager.RegisterStartupScript(this, this.GetType(), "starScript", "changeDivImage('" + ImgPath + "');", true);" . I didn't get this.
Ahmed Mandur 1-Oct-12 10:42am    
this is the code behind which fires the Javascript function . Use this Line to call your Javascript function changeDivImage() to change the background image of the div.
Raghavanand 3-Oct-12 2:22am    
I am not getting the "starScript" . Can you please explain this part of code with example.
Achha Insan 3-Oct-12 5:28am    
nothing is impossible. you can do it.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900