Hey guys,
I have a web page using Umbraco with 3 images. All 3 images are linkable to pages within the website.
I've added a field in Umbraco so you can type in a title and it will overlay the image which works perfectly.
I've also added a field in Umbraco so you can type in text and it generates a CSS button. I want the button to use the same link that the image uses ($imageLink).
Here's my code (Sorry if it's a bit large):
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary ">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:variable name="configData" select="$currentPage/ancestor-or-self::*[@isDoc]/*[@isDoc][@nodeName='SiteConfig']" />
<xsl:template match="/">
<xsl:call-template name="getBottomImagesAndText" />
</xsl:template>
<xsl:template name="getBottomImagesAndText" >
<xsl:variable name = "bottomImageLeft" select = "$configData/bottomImageLeft" />
<xsl:variable name = "bottomImageCenter" select = "$configData/bottomImageCenter" />
<xsl:variable name = "bottomImageRight" select = "$configData/bottomImageRight" />
<xsl:variable name = "bottomImageLeft_Link" select = "$configData/bottomImageLeft_Link" />
<xsl:variable name = "bottomImageCenter_Link" select = "$configData/bottomImageCenter_Link" />
<xsl:variable name = "bottomImageRight_Link" select = "$configData/bottomImageRight_Link" />
<xsl:variable name = "bottomTextLeft" select = "$configData/bottomTextLeft" />
<xsl:variable name = "bottomTextCenter" select = "$configData/bottomTextCenter" />
<xsl:variable name = "bottomTextRight" select = "$configData/bottomTextRight" />
<xsl:variable name = "bottomImageLeftText" select ="$configData/bottomImageLeftText" />
<xsl:variable name = "bottomImageCenterText" select ="$configData/bottomImageCenterText" />
<xsl:variable name = "bottomImageRightText" select ="$configData/bottomImageRightText" />
<xsl:variable name = "bottomImageLeftButton" select ="$configData/bottomImageLeftButton" />
<xsl:variable name = "bottomImageCenterButton" select ="$configData/bottomImageCenterButton" />
<xsl:variable name = "bottomImageRightButton" select ="$configData/bottomImageRightButton" />
<xsl:if test = "$bottomImageLeft and $bottomImageCenter and $bottomImageRight != ''">
<table width="926" border="0" cellpadding="0" cellspacing="0" class="homeTable">
<tr>
<td height="10" colspan="5"><img src="/images/RESGroup/spacer.gif" alt="space" width="1" height="1" /></td>
</tr>
<tr>
<td width="300" height="114" valign="top">
<xsl:if test="$bottomImageLeftText != ''">
<div class="imageTextOverlay_1">
<xsl:call-template name="getText">
<xsl:with-param name="imageText" select="$bottomImageLeftText" />
</xsl:call-template>
</div>
</xsl:if>
<div class="imageButtonOverlay">
<xsl:call-template name="getText">
<xsl:with-param name="imageText" select="$bottomImageLeftButton" />
</xsl:call-template>
</div>
<xsl:call-template name="getImage">
<xsl:with-param name="imageTag" select="$bottomImageLeft" />
<xsl:with-param name="imageLink" select="$bottomImageLeft_Link" />
</xsl:call-template>
<xsl:call-template name="getText">
<xsl:with-param name="imageText" select="$bottomTextLeft" />
</xsl:call-template>
</td>
<td height="114"><img src="/images/RESGroup/spacer.gif" alt="space" width="1" height="1" /></td>
<td width="300" height="114" valign="top" >
<xsl:if test="$bottomImageCenterText != ''">
<div class="imageTextOverlay_2">
<xsl:call-template name="getText">
<xsl:with-param name="imageText" select="$bottomImageCenterText" />
</xsl:call-template>
</div>
</xsl:if>
<div class="imageButtonOverlay">
<xsl:call-template name="getText">
<xsl:with-param name="imageText" select="$bottomImageCenterButton" />
</xsl:call-template>
</div>
<xsl:call-template name="getImage">
<xsl:with-param name="imageTag" select="$bottomImageCenter" />
<xsl:with-param name="imageLink" select="$bottomImageCenter_Link" />
</xsl:call-template>
<xsl:call-template name="getText">
<xsl:with-param name="imageText" select="$bottomTextCenter" />
</xsl:call-template>
</td>
<td height="114"><img src="/images/RESGroup/spacer.gif" alt="space" width="1" height="1" /></td>
<td width="300" height="114" valign="top">
<xsl:if test="$bottomImageRightText != ''">
<div class="imageTextOverlay_3">
<xsl:call-template name="getText">
<xsl:with-param name="imageText" select="$bottomImageRightText" />
</xsl:call-template>
</div>
</xsl:if>
<div class="imageButtonOverlay">
<xsl:call-template name="getText">
<xsl:with-param name="imageText" select="$bottomImageRightButton" />
</xsl:call-template>
</div>
<xsl:call-template name="getImage">
<xsl:with-param name="imageTag" select="$bottomImageRight" />
<xsl:with-param name="imageLink" select="$bottomImageRight_Link" />
</xsl:call-template>
<xsl:call-template name="getText">
<xsl:with-param name="imageText" select="$bottomTextRight" />
</xsl:call-template>
</td>
</tr>
</table>
</xsl:if>
</xsl:template>
<xsl:template name="getImage">
<xsl:param name="imageTag" />
<xsl:param name="imageLink" />
<xsl:choose>
<xsl:when test="$imageLink != ''">
<a href="{umbraco.library:NiceUrl($imageLink)}"><xsl:value-of disable-output-escaping="yes" select="$imageTag" /></a>
</xsl:when>
<xsl:otherwise>
<xsl:value-of disable-output-escaping="yes" select="$imageTag" />
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name="getText">
<xsl:param name="imageText" />
<xsl:if test="$imageText!= ''">
<xsl:value-of disable-output-escaping="yes" select="$imageText" />
</xsl:if>
</xsl:template>
</xsl:stylesheet>
Before you post, read our: 
