help with a div/span problem

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?thi s.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>)


repro... (AT) gmail (DOT) com

reproots (AT) gmail (DOT) com wrote:

i am having trouble with a span command

There are no commands in HTML.

i want a little textbox to pop up when a mouse rolls over text within a
paragraph (without breaking the text up)

<p> foo foo <span title="foo">bar</span> foo foo </p>

.... although a span might not be the right choice of element. It depends
what type of information you are conveying.


--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Add this line of CSS:

..clDescriptionCont {display:block;}

That will treat an inline element, in this case a <span> tag, as if it
were a block element, like a <div>.

But David has a very valid point, the tags <span> and <div> have no
semantic meaning in HTML markup, and presumably you want to create an
effect based on a portion of your text that has a specific meaning. You
have to ask yourself if that text might be better represented using a
different HTML tag (you can still create the same popup effect with
other tags), one which is better suited to the text you're
highlighting.

Good luck
Den


reproots (AT) gmail (DOT) com wrote:

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?thi s.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>)


repro... (AT) gmail (DOT) com