SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image scrolling with text to follow- how? ideas?

    Hi there,
    currently I am trying to accomplish something like this:

    www.ibm.com where the text follows the image.
    any thoughts on how to go about this?

    i am using jquery on my site.
    I have already got the image scrolling working, but having issues with the text to follow - any help and direction would be appreciated.

    D

  2. #2
    SitePoint Zealot Amit Yaron's Avatar
    Join Date
    Jan 2011
    Location
    Hod Haharon, Israel
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wrap your picture and text in DIV elements. If you want something like the DIV that pops up, add the style attribute "display: none;" and "z-index: 1" (bigger than the default).
    Create a mouse over event for your image, which will set the display to block;
    i.e.
    Code:
    $('#pic').bind('mouseover', function(){
      $('#popupDiv').css('display', 'block');
    });
    Create a mouse out event for the popup div:
    Code:
    $('#popupDiv').bind('mouseout', function(){
    $('#popupDiv').css('display', 'none');
    });

  3. #3
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI Amit,
    thank you for the response... the popup is not what i am after though.

    what i am trying to see how to do is have the text follow the image that scrolls in.

    let me know your thoughts..
    thank you again
    D

  4. #4
    SitePoint Zealot Amit Yaron's Avatar
    Join Date
    Jan 2011
    Location
    Hod Haharon, Israel
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I see it now. It is an unordered list (UL element), with 3 list items(LI). Each time one of them has the style attribute 'display' set to 'inline', and the rest are 'none'. The opacity is changed as well.


Tags for this Thread

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
  •