making one part of a mouseover bold w/o breaking it

Printable View

Feb 21st, 2002, 06:21 PM
msimmons

making one part of a mouseover bold w/o breaking it

ok... here's an odd one. I have a table of contents tree and I have the children change colors when I mouse over them... the child has a name and a date (so is on two lines) and I need to make the name bold but the date not. I have the whole chunk in the <a> tag so wether i mouseover the date or the name they both hilight but if i try to change the name to bold it "breaks" the mouseover. I added the ~>'s to show the carrage returns I added for display purposses, The section I need bold is in bold

Code:

<a href="#" onFocus="this.blur()" onClick="rateChange('5')" class="item" ~> id="item5"><img src="images/I.gif" align="absmiddle" border="0"> ~> <img src="images/I.gif" align="absmiddle" border="0">Winter ~> <img src="images/I.gif" align="absmiddle" border="0"> ~> <img src="images/L.gif" align="absmiddle" border="0">1/1/02-2/28/02</a> 

I have tried putting a span with style font-weight bolder and the old html b tags but both break it... any other ideas?
thanks in advance,
Michael
Feb 22nd, 2002, 10:41 AM
msimmons

(bump?)
Feb 22nd, 2002, 11:57 AM
Vincent Puglia

Hi Michael,

Could you provide a little more? Like the item style code? Is the href's appearance fixed? That is, are there always 2 images before the date? Did you try giving

Is this supposed to be crossBrowser (ie, nn4, nn6) or simply an IE thingy? If the latter you might try changing the innerHTML or innerText based on the location of the line break or the images.

Vinny
Feb 22nd, 2002, 12:15 PM
msimmons

Quote:

That is, are there always 2 images before the date?

yes... i'll try to describe it better... its a table of contents tree that has only 2 levels, parent and child... the images are the lines that connect them or the spaces to represent no lines (the * represent thise invisable images in this 'recration')

Code:

-Parent 1 . . . . child 1-1 . . . . date-date . . . . . . child 1- 2 . . . . date-date . . . -Parent 2 * . * . * . . . Child 2-1

So to answer the question the children are always in this patern and I determin the images needed via ASP when I build the page because the parents and childern are dependant on values from the database.

Quote:

Did you try giving

I think we lost something here... not sure what you mean.

Quote:

Is this supposed to be crossBrowser (ie, nn4, nn6) or simply an IE thingy? If the latter you might try changing the innerHTML or innerText based on the location of the line break or the images.

its IE5.5+ only... so by changing the inner text/or html you mean rather than a mouseover style change do a mouseover inner text change?
thanks
michael
Feb 22nd, 2002, 01:30 PM
Vincent Puglia

Hi Michael,

A quick & dirty solution:

function doit(hObj)
{
nLine = ' '
nLen = nLine.length;
h = hObj.innerHTML;
for (i = 0; i < h.length; i++)
{
brPos = nLine.indexOf(h.substr(i,nLen))
if (brPos != -1)
{
tmp = ''
tmp += h.substr(0,i);
tmp += ''
tmp += h.substr(i)
hObj.innerHTML = tmp
}
}

}
//-->
</script>
</head>
<body>
<a href="#" onmouseover='doit(this)'><img src='pic1.gif'>Winter 1/1/02-2/1/03</a>

Note: the "" is being placed at the beginning of the string. If you want it directly before the text "Winter", you need to loop backwards from the location of the ' ' or subtract the length of the text based on a table or switch statement.

Vinny
Feb 22nd, 2002, 03:15 PM
msimmons

That wasnt what I needed (i dont think) I think I am actualy trying to have it bold in the begining but this mouseover feature (i didnt write the mover but kept it cos it worked... may have to rewrite it later it my boss decided the bolding it really important. )But, the mouseover does it by element and throwing a b or span tag inside of the element makes it a new element (?) a thought I've been throwing around is to split the name and date into to and call them a & b and pass an itemnumber to the mouseover so if 1a is moused over then 1a and 1b are hilighted... but with a deadline 5 days away i have spent too much time going nowhere on this one.

Code:

function mOver() { var eSrc = window.event.srcElement ; if (eSrc.className == "item") { window.event.srcElement.className = "highlight"; } } function mOut() { var eSrc = window.event.srcElement ; if (eSrc.className == "highlight") { window.event.srcElement.className = "item"; } }

thanks again :)
michael