Using a graphic as a link in the Navigator Links

| 1 Comment | 1 TrackBack

In Radio's discussion forum, Christopher Burton asks how to use a graphic as a link in the Navigator Links. Julie at Sexy Magick offered a Newbie Tip explaining how to add a link to a graphic, which can be used above or below the Navigator Links, but not within them.

As far as I know, Radio's Navigator Links do not support using a graphic as a link within the Navigator Links, but Radio can be tricked into using one anyway.

Open up your favorite text editor, and in a blank page, enter the html that you want to use for a Navigator Link. For this example, I'm going to use the link and image source html from Julie's Newbie Tip:

<a href="http://radio.weblogs.com/0119318/"> <img src="http://radio.weblogs.com/0119318/Screenshots/rose.jpg"> </a>

The problem we have is that the <, >, and " characters in the above html code have special meaning to Radio's XML parser (which is what reads the Navigator Links file). Radio will complain if the above html code is inserted directly into a Navigator Link as-is.

To prevent Radio from treating the <, >, and " characters as special characters, we have to use the html encoded equivalent for these characters, instead of those characters directly. Within the html code, we'll need to perform the following 3 steps:

1. Replace every < with &lt;
2. Replace every > with &gt;
3. Replace every " with &quot;

Either manually, or by using the search/replace function in your text editor, perform each one of the above three steps.

Here's what the html code looks like after the < characters are replaced with &lt; (step 1):

&lt;a href="http://radio.weblogs.com/0119318/"> &lt;img src="http://radio.weblogs.com/0119318/Screenshots/rose.jpg"> &lt;/a>

Now here's what the html code looks like after the > characters are replaced with &gt; (step 2):

&lt;a href="http://radio.weblogs.com/0119318/"&gt; &lt;img src="http://radio.weblogs.com/0119318/Screenshots/rose.jpg"&gt; &lt;/a&gt;

And here's what the html code looks like after the " characters are replaced with &quot; (step 3):

&lt;a href=&quot;http://radio.weblogs.com/0119318/&quot;&gt; &lt;img src=&quot;http://radio.weblogs.com/0119318/Screenshots
/rose.jpg&quot;&gt;
&lt;/a&gt;

Now it is time to insert our new link into the Navigator Links. Open up the Desktop Website, and go to the Navigator Links page.

At the point where you want the new link to appear in the list, insert the following line:

<item name=""/>

Our new link does not need a pagename attribute (and should not have one), because the link is going to be present in the name attribute.

Copy the html text from the text editor and paste it between the quotes of the name attribute. If this is done correctly, our new Navigator Link will look like this:

<item name="&lt;a href=&quot;http://radio.weblogs.com/0119318/&quot;&gt; &lt;img src=&quot;http://radio.weblogs.com/0119318
/Screenshots/rose.jpg&quot;&gt;
&lt;/a&gt;"/>

Click on the Submit button, and check out the new image in the middle of your Navigator Links that should now be there.

Here's a screenshot showing what my page looked like when I inserted Julie's image link into my Navigator Links, following the steps outlined above:

1 TrackBack

<font color="Yellow">Just Around The Bend</font> The problem we have is that the <, >, and " characters in the above html code have special meaning to Radio's XML parser (which is what reads the Navigator Links file). R... Read More

1 Comment

Thanks for expanding on this concept. Trackback has been enabled for the newbie tips category..:)