HTML5 Output: Adding alt text to logo

[Jim]

Hi all,

I was wondering if anyone knew of a way to add alt text to the logo image on HTML5 output without modifying default.htm post-build. Basically, when you hover over the logo, we'd like it to say something like "Help System Introduction" in a little bubble. (The same as if you hover over the logo on these forums, it says "Board Index" )

I know we can add

Code: Select all

alt="Text Goes Here"

to default.htm, but would like to avoid doing it if at all possible.

Thanks for your help!
Jim

[kwag_myers]

I wonder if you could use the JavaScript feature (Skin Editor > Toolbar)? I don't know that much about JavaScript, and all the programmers here are PHP'ers so I'm not able to test this.

fwiw, I noticed the online Flare 8 Help doesn't have a tooltip for the logo (http://webhelp.madcapsoftware.com/flare8/Default.htm). Also, I've spent hours unsuccessfully trying to add a property to the skin.

If it makes life any easier, here's a simple script you can copy/paste into NotePad and save as a .vbs. I'm pretty sure the file is fairly static once the project is established. Edit the directories accordingly and you can copy a customized Default.htm (containing the alt text) with a double-click instead of editing the file manually. I use this to keep my CSS files in sync among projects.

Code: Select all

Dim SourceFile
'  Change to where your customized file resides
SourceFile = "C:\...\Default.htm"

Set objShell = CreateObject("Shell.Application")
' Change to your project's Output folder where the file needs to go
objShell.namespace("C:\Users\...\WebHelp\").CopyHere SourceFile

[NorthEast]

Yes, in the skin editor Toolbar tab, click Edit (on right) and enter this script:

Code: Select all

$(document).ready(function(){
	$('h1.logo').attr({
	  alt: 'Alt text goes here',
	  title: 'Title text goes here'
	});
});

The tooltip displayed when you hover is actually the title attribute, rather than alt.

[rheck]

I found the previous example did not work in the newer HTML5 TopNav output. I found that the following code lets you specify tool tip text for the logo on all pages except the home page. In our case, the logo links to the help home page, so we wanted the tool tip to say "Home". I don't know how to add a tool tip to the logo on the home page.

The place I entered this code is: Skins > TopicToolbar skin > Setup tab > Edit button on the right in the "Custom JavaScript to include in Toolbar page" area.

Code: Select all

$(document).ready(function(){
   $('a.logo').attr({
     alt: 'Alt text goes here',
     title: 'Title text goes here'
   });
});

[Corinna]

I found that the following code lets you specify tool tip text for the logo on all pages except the home page.

Thank you for the code - for me it worked perfectly on all pages incl. the start page. Instead of inserting it the way you did, I created a snippet and referred to this snippet in all master pages incl. the one for the start page.