XSitePro Website Design Software Message Board

I have seen some web sites where when the user moves the mouse pointer over a highlighted word or small image, a little window appears containing, say, a picture of the item referred to, or a few words explaining what a word means, etc.

Can Xsitepro do this? Or can some other piece of software be used with Xsitepro to make it do this?

I am not talking about traditional "popups" in the sense of a separate browser window.

Anyone know how to achieve this?

Do a search for tool tip scripts.

There are some over on dynamicdrive.com

Jason

_________________

This may help:

1. Create two folders on the desktop, the first one named 'css' and the second named 'js'.

2. Into the 'css' folder add the following text file using notepad++ or editplus (any program that will allow for creating/saving a ".css"):

#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}

3. Save this file as tooltip.css and put this in the 'css' folder.

4. Into the 'js' folder add the two javascript files: 'main.js' and 'jquery.js'.

5. Now add the following into Global Scripts --> Head Section:

<!-- tooltip.js -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/tooltip.css" />
<!-- /tooltip.js -->

6. For the page where you are going to use the tooltip use the following code via the source tab:

<p>
<a href="http://yourlink.com" class="tooltip" title="Your Tooltip Copy">the link word/words as they appear on the page</a>
</p>

Change the url "yourlink.com" to the url address you want to go to if the tooltip is clicked.

Change the words"Your Tooltip Copy" to the text you want to show when the link is hovered over with the mouse. Don't use too many words here as it looks unweildy.

Insert the words you want to show on the page between the > </a> symbols.

7. To alter how your tooltip appears the background and font colours inside the tooltip can be adjusted via the tooltip.css file.

8. Now open Resource Manager and add the folders you created earlier, plus their contents.

That's it, you should be good to go. PM me and I will email you the js files you need.

Regards,

_________________
JohnB