Translucent pic, Fade in & Fade out pic w/ text

[cbg]

Hello,

I am working on my website. I want to make a pictures or pictures translucent. I am a TRUE novice. I need to understand how to upload the pic to the code given. I am also exploring the fade in fade out option (which again I don't know how to upload the pic or for that matter where to put the text).

Please help!

BTW- I will need for this process to be broken down step by step please!

:confused::confused::confused::confused:

[djr33]

Fade In and Fade Out sound like dynamic effects to me-- do you need there to be movement or just having a semi-transparent image on the page?

There are three ways I can think of:
1. Use CSS transparency effects. Not compatible with every browser, but the standard method should work most of the time and if not you could always use some browser-specific workarounds, like filters for older versions of IE.
2. Use a photo-editing program to generate the effect. This can either be a fully opaque image that is "faded" (merged with a color) or you could create a .png file with a semi-transparent alpha channel. Alpha channels in PNGs don't work in older versions of IE, but most of the rest of the time they do.
3. Use the image as a background and place something semi-transparent on top. Only in rare cases would this be less work than the other methods, but it is a realistic option if for some reason it's helpful.

Which of those sounds good? If you search (google, etc) for any terms in my description above that you don't understand, you will probably find plenty of information. Once you know a bit more about how you'd like to approach this, post again and we'll try to help some more.

[cbg]

Thank you for responding.

Okay what I am trying to do is have translucent pic on one page and the fade in and fade out pic w/ text on a different page. Is this possible? I mean even for me to do?

I have more questions on other functions but I don't want to overwhelm anybody (lol)

:confused:

[djr33]

Can you explain more? The image is originally translucent (it's better to say "semi-transparent" because that is what it will be in technical terms), then it fades out (becomes completely transparent) and is replaced with a new page?
First, you can't change pages like that. You can use Flash or another plugin to do a complicated effect and load new data, but you can't load a new HTML page as a fade. The browser decides how to do that, and that's just by changing what it displays (no transition) as far as I know in every browser.
You could get into AJAX, a work-around for this sort of problem where you can actually load new data without reloading the page, but that is complicated.
Or you could use Javascript only and fade between elements that already exist on the page. In other words, they load with the page in the first place, and some of them may be hidden from view. All changes are then controlled through Javascript.

Please give a full description and which options suggested above sound best. If you want someone to design this for you, consider the paid help forum here. If you want to try yourself, it's best to start with the small pieces and only start to put it together once you actually have something to put together. Of course it's good to plan ahead too but if you're experimenting sometimes trying to do it all at once can slow you down. What parts do you need, and why? And after you know that, get them all ready, then put it together.

[cbg]

I think I understand what you are saying.

So is it possible to make a pic translucent then upload it to the website? That way the words are in front of the pic. Maybe this can be better explained if I give a link to my website (should've thought of that before) http://www.chesterbillinggroup.com

Okay so on the "About us" page I wanted a pic (or if possible 2 pics) translucent.

I haven't decided which of the other pages I want to have fade in/ fade out text.

BTW- Thanks for your patience!

:confused:

[djr33]

Why not just make the image the background, possibly with lowered opacity?

[cbg]

That's a great idea!

I noticed that there is a code for a watermark feature. i would like to add the feature on the "about us" page of my website. Here's my question: how or what do I add to show my pic as the watermark in the code? 2nd Question: can I do more than one pic as a watermark image?

Thanks

[JShor]

Adding a watermark is the same thing as adding a background image. You cannot have multiple background images in standard HTML/CSS. To add a background image to the body, use this:



<style type="text/css">
body {
background: url('**url of bg image**');
background-position: center center;
background-repeat: no-repeat;
}
</style>


This would put your watermark in the middle of your page and it will not repeat.

[cbg]

I like that!

Okay, so at the risk of sounding really stupid, Where it says "URL", am I supposed to type the URL where the pic that I want to use is located or type my URL? That's my confusion!

Thanks

[djr33]

Replace this with the URL: **url of bg image**

[wodeln]

<style type="text/css">
.alpha{filter:alpha(opacity=30);width:400px;}
</style>

<div style="position:relative" width="1024" height="768">
<img src="My Pictures/q-1.jpg" class="alpha"/>
</div>


http://hellocg.com/jaso.jpghttp://hellocg.com/nva.jpghttp://hellocg.com/vghn.jpg

[cbg]

thank u guys so much!

btw- i am trying the dynamic fader, in the third step i keep encountering an error. here is the full code (i got it from the scroller page)

<style TYPE="text/css">
<!--
.TextScrollStyle {
visibility:hidden;
font-family:Verdana;
font-weight:bold;
text-align:center;
padding:0;
margin:0;
width:100%;
overflow:hidden;
}

-->
</style>
<script language="JavaScript1.2">

/*
Dynamic Fader Script (updated: 00/08/05)
Created and submitted by Nicholas Poh (hwinmain@yahoo.com) to Dynamicdrive.com
Key modifications by Dynamic Drive for stability/ efficiency in NS
For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com
*/

//1) Configure messages:
var TS_message = new Array();
TS_message[0] = '<div align="left">Hello there</div>';
TS_message[1] = '<div align="left">Wow... hope you like it!</div>';
TS_message[2] = '<div align="left">Presented by <A HREF="http://dynamicdrive.com">Dynamicdrive.com</A></div>';

//2) Configure fader width and colors:
var TS_scrollwidth=400 //configure fader width
var TS_colorFG = 0x000000; // Text color
var TS_colorBG = 0xFFFFFF; //bgColor

// uncomment any value you wanted to change
//var TS_ymax = 50; // How many pixel to move
//var TS_ystep = 1; // 1 or -1 only (Scroll direction)
//var TS_speed = 7; // The smaller the value the faster
//var TS_pause = 110; // Pause time(milisecond) between messages
var TS_fadestep= 20; // Steps to fade in and out

if (document.all)
document.write('<style>#containerarea{width:'+TS_scrollwidth+'}</style>')
</script>

<DIV id="containerarea">
<SCRIPT LANGUAGE="JavaScript1.2" SRC="textfader.js"></SCRIPT>
</DIV>

then on step 3 i am supposed to be able to download the textfader.js file to upload on my web page