foating boxes

Discussion in 'Web Design and Development' started by ecwyatt, Jun 10, 2006.

  1. ecwyatt macrumors member

    Joined:
    Oct 10, 2005
    #1
    High everybody, I was hoping for some help.

    I am working on a educational/religious site (preliminary right now) for someone. The pages in this site will have articles, in these articles they would have footnotes or scripture refs. What the client wants is so when you have a footnote or scrip. ref a "pop-up" window appears when you rollover the link. The box would then dissapear on mouse out. It is similar to the way that comingsoon.net does there "inline" Ads.

    Any idea on where I can learn to do this or if any one has done it. and would like to share their secrets that would be really appreciated:D.

    I should metion that PHP or the likes is a no go for this persons site. If I possible I would like to stick with Javascript and or CSS (pure CSS would be great)

    Any help or feed back would be great.

    thanks guys and gals
     
  2. cookie1105 macrumors 6502

    Joined:
    Mar 27, 2006
    Location:
    London, UK
    #2
    It should be as simple as titling your links.
    <a href="example.html" title="your pop-up text">example link</a>

    You can then style the title tag using css.
     
  3. bwanac macrumors regular

    Joined:
    Mar 27, 2006
    #3
  4. thejadedmonkey macrumors 604

    thejadedmonkey

    Joined:
    May 28, 2005
    Location:
    Pa
    #4
    CSS Code
    Code:
    p a:link span{
    display:none;
    }
    
    p a:hover span{
    position:absolute;
    top:x px;
    left:y px;
    display:inline;
    }
    
    
    The HTML
    Code:
    <p><a href="#">This is a test of what will happen<span>this will pop up!</span></a></p>
    I think this will work...it's pure CSS, nice and simple. I'd do more styling to the span though, but that's the basics.
     
  5. Les Kern macrumors 68040

    Les Kern

    Joined:
    Apr 26, 2002
    Location:
    Alabama
    #5
    I don't use CSS, but rather do it the "easy" way (for my limited brain power!) using a standard floating window script.
    See:
    http://www.mchstech.net/
    where I make little pics appear in the laptop when mousing over the links on the left.
    The windows can have any shape or size and appear at any location you'd like on the page using x/y axis.
    Being "old school" here limits me.... anyone care to "learn me" CSS? :)
     

Share This Page