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

Follow Post Reply

11948

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

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

 <td>

  <xsl:value-of select="Description" disable-output-escaping="yes" />

</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='onmousemover'>document.getElementById("td_<xsl:value-of select='@name' />").style.color = 'red';</xsl:attribute>

ttip_<xsl:value-of select='@name' />.src = "images/Infobig.jpg";//this works

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

  </xsl:element>

</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

 function redOnHover() {

  var pics = document.getElementsByTagName("img");

  for (var i=0; i<pics.length; i++) {

    var prnt = pics[i].parentNode;

    if (prnt.nodeName == "td") { // every img w/ parent td

// maybe you have to tweak that condition acoording to your html

      prnt.style.color = "red";

    }

  }

}
 
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

       & lt;td id="td_<xsl:value-of select='@name' />"& gt;

        <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='onmousemover'>document.getElementById("td_<xsl:value-of select='@name' />").style.color = 'red';</xsl:attribute>

      ttip_<xsl:value-of select='@name' />.src = "images/Infobig.jpg";//this works

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

        </xsl:element>

      </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:
<td id="td_<xsl:value-of select='@name' />">

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

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

Post your reply

Similar topics