I’m a bit of a novice when it comes to this web malarky, and I am desperately trying to get a tool-tip pop-up bubble balloon to appear when you roll over a specified graphic.
If you can spare a minute please have a look at this page:
What I ultimately want, is when you roll over the blue circular crosshair icon next to each item, a balloon appears with a specification.
I have looked at just using alt tags, but they only allow the text to flow on one line, which would end up being extremely long with the full print spec in there!
Anyway, I can see from looking through the forums here that overLib is the way to go, but I can’t find any simple instructions on actually how to use it in Freeway Pro.
I know very very little about coding, and where instructions I’ve found have said “embed this line of code in the head just before the tag” - I don’t know how to do this!!!
Any help anyone can give me is much much appreciated!
What I ultimately want, is when you roll over the blue circular
crosshair icon next to each item, a balloon appears with a
specification.
You should be able to achieve what you want with the Rollover and
Target Show/Hide Layer Actions, which also mean you can even have
speech bubble shapes, as well.
Going from memory,
You need to apply the Rollover Action to each ‘crosshair’ image,
tick Normal and Mouseover and give each one a separate target number
in the Action window.
Each speech bubble can be a graphic shape and HTML text, grouped as
a separate layer, to which you apply the Target Show/Hide Layer Action.
Match each target number in 2 to the relevant ‘crosshair’ Rollover
number and set Initially Visible: No and Restore: Yes. in the Action
window
Now, when you mouseover each ‘crosshair’ the relevant speech bubble
should appear.
(N.B. If you cant see the Action window, select it from the FW Menu:
Window > Actions).
If that’s not what you want (or doesn’t work), let us know.
I actually use overLib on a couple of sites but pull the text from a database relative to the link but you can just add the text to each link or image using the following:
Add the following line of code to the <Before /head> of the Page > HTML Markup menu selection (Make sure it is all on one line and not wrapped from the post):
<script type="text/javascript" src="overlib/overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
Add the following line to the of the Page > HTML Markup menu:
Select ‘Markup item…’ from the ‘Insert’ menu and add the following code for the blurp within the window that appears, do not copy the tildes in the code, e.g.:
<a href="index.html" onmouseover="return overlib('<strong>Bla bla bla</strong><br /> <br />Bla bla blaBla bla blaBla bla blaBla bla blaBla bla blaBla bla bla<br /> <br />Bla bla bla Bla bla bla<br /> <br />Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla', CAPTION, 'Caption Bla bla bla Bla bla bla Bla bla bla Bla bla bla',ABOVE, WIDTH, 300);" onmouseout="return nd();"><img src="Resources/some_img_name_here.gif" border=0 width=220 height=164 alt="Image alt here" style="vertical-align:baseline"></a>
Note:
The above will need you to put the image name in for ‘some_img_name_here.gif’ also change the Bla Bla text for the CAPTION and the general text.
Change the width of the blurb using the number beside WIDTH, I have 300
The overlib folder needs to be relative to the path you have used in 1)
Change ‘index.html’ to the page you want to link to when the image is clicked.
Change ‘width=220 height=164’ to the size of the image you are using.
You will probably need to use the ‘Extra resources’ action to upload the image/s you use for the image in the code in 3), i.e. the ‘some_img_name_here.gif’ image.
@ColinJA: thanks Colin but I think this might be a bit of a long way round the problem in this instance - throughout my site there will end up being a lot of these info balloons, and it would get very messy doing it this way I think.
@Mike B: This sort of makes sense to me - so I’ll work through it slowly and give it a go! I’m sure I’ll have to pop back on here with some queries at some point though!