Actualización de DIV con contenido XML en vuelo estacionario

El concepto de lo que estoy tratando de hacer es bastante simple. Tengo una grilla de logotypes de la empresa cargados a través de XSLT desde un documento XML, cada uno con sus propios enlaces únicos a los perfiles de la empresa.

Tengo un div por separado en la página, esencialmente un cuadro de "vista previa". Lo que quiero hacer es esto:

Doy la vuelta a un logotipo y carga el nombre de la empresa y una breve descripción en la vista previa div. Este contenido se carga a través de XML.

He estado jugando con la function Jquery load (), cambiando el documento de destino para cargarlo en Hover, y casi obtiene lo que quiero, pero carga todo el documento XML de destino en el div.

¿Cómo puedo separar estos datos XML objective en divs separados? (que he diseñado de manera diferente) asumiría que haría uso de Ajax de alguna manera. Quiero cargar el nodo <name> en el nombre_div, y el nodo <desc> en el description_div, y hacer que se actualicen al pasar el mouse. Gracias de antemano por la ayuda!

Aquí hay algunos ejemplos del código con el que estoy trabajando:

file portfolio.xml (este file es mi página principal, muestra la cuadrícula y div de vista previa, el ejemplo usa 3 compañías):

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

El siguiente XSLT muestra ese código en la página:

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

Esta es la estructura HTML de la "vista previa div":

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

Los 3 logotypes de la empresa se cargan en la página y cada uno muestra una image vinculada cargada desde. El efecto deseado es al pasar el cursor, mostrar los contenidos en el div "nombre de vista previa" y el contenido de en el div "preview-desc".


Déjame intentar ser un poco más específico. Aquí hay unos ejemplos:

file portfolio.xml (este file es mi página principal, muestra la cuadrícula y div de vista previa, el ejemplo usa 3 compañías):

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

El siguiente XSLT muestra ese código en la página:

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

Esta es la estructura HTML de la "vista previa div":

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

Los 3 logotypes de la empresa se cargan en la página, y cada uno muestra una image vinculada cargada desde <logo-thumb> . El efecto deseado es al pasar el cursor, mostrar el contenido de <name> en el div "nombre de vista previa" y el contenido de <sdesc> en el div "preview-desc".

Preservando la semántica de su página y la estructura de su hoja de estilo, trato de hacer algo como esto:

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

Luego, en la hoja de styles CSS, puede usar :hover pseudoclass y + combinator para mostrar u ocultar la vista previa. Hay algunos problemas con la compatibilidad de browser cruzado. Debes consultar el sitio de Stu Nicholls para get una mejor semántica y ejemplos de CSS.

Estrictamente hablando, load() puede tomar un selector después de la url y solo devolver una parte de la llamada ajax.

Entonces, algo como:

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

Ahora, hacer llamadas de networking cada vez que quiera ver algo no es muy eficiente. Probablemente quiera almacenar en caching el resultado en una variable.

Alimentaré el nombre y el desc en el ancla como parte del ancla o de su image infantil, quizás usando la label ALT para el nombre y la label REL para la descripción.

Al pasar el puntero sobre cualquier delimitador, utilizaré jQuery [.attr ()] para get los valores de los attributes que contienen el nombre y la descripción que desea y escupirlos en sus respectivos DIV de destino.

(Consulte 'Categorías de recetas' en http://www.masterchef.com.au/home.htm para get un ejemplo similar)