Film, Media & TV1 min ago
Writing a webpage
6 Answers
Can you do the following in Frontpage:
http://www.ciao.co.uk/HP_LaserJet_1010__5379812
where it says 'more' if you put your cursor over it, another box comes up. How do you do this in frontpage?
http://www.ciao.co.uk/HP_LaserJet_1010__5379812
where it says 'more' if you put your cursor over it, another box comes up. How do you do this in frontpage?
Answers
Best Answer
No best answer has yet been selected by Oneeyedvic. Once a best answer has been selected, it will be shown here.
For more on marking an answer as the "Best Answer", please visit our FAQ.I assume Oneeyedvic is referring to the one just above where it says "Best price", which pops up a semi-transparent window with text IF you have javascript enabled. I don't know whether it's easy to do this kind of thing with Frontpage, but I would suggest that it's much better not to use javascript if you can avoid it.
It's not so much javascript here : it's all stylesheets that make this popup appear as far as I can see.
The content of the wee balloon "effortless set up...." is all coded into the webpage but initially set to be invisible
a.tooltip span{display:none;}
means that anytime there's a hyperlink with a "span" tag inside it, whatever text is the span tag is not displayed until you move your mouse over the link.
The "hover" property of the link makes it visible. No javascript is involved apart from the "onclick" property which makes sure that if you click "more" then you're not taken to a new page.
The code itself is:
<a href="#" class="tooltip" onclick="return false;">more<span>effortless set-up.........</span></a>
and in a separate stylesheet:
a.tooltip span{display:none;}
a.tooltip:hover{background:#fff;text-decoration:none;}
a.tooltip:hover span {max-width:500px;position:absolute; display:block; z-index:666; padding:7px 9px; background-color:#fff; border:1px solid #cecece; color:#000;}
table.common a.tooltip:hover span{background-color:#ffffe1;}
html>body a.tooltip:hover span{-moz-border-radius:6px;opacity:0.94;cursor:default;}
The content of the wee balloon "effortless set up...." is all coded into the webpage but initially set to be invisible
a.tooltip span{display:none;}
means that anytime there's a hyperlink with a "span" tag inside it, whatever text is the span tag is not displayed until you move your mouse over the link.
The "hover" property of the link makes it visible. No javascript is involved apart from the "onclick" property which makes sure that if you click "more" then you're not taken to a new page.
The code itself is:
<a href="#" class="tooltip" onclick="return false;">more<span>effortless set-up.........</span></a>
and in a separate stylesheet:
a.tooltip span{display:none;}
a.tooltip:hover{background:#fff;text-decoration:none;}
a.tooltip:hover span {max-width:500px;position:absolute; display:block; z-index:666; padding:7px 9px; background-color:#fff; border:1px solid #cecece; color:#000;}
table.common a.tooltip:hover span{background-color:#ffffe1;}
html>body a.tooltip:hover span{-moz-border-radius:6px;opacity:0.94;cursor:default;}