Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

local images as web backgrounds 2

Status
Not open for further replies.
brisray

brisray

Programmer
Feb 7, 2002
88
US
I've been working on my little "complete website configurability" project. Visitors can now choose from around 100 backgrounds and have unlimited colour control of the background and text colours.

What I want to do now is to let visitors use an image stored on their own computer as a background for my test site. I know I can use the old beginners mistake of using file:///D:/images/... to display an image from my computer but I can't get it to become a background. I've used both document.body.style.backgroundImage='url(file:///C:/images/...)'; and document.body.background='file:///C:/images/...' methods and neither work - at least in the way I tried them.

Anyone any ideas? (apart from giving up)

You can see what I'm trying to achieve at - be warned though that this is a test page and there may be some code left in their that may not work properly (though most has been tested on 8 servers, 3 OS's and 5 browsers) and zillions of images.

Ray
 
Sort by date Sort by votes
I'm not saying this isn't possible, but it sounds kinda fishy to me that a web page can be written to open files on my computer. I'm still pretty new to web programming (4 months) so I can't really say for sure, but I'm guessing that's not possible.

-kaht

banghead.gif
 
Upvote 0 Downvote
I agree it shouldn't do, in fact, languages like JavaScript were specifically designed not to be able to rummage through client computers.

However, the files are being opened, the fact that I can see the image in the path I put on the website (D:/images/backgrounds/brisray.gif) shows that images at least can be opened and displayed on the local browser. I should assume that anyone with the exact same path and filename on their computer will also see an image - not neccessarily the same one I used. Which is nearly exactly what I want to be able to do, open an image and use it as a background.

Ray



 
Upvote 0 Downvote
In fact, I know it's possible to use an image on a client as a web page background as I've just tried by changing the main body tag to <body background=&quot;file:///D:/images/backgrounds/brisray.gif&quot;> and it does display. It probably isn't going to work in any form of script though.

Out of curiosity I also tried substituting an exe file for the image, but as it's not an image the code gets ignored.

Ray
 
Upvote 0 Downvote
It is possible... Here you go:

Code: 
<HTML>
<HEAD>

<STYLE TYPE=&quot;text/css&quot;>
body
{
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0px 0px;
}
</STYLE>

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
function useChosenBG()
{
	var bgFilename = document.getElementById('bgFilename').value;
	if (bgFilename != '')
	{
		bgFilename = 'file:///' + escape(bgFilename.split('\\').join('/'));
		bgFilename = bgFilename.split('%3A').join(':');
		document.body.style.backgroundImage = 'url(' + bgFilename + ')';
	}
}

</SCRIPT>
</HEAD>
<BODY>

<FORM>
	<INPUT TYPE=&quot;file&quot; ID=&quot;bgFilename&quot;>
	<BR><BR>
	<INPUT TYPE=&quot;button&quot; VALUE=&quot;Set background...&quot; onClick=&quot;useChosenBG();&quot;>
</FORM>

</BODY>
</HTML>

Several things to note, however...

1. I use .split(x).join(y) to do a quick search-and-replace of x with y... I hate writing regular expressions, especially ones that involve slashes...

2. Basically, I replace all \ with /, prepend file:///, escape the URL, and assign to the backgroundImage style. However, IE spits the dummy if the : (as in C:) is escaped, so the second search-and-replace puts it back in. NN and Opera don't seem to mind about this.

3. For whatever reason, IE also spits the dummy if you put a ; after the url() statement... Again, not sure why.

Either way, hope this code helps... If anyone can put some better search/replace code in, feel free ;o)

Dan
 
Upvote 0 Downvote
Dan that's great, exactly what I wanted to do. Another star for your collection!

Ray
 
Upvote 0 Downvote
This works for me:

<input type=&quot;file&quot; onchange=&quot;document.body.style.backgroundImage='url(\''+this.value+'\')'&quot;>

Adam
while(ignorance==true){perpetuate(violence,fear,hatred);life--};
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
680
Rayj0000
Rayj0000
RailBatyrshin
  • Locked
  • Question
Back on the Node(ExpressJS) fetch API from WEB Browser
Replies
0
Views
209
RailBatyrshin
RailBatyrshin
chillay
  • Locked
  • Question
Add Control + F feature to a Web Page
Replies
3
Views
362
feherke
feherke
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb
deepumay15
  • Locked
  • Question
array input value how to replace decode value as Output using JavaScript code
Replies
1
Views
282
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top