在悬停时使用XML内容更新DIV

Question

The concept of what I'm trying to do is fairly simple. I have a grid of company logos loaded through XSLT from an XML document, each with their own unique links to the company profiles.

I have a separate div on the page, essentially a "preview" box. What I want to do is this:

I roll over a logo, and it loads the name of the company and a short description into the preview div. This content is loaded through XML.

I have been messing around with the Jquery load() function, changing the target document to load on Hover—and it almost gets what I want, but it loads the whole target XML document into the div.

How can I separate this target XML data into separate divs? (which I have styled differently) I'd assume I would make use of Ajax in some way. I want to load the <name> node into the name_div, and the <desc> node into the description_div, and have them update on hover. Thanks in advance for the help!

Here are some examples of the code I'm working with:

portfolio.xml file (this file is my main page, displaying the grid and preview div, example uses 3 companies):

<portfolio>
    <company>
        <name>ABC Company</name>
        <sdesc>Consumer products</sdesc>
        <logo-thumb>abcco.jpg</logo-thumb>
        <link>abcco.xml</link>
    </company>

    <company>
        <name>DEF Company</name>
        <sdesc>Communications firm</sdesc>
        <logo-thumb>defco.jpg</logo-thumb>
        <link>defco.xml</link>
    </company>
    <company>
        <name>GHI Corporation</name>
        <sdesc>Electronic products</sdesc>
        <logo-thumb>ghico.jpg</logo-thumb>
        <link>ghico.xml</link>
    </company>
</portfolio>

The following XSLT displays that code on the page:

<xsl:for-each select="portfolio/company">
     <xsl:sort select="name" />

       <div class="invest-port-thumb">
         <a>
         <xsl:attribute name="href">
              <xsl:value-of select="link" />
         </xsl:attribute>

         <img>
         <xsl:attribute name="src">
              <xsl:value-of select="logo-thumb" />
         </xsl:attribute>
         </img>
         </a>
       </div>

</xsl:for-each>

This is the HTML structure of the "preview div":

<div id="preview">

<div id="preview-name"> [Name to display here] </div>
<div id="preview-desc"> [Description to display here] </div>

</div>

All 3 company logos are loaded into the page, each displaying a linked image loaded from . Desired effect is to on hover, display the contents of in the "preview-name" div, and the contents of in the "preview-desc" div.

---

Let me try to be a bit more specific. Here are some examples:

portfolio.xml file (this file is my main page, displaying the grid and preview div, example uses 3 companies):

<portfolio>
    <company>
        <name>ABC Company</name>
        <sdesc>Consumer products</sdesc>
        <logo-thumb>abcco.jpg</logo-thumb>
        <link>abcco.xml</link>
    </company>

    <company>
        <name>DEF Company</name>
        <sdesc>Communications firm</sdesc>
        <logo-thumb>defco.jpg</logo-thumb>
        <link>defco.xml</link>
    </company>
    <company>
        <name>GHI Corporation</name>
        <sdesc>Electronic products</sdesc>
        <logo-thumb>ghico.jpg</logo-thumb>
        <link>ghico.xml</link>
    </company>
</portfolio>

The following XSLT displays that code on the page:

<xsl:for-each select="portfolio/company">
     <xsl:sort select="name" />

       <div class="invest-port-thumb">
         <a>
         <xsl:attribute name="href">
              <xsl:value-of select="link" />
         </xsl:attribute>

         <img>
         <xsl:attribute name="src">
              <xsl:value-of select="logo-thumb" />
         </xsl:attribute>
         </img>
         </a>
       </div>

</xsl:for-each>

This is the HTML structure of the "preview div":

<div id="preview">

<div id="preview-name"> [Name to display here] </div>
<div id="preview-desc"> [Description to display here] </div>

</div>

All 3 company logos are loaded into the page, each displaying a linked image loaded from <logo-thumb> . Desired effect is to on hover, display the contents of <name> in the "preview-name" div, and the contents of <sdesc> in the "preview-desc" div.

Answer 1

Preserving the semantics of your page and the structure of your stylesheet, I try to do something like this:

<xsl:for-each select="portfolio/company"> 
     <xsl:sort select="name" /> 
     <div class="invest-port-thumb"> 
       <a href="{link}"><img src="{logo-thumb}" /></a>
       <div class="preview"> 
         <div class="preview-name"><xsl:value-of select="name" /></div> 
         <div class="preview-desc"><xsl:value-of select="sdesc" /></div> 
       </div> 
     </div> 
</xsl:for-each>

Then, in CSS stylesheet, you can use :hover pseudoclass and + combinator to show or hide preview. There ara some problems with crossbrowser compatibility. You should check Stu Nicholls site for better semantics and CSS examples.

Answer 2

Strictly speaking, you load() can take a selector after the url and only return a part of the ajax call.

So, something like:

$('#name_div').load('/path/yourXmlFile.xml name:first');

Now, making network calls every time you want to look at something is not very efficient. You probably want to cache the output into a variable.

Answer 3

I would feed the name and desc into the anchor as part of the anchor or it's child image, perhaps using the ALT tag for the name and REL tag for the description.

On hover over any anchor, I'll use jQuery [.attr()] to grab the attribute values containing the name and description you want and spit that into your respective target DIVs.

(See 'Recipe Categories' in http://www.masterchef.com.au/home.htm for similar example)