472,107 Members | 1,236 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

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

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

200 100+
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

<xsl:value-of select="Description" disable-output-escaping="yes" />
<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>

Please Assit, Regards
Aug 22 '08 #1
8 11948
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
200 100+
Thank You very much - i did not get it going though.

But Thank you for your help & kindness.

Aug 25 '08 #3
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
200 100+
It does not like the <td id="td_<xsl:value-of select='@name' />">
it moans about the dexadecimal.

Please Assist!

<xsl:value-of select="Description" disable-output-escaping="yes" />
<xsl:call-template name="CreateObject">
<xsl:with-param name="Object" select="." />
<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
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. }
  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
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
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
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

Post your reply

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

Similar topics

6 posts views Thread by liglin | last post: by
1 post views Thread by Yeah | last post: by
11 posts views Thread by Yeah | last post: by
3 posts views Thread by Ryan Liu | last post: by

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.