Aspert Posted January 14, 2007 Share Posted January 14, 2007 i've just discovered xml en xslt, and made the following xml (thanks to a lot of help from the w3schools tutorials!): <?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet type="text/xsl" href="template_aangeboden_engels.xsl"?><aangeboden> <horse> <pedigree>Karandasj x Pilot x Salute</pedigree> <naam>Parandass</naam> <geboortedatum>9-apr-1997</geboortedatum> <kleur>Zwart</kleur> <geslacht>Ruin</geslacht> <stokmaat>1,66</stokmaat> <niveau>1,20</niveau> <omschrijving>Zeer fijn te rijden. Ideaal amateurpaard. Voorzichtig, vermogen en springt met goede techniek. Klinisch en röntgenologisch 100%.</omschrijving> <foto1>../images/jadorijke.jpg</foto1> <foto2>../images/larisa.jpg</foto2> <foto3>../images/Lavito.jpg</foto3> <foto4>../images/pixel.gif</foto4> <film>Lavito.AVI</film> </horse> <horse> <pedigree>Laptop x Grannus x Cill xx</pedigree> <naam>La Dolce Vita</naam> <geboortedatum>15-apr-2001</geboortedatum> <kleur>Donkerbruin</kleur> <geslacht>Merrie</geslacht> <stokmaat>1,62</stokmaat> <niveau>1,10</niveau> <omschrijving>Zeer fijn te rijden. Maakt wissels, is zeer voorzichtig en springt met goede techniek. Klinisch en röntgenologisch 100%.</omschrijving> <foto1>../images/Lavito.jpg</foto1> <foto2>../images/jadorijke.jpg</foto2> <foto3>../images/larisa.jpg</foto3> <foto4>../images/larisa.jpg</foto4> <film>Lavito.AVI</film> </horse> <horse> <pedigree>Concorde x Indoctro</pedigree> <naam>Terlette</naam> <geboortedatum>17-apr-2000</geboortedatum> <kleur>Bruin</kleur> <geslacht>Merrie</geslacht> <stokmaat>1,66</stokmaat> <niveau>1,20</niveau> <omschrijving>Springt zeer fijn. Terlette komt uit een bewezen stam waar meerdere internationale springpaarden uit komen. Zeer patente merrie waar wij veel verwachtingen van hebben voor de toekomst. Klinisch en röntgenologisch 100%.</omschrijving> <foto1>../images/larisa.jpg</foto1> <foto2>../images/Lavito.jpg</foto2> <foto3>../images/pixel.gif</foto3> <foto4>../images/pixel.gif</foto4> <film>Lavito.AVI</film> </horse> <horse> <pedigree>Karandasj x Pilot x Salute</pedigree> <naam>Parandass</naam> <geboortedatum>9-apr-1997</geboortedatum> <kleur>Zwart</kleur> <geslacht>Ruin</geslacht> <stokmaat>1,66</stokmaat> <niveau>1,20</niveau> <omschrijving>Zeer fijn te rijden. Ideaal amateurpaard. Voorzichtig, vermogen en springt met goede techniek. Klinisch en röntgenologisch 100%.</omschrijving> <foto1>../images/jadorijke.jpg</foto1> <foto2>../images/larisa.jpg</foto2> <foto3>../images/Lavito.jpg</foto3> <foto4>../images/pixel.gif</foto4> <film>Lavito.AVI</film> </horse></aangeboden> i made the following xsl file to go with it (and it works great!): <?xml version="1.0" encoding="ISO-8859-1"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/"> <html> <body style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:10pt; background-color:#FFFFFF; background-image:url(../img/4.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:right;" alink="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF"><p align="center"><img src="../img/aangeboden.gif" width="184" height="19" /></p><p /><p align="left">Onderstaand vindt u diverse paarden die voor verkoop in aanmerking komen.<br /> Deze paarden zijn allemaal röntgenologisch en klinisch 100% in orde en wij staan garant voor de kwaliteit van deze paarden. Prijzen op aanvraag.</p><br /> <xsl:for-each select="aangeboden/horse"><table align="center" width="472" cellpadding="2" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; border-color: #FF9900 #FFFFFF #FFFFFF #FF9900; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px"> <tr> <th style="color:#65102D;" width="150" align="left" scope="row">Pedigree</th> <td style="font-weight:bold;" colspan="2"><xsl:value-of select="pedigree"/></td> </tr> <tr> <th style="color:#65102D;" width="150" align="left" scope="row">Naam</th> <td style="font-weight:bold;" colspan="2"><xsl:value-of select="naam"/></td> </tr> <tr> <th style="color:#65102D;" width="150" align="left" scope="row">Geboortedatum</th> <td colspan="2"><xsl:value-of select="geboortedatum"/></td> </tr> <tr> <th style="color:#65102D;" width="150" align="left" scope="row">Kleur</th> <td colspan="2"><xsl:value-of select="kleur"/></td> </tr> <tr> <th style="color:#65102D;" width="150" align="left" scope="row">Geslacht</th> <td colspan="2"><xsl:value-of select="geslacht"/></td> </tr> <tr> <th style="color:#65102D;" width="150" align="left" scope="row">Stokmaat</th> <td colspan="2"><xsl:value-of select="stokmaat"/> m</td> </tr> <tr> <th style="color:#65102D;" width="150" align="left" scope="row">Niveau</th> <td colspan="2"><xsl:value-of select="niveau"/> m</td> </tr> <tr> <th style="color:#65102D;" width="150" align="left" valign="top" scope="row">Omschrijving</th> <td colspan="2"><xsl:value-of select="omschrijving"/></td> </tr> <tr> <td width="150"> </td><td colspan="2"><a> <xsl:attribute name="href"> <xsl:value-of select= "link" /> </xsl:attribute> <img vspace="2" width="60" height="60"> <xsl:attribute name="src"> <xsl:value-of select= "foto1" /> </xsl:attribute> </img> </a> <a> <xsl:attribute name="href"> <xsl:value-of select= "link" /> </xsl:attribute> <img vspace="2" width="60" height="60"> <xsl:attribute name="src"> <xsl:value-of select= "foto2" /> </xsl:attribute> </img> </a> <a> <xsl:attribute name="href"> <xsl:value-of select= "link" /> </xsl:attribute> <img vspace="2" width="60" height="60"> <xsl:attribute name="src"> <xsl:value-of select= "foto3" /> </xsl:attribute> </img> </a> <a> <xsl:attribute name="href"> <xsl:value-of select= "link" /> </xsl:attribute> <img vspace="2" width="60" height="60"> <xsl:attribute name="src"> <xsl:value-of select= "foto4" /> </xsl:attribute> </img> </a></td></tr> <tr> <th style="color:#65102D;" width="150" align="left" scope="row">Big photo</th> <td colspan="2"></td> </tr> <tr> <th colspan="3" align="left" scope="row"> </th> </tr> <tr> <th style="color:#65102D;" width="150" align="left" scope="row">Film</th> <td colspan="2"><xsl:value-of select="film"/></td> </tr></table><br /><br /><br /> </xsl:for-each> </body> </html></xsl:template></xsl:stylesheet> but i would like for the thumbnails to open an enlargement of these thumbnails on the table cell underneath the thumnails. i have tried all kinds of things, but i'm just not familiair enough with xml/xslt (or javascript, for that matter. normally dreamwaver takes care of that for me...).all kind of help/remarks would be very welcome to solve this. (i wonder, can it be done without javascript? i would prefer that.) thanks in advance! Link to comment Share on other sites More sharing options...
kvnmck18 Posted January 25, 2007 Share Posted January 25, 2007 I'm guess "film" = your thumbnails...do you know any server scripts?PHP, ASP, JS, blah blah...?Actually...before we get into working on this, lets start small...the first part of your table: <tr> <th style="color:#65102D;" width="150" align="left" scope="row">Pedigree</th> <td style="font-weight:bold;" colspan="2"><xsl:value-of select="pedigree"/></td> </tr> <tr> <th style="color:#65102D;" width="150" align="left" scope="row">Naam</th> <td style="font-weight:bold;" colspan="2"><xsl:value-of select="naam"/></td> </tr>.... and so on ...this is all unnecessary and makes your XSLT very messy.This is the first change: <table> <xsl:for-each select="horse/*"> <tr> <th style="color:#65102D;" width="150" align="left" scope="row"> <xsl:value-of select="name()"/> </th> <td style="font-weight:bold;" colspan="2"> <xsl:value-of select="."/> </td> </tr> </xsl:for-each></table> Just have to limit the "foto" and ect. Limit it to first 8 positions Link to comment Share on other sites More sharing options...
Aspert Posted January 29, 2007 Author Share Posted January 29, 2007 Hi. Nice of you to look into my post!No, "film" is not thumbnails.The last 3 table rows (with 2 cells each) are like: -1st: empty cell; cell with 4 thumbnails.-2nd: cell with description "Big Photo"; cell where enlarged photo of one of the 4 thumbnails should come. Default <foto1> should be visible when the page is opened.-3rd: cell with description "Film"; cell with a link to open a little window where a movie is displayed. How to do this, is my second problem, but the thumbnail question has my priority.I hope my talent for xslt is bigger than my talent for server scripts. But always willing to learn.About your code I have questions:- What means or does the * in <xsl:for-each select="horse/*"> ?- What does <xsl:value-of select="name()"/> do? Is it a way to make my description in the table header (first column of the table) variable? Or should i fill in one of the xml tags where you put "name" or put something between the brackets?- <xsl:value-of select="."/> : I put a xml tagname "." between the quotes or where te dot is?I've played around with your code and couldn't get it to work, see...And I'm not sure what you mean with: "Just have to limit the "foto" and ect. Limit it to first 8 positions". English is not my first language, so maybe if you reapeat it slooooowwwlyyyy I will understand eventually. From one member to another (read: nitwit member to 'used to be advanced' member): thanks in advance! Link to comment Share on other sites More sharing options...
boen_robot Posted January 29, 2007 Share Posted January 29, 2007 I'm not sure I understand what's happening here. It's all one big mess of code again.Because of the above, I'm not going to step into trying to understand what's going on, but I'm going to clarify what kvnmck18 said:- The asterick (the "*") means "any element". So by doing "horse/*", he says "any element inside the 'horse' element".- The name() function returns the name of the current element. So if the current loop is on the "pedigree" element, name() will returns "pedigree".- The dot (the ".") selects the current element, whatever it is. So if the current loop is on the first "pedigree" element, the dot will return "Karandasj x Pilot x Salute".By the way, I didn't understood either... what S3L do you have? Link to comment Share on other sites More sharing options...
Aspert Posted January 29, 2007 Author Share Posted January 29, 2007 ok, i'll just give u the url's then: at http://www.stalverhoeven.nl/xml/aangeboden.xml you can find the result of the mess. i've tried changing the xslt code between the <table> tags before, with the code kvnmck18 gave me, but the result is that everything below the text "Prijzen op aanvraag." stays empty.what i'm trying to do here is making it like this: http://www.stalverhoeven.nl/xml/rollover.htm Link to comment Share on other sites More sharing options...
boen_robot Posted January 29, 2007 Share Posted January 29, 2007 Ah. I see. What you need and where your problem lies is with the JavaScript needed to switch the elements.Instead of a JavaScript solution, you might also be interested in a CSS based one. Try to look for something at CSSPlay.co.uk's demos and adapt it for this. In any case, your problem is not XSLT related. Link to comment Share on other sites More sharing options...
kvnmck18 Posted January 30, 2007 Share Posted January 30, 2007 Well, the code is still a mess... and being new to XML/XSLT you should start off with better layout....there's no need for a javascript...but if you want to go that path you can use this basic javascript for swapping images:To this in the <head></head>: <script language="JavaScript">function movepic(img_name,img_src) {document[img_name].src=img_src;}</script> The original (large) image: <img src="FIRST_IMAGE.jpg" name='large'> This is how you would link the thumbs: <a href="#" onClick="movepic('large','LINK_TO_THE_IMAGE_YOU_WANT_BIGGER.jpg')"> ...this is a very simple solution but doesn't help you out in the long run......to get the rollover just change the "onClick" Link to comment Share on other sites More sharing options...
kvnmck18 Posted January 30, 2007 Share Posted January 30, 2007 Also, with what boen said when he explained what I did to clean up that part...Instead of having that long horrible table it was simplified to a short few lines of XSL code... and took the names of the nodes and made them the "titles"/"headers"...I know they are lowercase but you can fix that with basic CSS to make the first letters capital or make them all capital or make them (my favorite) small caps. Link to comment Share on other sites More sharing options...
Aspert Posted February 2, 2007 Author Share Posted February 2, 2007 Thanks both for your input.As I tried to explain in my post of Jan 30, I would like to, but can't get the short code kvnmck18 gave me get to work. The sloppy code (see post of Jan 30) works, but the tidy code I can't get to work. For the latter have a look at http://www.stalverhoeven.nl/xml/aangeboden_nl.xml.What am I doing wrong?Btw: I really like the CSSPlay.co.uk site, thank you very much! Link to comment Share on other sites More sharing options...
kvnmck18 Posted February 2, 2007 Share Posted February 2, 2007 Oh sorry...that's because I explained it wrong...it should work (I just got lazy explaining)Let me explain this better.ImageA = the starting image (not a thumbnail)ImageX = another image (not a thumbnail)ImageX_thumb = thumbail of ImageXImageA is the starting image (default)... there are thumbnails somewhere on the page (that I refer to as ImageX_thumb)...when you "hover" or "go over" ImageX_thumb it automatically opens/replaces ImageA. On "rollover" of ImageX_thumb, ImageA becomes ImageX.Add this javascript in the <head></head> section of you <html></html> doc: <script language="JavaScript">function movepic(img_name,img_src) {document[img_name].src=img_src;}</script> ImageA: <img src='images/ImageA.jpg' name='opened'/> ImageX_thumb (includes ImageX): <a href="#" onmouseover="movepic('opened','images/ImageX.jpg')"><img src="images/ImageX_thumb.jpg"/></a> In the code of ImageA there is a name given to the image, it is "opened". The link for the thumbnail refers to the javascript, it "moves" "swaps" "switches" the image.onmouseover="movepic('opened','images/ImageX.jpg')... this refers to the javascript and replaces "opened" (the larger image) with the location of the next image after the comma and apos. The movepic('opened') name MUST MATCH the name given to the image of where you want it to open.Is that better?....and I just tested it and it works. Link to comment Share on other sites More sharing options...
Aspert Posted February 2, 2007 Author Share Posted February 2, 2007 Sorry, I guess I'm the one who explained it wrong. I didn't mean the javascript but what I meant was your code <table> <xsl:for-each select="horse/*"> <tr> <th style="color:#65102D;" width="150" align="left" scope="row"> <xsl:value-of select="name()"/> </th> <td style="font-weight:bold;" colspan="2"> <xsl:value-of select="."/> </td> </tr> </xsl:for-each></table> Please have a look at http://www.stalverhoeven.nl/xml/aangeboden_nl.xml (and ofcourse then the xsl that goes with it: http://www.stalverhoeven.nl/xml/template_aangeboden_nl.xsl ).It works ok with my horrible long table as used in this combination: http://www.stalverhoeven.nl/xml/aangeboden.xml and http://www.stalverhoeven.nl/xml/template_a...oden_engels.xsl. I used this long messy code because it is used like that in the xslt tutorial of w3schools, and I didn't see a lesson anywhere explaining your above mentioned code, which ofcourse would be very handy to know (if I'd get it to work...). Maybe all the /*, name() and "." stuff is only very natural when one is a programmer, but guess what, I'm not... Link to comment Share on other sites More sharing options...
kvnmck18 Posted February 16, 2007 Share Posted February 16, 2007 Okay then just ignore what I said...I was just trying to simplify your XSLT... that's not important.What is the current XSLT you are using in the http://www.stalverhoeven.nl/xml/aangeboden.xml?For that javascript to work just add the head section, the part in the "main image", and the part in the href Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now