473,324 Members | 2,473 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

change the text color of (<xsl:value-of select="Description")

200 100+
Hi,
I would like to change the text color of (<xsl:value-of select="Description") onmouseover of image.
the javascript works, it's just that i can seem to get the name correct

<td>
<xsl:value-of select="Description" disable-output-escaping="yes" />
</td>
<td>
<xsl:element name="asp:image">
<xsl:attribute name='id'>ttip_<xsl:value-of select='@name' /></xsl:attribute>
<xsl:attribute name='runat'>server</xsl:attribute>
<xsl:attribute name='onmousemove'>
<xsl:value-of select="Description" />.style.color = 'red'; //not ttip_<xsl:value-of select='@name' />.src = "images/Infobig.jpg";//this works

<xsl:attribute name='class'>main</xsl:attribute>
</xsl:element>

Please Assit, Regards
Aug 22 '08 #1
8 12313
Dormilich
8,658 Expert Mod 8TB
you need to specify the DOM path of the 'description' element. I recommend something with getElementById() otherwise you have to walk to the DOM tree all the way to you 'description' element.
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('descriptionID').style.color = 'red';
Aug 24 '08 #2
ismailc
200 100+
Thank You very much - i did not get it going though.

But Thank you for your help & kindness.

Regards
Aug 25 '08 #3
Dormilich
8,658 Expert Mod 8TB
the working code should probably look like this:
Expand|Select|Wrap|Line Numbers
  1. <td>
  2.   <xsl:value-of select="Description" disable-output-escaping="yes" />
  3. </td>
  4. <td id="td_<xsl:value-of select='@name' />">
  5.   <xsl:element name="asp:image">
  6.     <xsl:attribute name='id'>ttip_<xsl:value-of select='@name' /></xsl:attribute>
  7.     <xsl:attribute name='runat'>server</xsl:attribute>
  8.     <xsl:attribute name='onmousemover'>document.getElementById("td_<xsl:value-of select='@name' />").style.color = 'red';</xsl:attribute>
  9. ttip_<xsl:value-of select='@name' />.src = "images/Infobig.jpg";//this works
  10.     <xsl:attribute name='class'>main</xsl:attribute>
  11.   </xsl:element>
  12. </td>
I suppose <xsl:value-of select="Description" /> outputs text (and therefore your onmouseover event can not work, because you apply it to a string not a DOM object).
Of course you can define the name of the id the way you like best.
Aug 25 '08 #4
ismailc
200 100+
It does not like the <td id="td_<xsl:value-of select='@name' />">
it moans about the dexadecimal.

Please Assist!

