Image Map - Tool Tip

[wrx]

While using the "Title" attribute for an area within an image map as the tool tip I noticed a delay in the display of the title on the screen.

Any way to speed this up so it is instant ? Should I not use the title attribute for this and try JS to control the mouseover event and create a tool tip ?

Just looking to speed it up as i've seen it done just not sure the most efficient way to do it .

thanks in advance

[Zeggy]

Nope, that's something your browser controls.

You can use javascript to create your own tooltips.

There's a really nice one called wz_tooltip but apparently the website for it is gone.

[wrx]

im trying a script now to see if i get the desired effect..

[a_bertrand]

I made my own JS tooltips but you may use some like this one I believe:

http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/

[wrx]

I made my own JS tooltips but you may use some like this one I believe:

http://sixrevisions.com/tutorials/javasc…script_tooltip/

that's the one im working with and it works great , crossbrowser and indeed lightweight weighing in at 2k.

[Paddy]

Might be wrong but y use JS when you can use something like this

 

a.Tooltip { 
position : relative; 
z-index : 24; 
background-color : #555; 
color : #000; 
text-decoration : none; 
} 
a.Tooltip:hover { 
z-index : 25; 
} 
a.Tooltip span { 
display : none; 
} 
a.Tooltip:hover span { 
display : block; 
position : absolute; 
top : 2em; 
left : 2em; 
width : 14em; 
border : 1px solid #333; 
background-color : #555; 
color : #000; 
text-align : center; 
}

 

i would like to know what the advantage is in using JS rather then CSS

[a_bertrand]

css is not fully cross browser and you can't do all you want, for example no images, no links nor decide when exactly it appears.

[Paddy]

ah yeah the part where you say "no links nor decide when exactly it appears." i understand

but what about the images? in what sense?

[wrx]

images should'nt be a problem either within the css for the tooltip

 

a.Tooltip:hover span.message { 
display : block; 
position : absolute; 
top : 2em; 
left : 2em; 
width : 14em; 
border : 1px solid #333; 
background: url(backgroundimage.gif) repeat bottom;
color : #000; 
text-align : center; 
}

 

or within the span when called

 

<span class="message">Sample message with a small image <img src=image.gif  border=0 
width=32 height=32>in between this text.</span>

[Paddy]

Yeah that's what i thought to be honest, that's why i asked in what sense in my post to a_bertrand

[wrx]

Yea i don't see why it could'nt be done like you showed with CSS.I was looking for any ideas on how to solve the speed issue and what i came up with actually uses a combination of JS and mostly CSS.

Downtown Image Map w/ Tooltip

-----------------------------------------

With what i was trying to do the JS gave me the control with timing on mouse over and mouse out(delay) events.

I'm sure it could be done a lot of different ways.

 

thanks for the replies

 

WRX