473,382 Members | 1,583 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,382 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 12328
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...
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...
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
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.