<td>
<xsl:value-of select="Description" disable-output-escaping="yes" />
</td>
<td>
<xsl:call-template name="CreateObject">
<xsl:with-param name="Object" select="." />
</xsl:call-template>
</td>
<td id="td_<xsl:value-of select='@name' />">
<xsl:element name="asp:image">
<xsl:attribute name='id'>ttip_<xsl:value-of select='@name' /></xsl:attribute>
<xsl:attribute name='runat'>server</xsl:attribute>
<xsl:attribute name='style'>cursor:default</xsl:attribute>
<xsl:attribute name='onmousemove'>document.getElementById("<xsl:v alue-
of select='@description' />").style.color = 'red';</xsl:attribute>
<xsl:attribute name='onmouseout'>ttip_<xsl:value-of select='@name' />.src
= "images/Info4.jpg"; hideHover()</xsl:attribute>
<xsl:attribute name='class'>main</xsl:attribute></xsl:element>
Aug 25 '08 #5
Dormilich
8,658 Expert Mod 8TB
It does not like the <td id="td_<xsl:value-of select='@name' />">
it moans about the dexadecimal.
er, what hexadecimal?

anyway, you only have to make sure that the id given in the <td> matches the id used in document.getElementById(). my suggestion was only out-of-the-blue, because I don't know the xml. if there's only one image, you can use a fixed string like "imgHover", otherwise you might try an <xsl:param> and if even that fails, maybe you have to hardcode the <td> with xsl.

a totally different (though in my opinion more elegent) solution would be using an external javascript file like (include it in the <head> section)
Expand|Select|Wrap|Line Numbers
  1. function redOnHover() {
  2.   var pics = document.getElementsByTagName("img");
  3.   for (var i=0; i<pics.length; i++) {
  4.     var prnt = pics[i].parentNode;
  5.     if (prnt.nodeName == "td") { // every img w/ parent td
  6. // maybe you have to tweak that condition acoording to your html
  7.       prnt.style.color = "red";
  8.     }
  9.   }
  10. }
  11.  
  12. window.addEventListener("mouseover", redOnHover, false); // DOM syntax, for IE use attachEvent()
advantage, you don't have to bother about the ids and the onevent attribute.

advice: if you supply error messages it is easier for us to find the cause
Aug 25 '08 #6
Dormilich
8,658 Expert Mod 8TB
I have to make some corretions to my code (post #4). of cause you have to apply the id where you want the text colour changed ... (well, you see I'm far from perfect).
the error from post #5 comes (I think) from a xml syntax violation (no tags inside a tag) therefore escaping the < and > should do the job.
Expand|Select|Wrap|Line Numbers
  1.       & lt;td id="td_<xsl:value-of select='@name' />"& gt;
  2.         <xsl:value-of select="Description" disable-output-escaping="yes" />
  3.       </td>
  4.       <td>
  5.         <xsl:element name="asp:image">
  6.           <xsl:attribute name='id'>ttip_<xsl:value-of select='@name' /></xsl:attribute>
  7.           <xsl:attribute name='runat'>server</xsl:attribute>
  8.           <xsl:attribute name='onmousemover'>document.getElementById("td_<xsl:value-of select='@name' />").style.color = 'red';</xsl:attribute>
  9.       ttip_<xsl:value-of select='@name' />.src = "images/Infobig.jpg";//this works
  10.           <xsl:attribute name='class'>main</xsl:attribute>
  11.         </xsl:element>
  12.       </td>
as for the javascript function (post #6), the DOM expressions inside the for loop strongly depends on how the html will look eventually. if you could provide that, I might be able to even reduce it to a CSS problem (essentially, put text and image in a div and apply a :hover pseudo class to it).
Aug 25 '08 #7
ismailc
200 100+
Wow Thanks for your kindness & effort...
I't works:)

I initially struggled: & lt;td id="td_<xsl:value-of select='@name' />"& gt;
saw it somewhere & then it worked:
&lt;td id="td_<xsl:value-of select='@name' />"&gt;


Once again THANK YOU VERY MUCH.... - i was not kidding when i said i don't know xslt

Thank you for your patience in assisting me...
Aug 26 '08 #8
Dormilich
8,658 Expert Mod 8TB
I'm glad I could help.

nevertheless, if it would be possible to replace it by a CSS approach, I'd consider that far more elegant (my personal opinion).
Aug 26 '08 #9

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: Matt Adams | last post by:
As well known I could specify the text color in the body tag like: <BODY TEXT=WHITE LINK=WHITE VLINK=RED ALINK=WHITE> What I want to achieve now is that always (!) the text of the last visited...
6
by: liglin | last post by:
The following script changes the color of text with the onmousover event. How can it be modified so it changes the text when the button is clicked? I'd want to avoid layers or CSS. Thanks,...
5
by: Matt | last post by:
I created 3 hyperlinks, when the user click each link, it will change the color of the text of a link. For example, when user clicks Link1, text Link1 will become red color, but Link2 and Link3...
5
by: AFN | last post by:
I'm trying to set a submit button to change text and color when clicked. Like saying "please wait" instead of "submit" and then changing the background color and text color. All works, except for...
7
by: kroger | last post by:
Hi, one part of my website is at: http://www.psych.nmsu.edu/~jkroger/lab/undergrads.html I want to make the date at the top right darker blue. But when I do that, all the light blue text...
1
by: Yeah | last post by:
I have a multiple choice quiz where I would like to use CSS to change the color of the answers upon clicking them. I would like to present the right and wrong answers up front, rather than direct...
11
by: Yeah | last post by:
I have a multiple choice quiz where I would like to use CSS to change the color of the answers upon clicking them. I would like to present the right and wrong answers up front, rather than direct...
3
by: Ryan Liu | last post by:
Hi, I want to change keywords text color in a text editor. I select RichTextBox and use its Select() method to select keywords line by line, one by one, then change its color. ...
14
by: irfi | last post by:
Hi, Please anyone out there can help me!!!!!!!!!!!! I am building a Data Report in vb6. To make it simple there a three text box on the Report. First for (Date), Second for (In-Time) and the third...
10
by: apparker | last post by:
I'm creating a new GUI for a program and it is for a medical exam. There are so many different things to ask someone during a history it wastes too much space to make checkboxes for everything so I...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.