help with a div/span problem

[reproots]

hi there,

i am having trouble with a span command and would like to know if
someone can help me, or point me in the correct direction. basically, i

want a little textbox to pop up when a mouse rolls over text within a
paragraph (without breaking the text up). my knowledge is pretty basic,

but, by looking at other websites, i have been able to put together the

following javascript/CSS command. however, it only works with a DIV
command, not a SPAN -- and this is no good, since it breaks my
paragraph. i've included all the relevant bits below. the problematic
part can be found at the very bottom. i appreciate any help or ideas!


thanks.


in my CSS file:


/* pop-up text boxes */
..clDescriptionCont {
layer-background-color:#cccccc; visibility:hidden; z-index:200;
width:400px; position:absolute;


}


..clDescription {
width:400px; overflow:hidden; border: 1pt solid #999999;
padding:1pt; font-size:10.5pt; background-color:#cccccc;

layer-background-color:#cccccc; left:0px; top:0px;


}


..clLinksupscript { FONT-WEIGHT: normal; FONT-SIZE: 7pt }
..clCaption {
top:0px; width:400px; height:150px; FONT-WEIGHT: bold;
position:absolute; clip:rect(0px 400px 1em 0px); font-

size:11pt; background-color:#999999; layer-background-color:#999999;
left:0px;



}


in the web page header:

<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 &&
document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom &&
!this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom &&
!this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6
|| this.opera5)
return this


}


var bw=lib_bwcheck()

/* Variables to set: */
messages=new Array()
//Descriptions below
messages[9] = '<div class="clCaption">Grandmother</div><br> <u>Born</u>

in Poland.<br> <u>Emigrated</u> to New York City.'
fromX = 50 //How much from the actual mouse X should the description
box appear?
fromY = -20 //How much from the actual mouse Y should the description
box appear?


//To set the font size, font type, border color or remove the border or

whatever,
//change the clDescription class in the stylesheet.


//Makes crossbrowser object.
function makeObj(obj){
this.evnt=bw.dom?
document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layer­s[obj]:0;

if(!this.evnt) return false
this.css=bw.dom||bw.ie4?this.evnt.style:bw.ns4?this.evnt:0;
this.wref=bw.dom||bw.ie4?this.evnt:bw.ns4?this.css.document:0;


this.writeIt=b_writeIt;


return this



}


// A unit of measure that will be added when setting the position of a
layer.
var px = bw.ns4||window.opera?"":"px";

function b_writeIt(text){
if (bw.ns4){this.wref.write(text);this.wref.close()}
else this.wref.innerHTML = text



}


//Capturing mousemove
var descx = 0
var descy = 0
function popmousemove(e){descx=bw.ns4||bw.ns6?e.pageX:event.x;
descy=bw.ns4||bw.ns6?e.pageY:event.y}

var oDesc;
//Shows the messages
function popup(num){
if(oDesc){
oDesc.writeIt('<div
class="clDescription">'+messages[num]+'</div>')
if(bw.ie5||bw.ie6) descy = descy+document.body.scrollTop
oDesc.css.left = (descx+fromX)+px
oDesc.css.top = (descy+fromY)+px
oDesc.css.visibility = "visible"
}


}


//Hides it
function popout(){
if(oDesc) oDesc.css.visibility = "hidden"

}


function setPopup(){
if(bw.ns4)document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = popmousemove;
oDesc = new makeObj('divDescription')

}


</script>

in the webpage body (THE PROBLEMATIC DIV IN QUESTION IS THE FIRST ONE
BELOW, WHICH I'D LIKE TO TURN INTO A SPAN):


Grandmother</a> (<div id="divDescription"
class="clDescriptionCont"></div><span id="divLinks"
class="clLinksupscript"><a onmouseover="popup(9)"
onmouseout="popout()">roll here</a></span><script
type="text/javascript">setPopup()</script>)


(e-mail address removed)

 

[Adrienne Boswell]

i am having trouble with a span command and would like to know if
someone can help me, or point me in the correct direction. basically, i

SPAN is not a command, it is an element. Additionally, it is an inline
element, it is not a block element, so it does not create a line break, nor
have any margins. Of course, a span can be styled as such, but the best
thing would be to use the right element for the job, in this case, DIV.

 

[David Dorward]

hi there,

How many groups have you posted this in? You've had other answers in
comp.infosystems.www.authoring.stylesheets and comp.lang.javascript.

Please direct you attention to
http://oakroadsystems.com/genl/unice.htm#xpost

 

[Neredbojias]

To further the education of mankind, "(e-mail address removed)"

hi there,

i am having trouble with a span command and would like to know if
someone can help me, or point me in the correct direction. basically,
i

want a little textbox to pop up when a mouse rolls over text within a
paragraph (without breaking the text up). my knowledge is pretty
basic,

but, by looking at other websites, i have been able to put together
the

following javascript/CSS command. however, it only works with a DIV
command, not a SPAN -- and this is no good, since it breaks my
paragraph. i've included all the relevant bits below. the problematic
part can be found at the very bottom. i appreciate any help or ideas!

Why not do something like this?

<p>I have a dog. <span title="I named one Alan.">My dog has fleas.</span>
They are BIG fleas.