Basically, what I have is a new window which opens upon the clicking of a link. What I am looking for is that same window to open with a transparent effect to the point where you can notice the contents beneath but not actually ahve them interfere with what it is you see on top. I know a lot of that will reside with the choice of colors and such. I have heard that .gif file format allows you to do such however the inital specs to do such are something I am unfamilar with. am a jpg kinda guy so any help would be appreciated.
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
If I understand correctly.... A way of doing this is to add a div covering the whole document with the sytle set to :
style="filter:alpha(opacit
Also see http://www.fred.net/dhark/
Take a look at this script from dynamicdrive.com:
http://www.dynamicdrive.co
You can make it a "window" that toggles open and closed, and you can make the background of this window semi-transparent with the addition of a filter, and you can have a background-image. I have modified the script from dynamicdrive, to match what you requested above, and posted below. If you use this script, even if you modify it, you must leave the credits to dynamicdrive within the script:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>Open semi-transparent div onclick</title>
<!--[if IE]>
<!--
Always On Top Content Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
-->
<style type="text/css">
<!--
body {background-image:url(your
.drag{position:relative;cu
}
#scontentmain{
position:absolute;
width:150px;
}
#scontentbar{
cursor:hand;
position:absolute;
background-color:green; filter:alpha(opacity=25);
height:15;
width:100%;
top:0;
}
#scontentsub{background-im
position:absolute;
width:100%;height:100px;
top:15;
background-color:lightyell
border:2px solid green;
padding:1.5px;
}
-->
</style>
<script language="JavaScript1.2">
<!--
//Drag and drop engine for static content
//© Dynamic Drive (www.dynamicdrive.com)
var dragapproved=false
var zcor,xcor,ycor
function movescontentmain(){
if (event.button==1&&dragappr
zcor.style.pixelLeft=tempv
zcor.style.pixelTop=tempva
leftpos=document.all.scont
toppos=document.all.sconte
return false
}
}
function dragscontentmain(){
if (!document.all)
return
if (event.srcElement.id=="sco
dragapproved=true
zcor=scontentmain
tempvar1=zcor.style.pixelL
tempvar2=zcor.style.pixelT
xcor=event.clientX
ycor=event.clientY
document.onmousemove=moves
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=fal
//-->
</script>
<![endif]-->
</head>
<body>
<!--[if IE]>
<div id="scontentmain">
<div id="scontentbar">
<img align="right" src="barbutton.gif" onClick="onoffdisplay()">C
</div>
<div id="scontentsub">
<p align="left"><br> Here is where you would put your content. Click the button on the upper right to toggle this semi-transparent message on and off. You can also drag this window around the page. You can have a background image, and specify where you want it on the page. You can configure this div like any other.</p>
</div>
</div>
</div>
<script language="JavaScript1.2">
/*
Always On Top Content Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/
//configure the below two variables to determine where the static content will initially be positioned when the document loads, in terms of X and Y cooridinates, respectively
var w=document.body.clientWidt
var h=50
////Do not edit pass this line///////////
w+=document.body.scrollLef
h+=document.body.scrollTop
var leftpos=w
var toppos=h
scontentmain.style.left=w
scontentmain.style.top=h
function onoffdisplay(){
if (scontentsub.style.display
scontentsub.style.display=
else
scontentsub.style.display=
}
function staticize(){
w2=document.body.scrollLef
h2=document.body.scrollTop
scontentmain.style.left=w2
scontentmain.style.top=h2
}
window.onscroll=staticize
</script>
<![endif]-->
You can have other content on your page..
</BODY>
</HTML>
Remember to go to:
http://www.dynamicdrive.co
to obtain the barbutton.gif (Just right click on the image and choose "save as".. there are instructions at the site).
Business Accounts
Answer for Membership
by: CharlesBukowskiPosted on 2003-09-24 at 00:54:17ID: 9418987
Well, I've never done this before. But, thought about how it could be done. You could capture a screen shot of the web page you wish to be as a background. This freeware program can do this for you: www.xnview.com
Then edit the image to remove the unwanted images. Then using an image editor, add a new layer with an opacity of 50 or 90% Whatever works for the image, you'll have to play with that part. Then use the paint can to dump on the white.
Then you could save it as a gif. Probably get away with saving as 16 colors because the white layer on top really cuts down on the color spectrum appearance of the image on the bottom. (<- does that make sense?).
Then you could use this new gif image as the background of your page.
I suspect there would be some trouble shooting to make it work. (preventing it from tiling. it's not centering in different resolutions, etc.)
Anyways, thanks for asking. I got to play in the graphics editor.
PS, I'm sure someone will post the proper way.