SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Apply IMG Style to JavaScript Slide Show

    Hello

    I am trying to develop a JavaScript slide show with the fading effect (it is an IE only effect). I have everything working except I also want to put a border around the slide show. The slide show is actually just and img with a filter effect so I think this would be possible.

    Here is what I have.

    Code:
    if (document.all)
    {
       document.images.SlideShow.style.filter="blendTrans(duration=2)"     
       document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
       document.images.SlideShow.filters.blendTrans.Apply()      
    }
    
    Other code that gets the image source then changes the source…
    
    document.images.SlideShow.src = new_image;
    
    if (document.all)
    {
       document.images.SlideShow.filters.blendTrans.Play()
    }
    All of this works very well. Now I want to apply the image border. Here is what I have tried and none of them work.

    Code:
    document.images.SlideShow.style = "border-color: #000000";
    Code:
    document.images.SlideShow.style.border-color = "#000000";
    Code:
    document.images.SlideShow.style.borderColor = "#000000";
    Does someone know how I could get this to work?

    Any suggestions would be appreciated.

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TryingToLearn View Post
    Code:
    if (document.all)
    That test does not do what you think. Other browsers will pass that test, possibly including versions of I.E. that don't support what happens next.
    Code:
    if( typeof document.images.SlideShow.filters != 'undefined' )
    All of this works very well. Now I want to apply the image border.
    Have you set the other border properties previously?
    Try:
    Code:
    document.images.SlideShow.style.border = "solid 4px #000000"
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The document.images.SlideShow.style.border = "solid 4px #000000" worked perfect!!! Thank you very much.

    To be honest, I thought this would prevent code from going down this path for older browsers but to be even more honest, I am not sure what it does for me any more. I just have old code that has it in it and when I copy and paste, I just brought it over.

    Could you explain a little more in why I should not be using it? Is it because I can reference everything by Id now… such as getElementById?

    Also, is this the code I should be using now?

    if( typeof document.images.SlideShow.filters != 'undefined' )


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
  •