Page 1 of 2 12 LastLast
Results 1 to 10 of 12

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

  1. #1
    Join Date
    Jul 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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!


  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Jul 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default translucent

    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)


  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    Jul 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!


  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Why not just make the image the background, possibly with lowered opacity?
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  7. #7
    Join Date
    Jul 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    557
    Thanks
    8
    Thanked 66 Times in 66 Posts

    Default

    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:

    Code:
    <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.

  9. #9
    Join Date
    Jul 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Replace this with the URL: **url of bg image**
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •