Floating window

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I came across a website that had a floating window everytime you
hovered over a particular link.  I was wondering how this worked.  I
saw it on Nero's website also, before they revamped their site.
Anyway, to get a look at the effect, go to the following link,
http://www.ed2klinks.com/index1.php and hover over one of the



Re: Floating window

tballfst@pacbell.net says...
Quoted text here. Click to load it

It's all in the source code.  If that's too complex for you at the
moment try http://www.bosrup.com/web/overlib /
Hywel     I do not eat quiche
http://hyweljenkins.co.uk /

Re: Floating window

Quoted text here. Click to load it

 overlib is great but trying to understand
http://www.ed2klinks.com/index1.php the relevant mouseover code is in lines
like this:
       onmouseover="dif(1, '13087','<table >........   table>')"

I have searched for  but cannot find anything about  dif( ).
Can you explain it or point me to an explanation?

Re: Floating window

Quoted text here. Click to load it

They are doing it all with a hidden absolutely positioned div called
overDiv. The dif() function causes all that HTML in the last parameter to be
inserted into the div with a
document.getElementById("overDiv").innerHTML = txt
(in a function called layerWrite, whatever a layer is, IIRC it is something
Netscape3 invented and then dropped six months later).
The div is then made visible.

Then there is some mouse move stuff to make the div follow the mouse around.

Finally there is an onMouseOut handler to make the div hidden again.

The javascript lives here:

Look at only as an educational exercise only, it's not very good code. There
is lots of browser sniffing involved where there should be functionality
checking. Rather bloated for what it does too. Such skulduggery can be now
done quite nicely with a couple of lines of CSS :-)


Re: Floating window

rf wrote:

Quoted text here. Click to load it

Hmmm. I believe that innerHTML (along with innerText, outerHTML, and
outerText) are all Microsoft-specific and are not part of the W3C Document
Object Model. You would need to use a standards-compliant method of
changing text in an object in order to be cross-browser capable. You may
want to start your search for information on this topic at: http:/

Quoted text here. Click to load it


Re: Floating window

George Self wrote:

Quoted text here. Click to load it

They are, but ironically they have better cross-browser support than most
of the DOM-compliant alternatives :-(

Maybe do a test like:

if (document.getElementById('myelement').innerHTML) {
    // do stuff in an IE fashion
} else {
    // do stuff in a DOM fashion    

Dupication, yuk. But if you want something that will work in
DOM-compatible browsers *and* most existing browsers, this seems the best
way to do it.

Of course, what I'd normally do is to do it the DOM way and let other
browsers go to hell. If your page is well-written it will degrade well
when JavaScript doesn't work.

Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

Site Timeline