Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Creating a Live Background Previewed Script.

Author: DevASP
Download Source Code : 629_BackGroundPreview.zip

This article is about how you can create a live background previewed that allows surfers to instantly see how a background image will look like in a document. Click on any of the thumbnail images, and

Steps you will do

 

Start visual studio and create a new web application. Open the HTML code of your web form and add the following JavaScript functions before closing the head tag.

 

 

<script language="JavaScript1.2">

function tile(){

if (!document.all)

return

var source=event.srcElement

if (source.tagName=="IMG")

document.body.style.backgroundImage="url("+source.src+")"

}

 

function restore(){

document.body.style.backgroundImage=''

}

</script> 

 

Now add the following style tag to apply the style in your web application. This style will make the cursor of the document to hand instead of normal cursor.

 

 

<style>

.bgimages img {cursor:hand}

</style> 

Now add the following HTML code to design the layout of your web form. In this code we have given the source of four images so please add any images that you want to display for the background of your web application.

 

 

<body MS_POSITIONING="GridLayout" onClick=”restore()”>

 

<form id="Form1" method="post" runat="server">

 

<span class="bgimages" onClick="tile();event.cancelBubble=true">

 

<img src="backgr10.jpg"><img src="backgr11.jpg"><br>

 

<img src="backgr13.jpg"><img src="backgr14.jpg">

 

</span>

 

<center>

<h2>

Click at any image to change the background to that image.

<br><br>

Dont forget to visit devasp.com<br>

<a href="http://www.devasp.com">www.devasp.com</a>

</h2>

</center>

 

</form>

</body> 

   

This is all you will do. Now run you application and click any image to change the background of your web page.

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How we can give Splash Screen Effects in our Web Application.

Disclaimer - Privacy
© 2002-2017 DevASP.net