The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> image map with show/hide layer - Firefox problem
unata
post Mar 26 2007, 08:54 PM
Post #1





Group: Members
Posts: 4
Joined: 26-March 07
Member No.: 2,341



Hi, there. I am new to the forum and hope this is an easy question!

I have an image map with absolute divs that show up on the hot spot rolloves. (Javascript show/hide layer function). This is not working in Firefox at all.

http://www.clients.idea-bureau.com/fortis/..._bill/bill.html.

I've never done tooltips thing on a image map and am hoping this is an easy solve, sort of "place your divs after the image map" kind of thing!

Thank you!

Natalia.

This post has been edited by unata: Mar 26 2007, 09:23 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Effovex
post Mar 26 2007, 09:50 PM
Post #2


Serious Coder
*****

Group: Members
Posts: 251
Joined: 6-January 07
From: Sherbrooke, Qc, Canada
Member No.: 1,477



Use document.getElementByID instead of document.all. It's the standard (DOM) way to do this and should work in every standard-supporting browser. You'd lose IE4 support so if you really feel like it I guess you can use document.all in addition.

document.layers is what? Netscape 4? And document.all is IE4. That's 10 years old Javascript. You might want to find newer ressources (I like How to create but there are many others. Just google for DOM scripting)

This post has been edited by Effovex: Mar 26 2007, 09:54 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
unata
post Mar 27 2007, 09:54 AM
Post #3





Group: Members
Posts: 4
Joined: 26-March 07
Member No.: 2,341



That did help, I got my long-lost rollovers in Firefox, thank you!

They are not popping up in the right place though. The parent table's position is relative to the bigger table

position: relative;
left: 5px;
top: 5px;

and the divs are absolute divs.

#brightideas{
left: 285px;
top: 478px;
width: 164px;
height: 69px;
visibility: hidden;
position: absolute;
}



Is there another trick I don't know?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Effovex
post Mar 27 2007, 10:16 AM
Post #4


Serious Coder
*****

Group: Members
Posts: 251
Joined: 6-January 07
From: Sherbrooke, Qc, Canada
Member No.: 1,477



Position the object in relation to the mouse as part of the getElementByID function. I think it would look like that:
CODE

    if (document.getElementById && !document.all) {
        maxwell_smart = document.getElementById(layer_ref);
        maxwell_smart.style.visibility = state;
        maxwell_smart.style.top = event.clientY;
        maxwell_smart.style.left = event.clientX;
    }


I didn't test it because I hate testing in Firefox.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
unata
post Mar 27 2007, 11:16 AM
Post #5





Group: Members
Posts: 4
Joined: 26-March 07
Member No.: 2,341



I somehow think that it's CSS problem - will keep looking for hacks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
unata
post Mar 27 2007, 11:32 AM
Post #6





Group: Members
Posts: 4
Joined: 26-March 07
Member No.: 2,341



got it fixed - replaced the container table (that had position:relative) with container div, again position:relative.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 05:48 AM