SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs down change background image in a div... on click?

    Hey,

    I am a website designer who is currently making a website for a client and need abit of javascript support. Bare in mind I have never really used javascript before but have a decent understanding of CSS and XHTML.

    Its like this....


    -------------------------------------

    DIV (id=header)



    Link 1 - Link 2 - Link 3


    -------------------------------------

    When they click "Link 1" i want the background image on div id="header" to be "image1.jpg"

    When they click "Link 2" i want the background image on div id="header" to be "image2.jpg"

    When they click "Link 3" i want the background image on div id="header" to be "image3.jpg"


    I downloaded scriptaculous javascript library and tried using the "effect.Morph" but this and all the other javascript libraries only seem to be able to fade the background if its a color like #ff0000 , but dont work with background images.

    So i need a way to get like a fade in fade out effect when the background image on the "header" div is changed (when they click on Link 1, Link 2 or Link 3).

    I really need help with this, and i have no clue, ive not been able to find any script of library that can do this .

    I will appriciate any help.

    Regards,
    Zain

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Well, for the more simple part. To switch the background at all, onclick, you can set up an onclick event for the div, and then when you need to activate it just change the elements style.backgroundImage to the new image.

    Now, for the fade. If you want it to just be an overall fade, you'll want to control the opacity over time, either increasing or decreasing it. Here is a quick page about that:
    http://www.quirksmode.org/js/opacity.html
    You'll likely have to create two divs, one inside of another, and control the opacity on the div itself. If you have the Javascript create that extra div (with the appendChild function) you can still keep really nice and clean XHTML.

    There are a number of ways to do it over time. The setInterval function will probably serve you well for this.

    That's the basic idea for it. If you need more detailed help, let me know.

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well thanks for the reply, your post has enlightened me to a few ideas on how i can do this now...

    I could have 3 divs like this:


    <div id="slide1">
    <div id="slide2">
    <div id="slide3">

    </div>
    </div>
    </div>


    I can have all 3 of those slides having 0% opacity using mootools javascript library. Then when one of my 3 links are clicked, it increases the opacity of the selected slide.

    Link1 - Link2 - Link3

    The only problem i would now have doing it this way, is if they went from slide1 to slide2 then to slide 3... so all 3 divs are 100% opacity right now... but then clicked the button for slide1 again... i dont know how i cud make slide2 and slide3 fade when slide1 is clicked.

    :S

    Any ideas?

  4. #4
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone know how to help me?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    You will want to make the opacity of one greater, and at the same time make the opacity of all the others smaller.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^^^

    yeah i know, but how do i do that??? can you point me in the direction of a tutorial? or help me yourself? it would be appriciated pmw57

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2007
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this script/tutorial might help you, it uses JQuery....http://www.javascriptkit.com/script/...ntviewer.shtml

  8. #8
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nicky77

    Cheers mate, from the look of the demo on that tutorial page its exactly! what im looking for.

    Thanks for posting it, im gonna give it a crack today


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
  •