jlhaslip
Mar 2 2006, 10:44 PM
Tool Tip TutorialExample Found Here. Please review before continuing. Nice. And no javascript at all to be found. The colours I have used are for demonstration purposes only to show you that they are adjustable to suit the background or to contrast against them. Your choice. That is a styling issue. It is your site, you decide. The original author's idea was to add position:relative to the link, in order to allow the span element inside to position absolutely in respect to the parent link. This code has been tested in Ie5.5, IE6, Opera7.11 and Mozilla 1.4 and works fine. Fails in IE5/mac and NN7/mac, as I found out the hard way. Now, let's have a look at the basic html and css code for the tooltip: An Anchor Tag with a Span for the Tool Tip TextCODE <a class=info href="Your Linked URL goes Here">display text here <span> Tool Tip Text Here </span> </a> How it WorksThe class="info" sets the background colour, the text colour , the position relative and turns off the underlining for the anchors of this class. The span tag of this anchor is used to hide the display of the spanned text (a.info span{display: none}). When it is hovered over, it resets the background colour of the anchor(a.info:hover), then the span is made visible in an offset position from the anchor (a.info:hover span). The attributes of the displayed span are set using the a.info:hover span selector. In this example, it is used to set the text colour and the background colour of the Tool Tip, it locates the displayed text block as an absolutely positioned block from the anchor, adds a border, and alters the text colour. Sounds like a lot of work for one little selector. And here is the CSS for the Anchor and SpanCODE a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#f0c0c0;
color:#666;
text-decoration:none}
a.info:hover{z-index:25; background-color:#e1e1e1}
a.info span{display: none}
a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cfc;
color:#cc3366;
text-align: center} Enjoy.
Reply
wild20
Mar 3 2006, 12:03 AM
Works fine in 6.0 Jim. Sorry it took so long to find it. Anyway. I like it. I could use it with a change in background colors. It needs to be better though with the text highlight. Is that easily changable? I didn't look the code over a lot. I know very little PHP and even less CSS, but enough to see how it works. And I give it a rating of 4:5. Thre are better ones out there, but it is amazing how you did it with CSS only. Very cool, thanks for sharing.
Reply
Lyon2
Mar 3 2006, 12:06 AM
Very interesting! Very usefull for me. I Used to use javascripts wich has so many code, but now i'll use css, it's much more easy. Thanks.
Reply
Albus Dumbledore
Mar 3 2006, 12:06 AM
@ wild, i dont mean to speak on a question that you asked jlhaslips but i believe that if you change all of the background attributes QUOTE a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#f0c0c0;
color:#666;
text-decoration:none}
a.info:hover{z-index:25; background-color:#e1e1e1}
a.info span{display: none}
a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cfc;
color:#cc3366;
text-align: center} i believe if you change the background attributes it will work, im going to test that out on my site and edit this if it doesnt work
Reply
Tyssen
Mar 3 2006, 12:06 AM
Nice tutorial Jim. If you wanted to get just a little bit fancier, you could add this to a.info hover span: CODE opacity:0.95;
filter:alpha(opacity=95); Of course, it doesn't validate because of the MS filter though and you'd have to have the opacity quite high to make the text readable against the background.
Reply
jlhaslip
Mar 3 2006, 12:54 AM
Well, thanks for the support. It is nice to know that these efforts are appreciated Wild20: Albus has it right on the mark for changing background-colors to affect the displayed and on:hover colours of the background. To alter the colour of the text, change the color: #fxxxxxx where xxxxxx are hex numbers from 0 to f. ( #ffffff being white and #000000 being black). The pairs indicate the amount of Red, Green, and Blue, so #ff0000 is full red, #00ff00 is full Green and #0000ff is full blue. There are any number of choices available. Albus: Thanks for the comment. Always appreciate help around here. Lyons: Enjoy. Tyssen: thanks for the tip. My old beater doesn't like opacity whether it is proprietary or not. Don't know if it is the Browser or the machine, but others will appreciate the tip.
Reply
Albus Dumbledore
Mar 3 2006, 01:14 AM
i asked jlhaslips if i could post this and he said yes, so i am going to :-D i was bored and did those for a few of the peole who dont quite know what to edit to change what colors etc.. so this is just to SHOW you what is what and what you should change to get what you want.. CODE a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#f0c0c0; /*changes the highlight color of the text that the info will show up for*/
color:#666; /*it changes the tint of the text that is highlighted*/
text-decoration:none}
a.info:hover{z-index:25; background-color:#e1e1e1} /*changes the background color of the text when you hover over it*/
a.info span{display: none} /*hides the span until on:hover happens*/
a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf; /*obviously the border color of the info box that shows up on hoover*/
background-color:#cfc; /*changes the background color of the info box that shows up on hover*/
color:#cc3366; /*changes the tint of the text that shows up on hover*/
text-align: center} /*alignment of the text that shows up on hoover*/ DO NOT copy and paste that for the CSS the <<TEXT HERE will mess it up..use the origional one that jlhaslips gave you :-D hope this helps some people 
Reply
Tyssen
Mar 3 2006, 05:10 AM
If you want to insert comments into CSS files in future, do this: element { style; } /* your comment */
Reply
Albus Dumbledore
Mar 3 2006, 05:50 AM
thanx, i probably would have but my intent for the post was just to show the viewers what they need to change in order to change different attributes of the tool..it wasn't for them to copy and paste my post and use it, but i suppose ill change it :-D thanx again *edit* ok i edited it
Reply
Recent Queries:--
colour - 8.94 hr back. (1)
-
popup: mootools - 24.46 hr back. (1)
Similar Topics
Keywords : tool, tips, css, pop, tool, tip, javascript, involved
- Lesser Known Useful Javascript Features
(2)
Make A Moderately-secure Password System Using Javascript
using file redirection to hide the password. (4) JavaScript is very handy at making forms, allowing for much more customization and easier ways to
send data. So making Login forms using JavaScript may seem to many to be a very feasable idea.
However, JavaScript is very bad at protecting Passwords, as since the passwords are not encypted and
the whole JavaScript code is in the page, a person could just view the Page Source and find out
everything. Even if you use an external JavaScript, it would still be poor as the file name for the
external JavaScript would still be revealed. But I have an answer! There is a rela....
Simple Javascript And Password System
How to protect your pages with password (6) The quickest way to get a password protection system up and running is to use a Prompt box in
JavaScript that has a title like "Enter your Email Address". Only you and the relevant users know
what the password should be, could even be one each, that can be sorted out at the next page then
pass the "input" directly through the url by changing the .href, like
http://www.iSource.net.nz/users/?leTmeIn= The page that then processes this should also check for
the referring page, and three fails from an IP if you like the php (the next page): CODE
<?php // processdo....
Create A Simple Html Editor With Php And Javascript
(3) Ok, I will teach you how to create a simple HTML editor that runs online with buttons that add HTML
tags. Before we start: You should have basic knowledge of these languages. HTML/XHTML
Javascript PHP You will need Ability to use filesystem functions. Chmodding abilities
Features of Editor Online PHP safe Full HTML support A Few Bad Features Can only create new
documents or overwrite Fairly unsafe Now we are ready to begin. The PHP Script This will be
our PHP script that we will use to make the file. Make a file called save.php Here is the....
Creating A Resume
10 Tips For Making A Resume (1) I've been working on my Resume for months now. Here is a summary of what I've learned: 1.
Avoid referring to yourself via 1st person or 3rd person terms. Rather than saying "I started this
job in" just say "Began job in"... Employers expect Resumes to be professional and avoid reference
to oneself; and instead speaking in an impersonal tone that presents
achievements/skills/experience/education without personalization. Avoid words like "I", "my", "he",
"she", etc. Leave out personal pronouns and only use the action words/verbs. This also includes
your Ob....
How To Make A Decent Forum
Some great tips on how to make and maintain a good forum (8) -Firstly, come on, use a decent forum system. Visitors to forums hate advertisements. The best way
to guarantee no ads is to host it yourself. There’s loads of free web hosts out there- there’s loads
of free forum software, too. So, come on! It doesn’t take much energy to find a good host and
upload some files. I think the two best forum softwares to use are SMF(www.simplemachines.org) and
phpBB(www.phpbb.com). -Secondly, if anybody is actually reading the topic with the link to your
forum in, they must be dedicated to this one, and not many people are dedicated to ....
Mootools - My Favourite Javascript Library
(3) It kind of amazes me that there's not even a mention of the Mootools javascript library
throughout this whole forum. So here I'll do a brief introduction and a tutorial on how to
produce the famous accordion effect. MooTools is a compact, modular, Object-Oriented javascript
framework designed to make writing extensible and compatible code easier and faster. MooTools lets
you get the job done efficiently and effectively. It is slightly based on the powerful Prototype
javascript framework , of which Scriptaculous runs on. (But frankly, I dislike Scriptaculou....
Javascript Scroll Bar
A scroll bar for your webpage using javascript (13) In this tutorial I will show you how to create two buttons in the bottom left of the screen that,
when hovered over, will scroll the page. Now to start with, we must create a our buttons, the first
line will create a div element, or block. Using blocks you can position items anywhere on a page.
We use the ID property just to let us know what the block is used for, as for the first block, its
obvious that it contains the vertical buttons and the second two blocks contains the horizontal
buttons. The style property of the div tag tells the browser how to draw it, in the....
Simple Scripts In Html And Javascript
Things like BackgroundColorChanger and so (7) like in the topic, here is a description how to change the Backgroundcolor "On The Fly", by klicking
on a button or radio-box first, we ned the html-and body-tags, create a new html-file on your
desktop and write the following: QUOTE <script language = "JAVASCRIPT">
browser interpretation: html - tag means "hey, browser, here comes HTML" in the body-tag you define
the looking of your site. you can add things like "bgcolor" for the background, "text" for the
textcolor and link / alink / hlink / vlink to define the linkcolor ( ) the scripttag i....
Javascript Framework - A Shortcut Javascript
a shortcut javascript (3) hi, today im going to give you small tutorial how to use `Prototype JavaScript Framework`
1st you have to download `Prototype JavaScript Framework`library from
http://prototype.conio.net/ prototype makes easy to using Javascript, ex : when you want to point
(get) the element from HTML usually we use : CODE
document.getElementById('elementId') with prototype we use CODE
$('elementId') , yeah...world getting small..with prototype. example
we`re going to get value from an element of CODE &#....
Handy Javascript Code Snips
Ready to Apply in your webpage (5) /tongue.gif' border='0' style='vertical-align:middle' alt='tongue.gif' /> Some common things to
implement in our webpage very frequently are as follows. How to implement all these I am going to
tell you in this tutorial. Add To Favorite Set As Homepage Go To Top Of Page No Right Click
Print Page Adding Current Date Adding Current Time Pop-Up Page Creation Closing Window
Copyright Notice Updation 01. Add To Favorite Someone may be interested in the content of your
page. Offer him/her to add the page in his/her favorite menu. To do this you have ....
Image Rollovers In Javascript
A Write-Once, Use-Anywhere Approach (11) Tutorial: Image Rollovers w/ Javascript, by Rob J. Secord, B.Sc. (SystemWisdom) See a
working Sample of this Script! Download a ZIP containing all working files in this
tutorial! Note: If you are not interested in reading this entire tutorial and/or have a basic
understanding of the underlying concepts, you may safely skip to the Implementation section to get
the code! Description : A Dynamic Image Rollover Script tested to work in 4 major internet
browsers: MSIE, FireFox, Netscape and Opera. Using only Javascript combined with regular HT....
Css And Javascript Combined For Dynamic Layout
use of different CSS files at same site (9) This tutorial is meant for people that are dealing with problems while coding their site at 100% of
width. Important notice: Some people has JavaScript disabled, so they will not be able to load CSS
file (take this in account when creating your website). How this script works. In the HEAD of your
HTML document will apply this command, so variable.js file will be load at start: CODE
<script type="text/javascript" src="variable.js"></script> In
browser JavaScript file variable.js is loaded. This Javascript file consist of this para....
How To: Change An Image When A User Clicks On It
using both php and javascript (11) How To: Change An Image When A User Clicks On It using both php and javascript - a powerful
combination I have seen quite a few how tos offering a method of doing this but none of which
resembled my method of making use of both php and javascript. This code is fairly repetitive and
most of the functions are easy to pick-up if you haven't heard of them before. Here it is...
Create your two images. Call them anything you like, you'd just need to change their filenames
in $imgano $imgayes. In fact with this script you can easily create more tha....
Saint-michaels Html Tips And Tricks #4
been awhile so here somewhat new stuff (12) WEll its been awhile since i did so i will put up some more useful html tips and tricks here on
trap17.com Ok for trick actually, want to know how some websites got those ool icons put on their
website link in the favorites folder well here you go in 3 quick steps. 1. create an image then
shrink it down to 16x16 and save it as avicon .bmp. 2. then change it to .ico, when is the file
reconizing it as a icon., if you are having problems saving it, there are some resources out there
that can change it for you. 3. load the image to your website and add this tag in betwee....
Creating Rollovers With Buttons
Short & simple javascript tutorial that shows you how. (2) Javascript in action can render some very neat visual effects, which can make your website more
appealing, and sometimes even easier to navigate. Among the most common effects are the
'button' effect, and the mouseover effect. The buttons are very common, of course; if
nowhere else, most of us have seen them at the end of forms (Click the 'submit' button to
proceed...). The basic idea is to have a 'depressible' object, which can give you the
illusion that you're 'pressing' it when you click it. The rollover effect causes
something to h....
Saint Michael's Dhtml Tips And Tricks Issue #2
well i thought i catch up in my issues so heres some more (0) Todays is were are going to do some text effects that should be interesting for some people, the
first one we are going to talk about is the matrix scrolling text effect, if you seen the moives and
about 99% of you have then you know about hte computer screens now you can do it. this is done in a
2 step process. STEP 1: Insert this script in the head tags QUOTE .matrix {
font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:10px;
padding:0px; margin:0px;} <script type="text/javascript" language="JavaScript"> <!--....
Image Preloader With Progress Bar Status
Pure Client-Side JavaScript tested in 4 Browsers! (22) Tutorial: Image Preloader with Progress Bar, by Rob J. Secord, B.Sc. (SystemWisdom)
Description : A Tutorial for a Client-Side Image Preloader with Dynamic Real-Time Progress Bar
Indicator written in JavaScript! Tested to work with 4 Major Internet Browsers: Firefox, MSIE,
Netscape, Opera (Complete sample solution provided at end of tutorial, just put it on your
web-server, add your images and go!) Intended Audience : Beginner to Intermediate Web
Developers. Although this tutorial will cover some advanced aspects of JavaScript, I will try to
explain....
Saint-michael Html Tips And Tricks Issue #3
exploring meta tags and what uses they have (0) Todays issue we are going to talk about a bunch of good newbie stuff. The first is meta tags to
make it easy use a generator, from my searches on the internet ther are soe many meta tags to use
its not even funny but for those whoe like them is are the more common ones that are used for a
website. QUOTE also for a dynamic look using the meta this called page
fading so to speak, what it does when you click on a link the website will fade for a duration of
time to the next page on your site warning it doesn't do anything when you first cl....
Saint Michael Xhtml Tips And Tricks #1
xhtml= html 5.0 :P (3) Well by the many views i have seen on my web design issues i should go into new territory, so im
going start with some useful xhtml info for you web design fenatics, the info i present to you is
from other websites so be warned it might or might not work all depends but lets start off with the
basic info for using xhtml. Also this tutorial is for beginners so i won't be doing any xml
info due to it being a more server side then actually webdesign 1. DOCTYPE this is used to tell
the browser what kind of infomation it will be displaying. nothing as really changed....
Saint Michael Css2 Tips And Tricks Issue #1
css tips and tricks for you beginners and experts (1) since my htmls tips and tricks issues are hot on the forum i decided to do some css stuff so lets
get to work all you beginners and experts. Also note to those who read this is coming from other
websites so i am not claming any rights to this info even though some people think if they make it,
its theirs which is bs cuz if that were true then there would not be to many websites on the
internet now would their?. Ok the scripting im using for right now is the the actually scripting
on the website without external linking first css trick that is sometimes good to use is....
Saint-michaels Html Tips And Tricks Issue # 2
some more tricks of the trade and some wierd stuff to (2) Well i thought it was time to bring in issue 2 of html tips and tricks and i found a very
interesting html coding which i thought was funny as hell its called Preventing Search Engine
Indexing this coding is used to keep your website from being index why i don't know why you
don't want you website listed unless it someone stupid as in telletubbies.com but heres the code
This tag tells the robots not to index this page and not to follow any links within the
page. QUOTE This tag tells the robots not to index this page, but follow any links wit....
Saint_michael Html Tips & Tricks Issue #1
useful html stuff (1) this little trick i though was useful it used to send a visitor to another page using meta tag and
it sends the user to another page with in a few seconds for example you will go to the new page in 5
seconds CODE <META HTTP-EQUIV=REFRESH
CONTENT="5;URL=http://www.yoursitehere.com"> and for those have a good knowledge
of javascript they could use this script right here CODE <html> <head>
<title>Refresh Page</title> <script language="JavaScript">
<!-- var time = null function move&#....
Opening New Tabs With Javascript
(1) I just spent a couple of hours trying to figure out how to open new tabs from a Firefox sidebar. I
found lots of different suggestions but none worked. Well finally I found this and it works. var
browser = top.document.getElementById("content"); var tab = browser.addTab("http://www.google.com");
An even better way of doing it is through: const kWindowMediatorContractID =
"@mozilla.org/appshell/window-mediator;1"; const kWindowMediatorIID =
Components.interfaces.nsIWindowMediator; const kWindowMediator = Components.classes
.getService(kWindowMediatorIID); var browserWi....
Meta Tag Information
Tips 2 optimize listing in Search Engine (2) i know many of u here get this prob ., as ur site doesnt appear even after months /smile.gif'
border='0' style='vertical-align:middle' alt='smile.gif' /> i have a fer tips , am sure most of u
kno it Google sents out whats called a robot that looks over every thing on your site once thats
done your site gets listed. However where you are on that listing depends on way to many things to
go into here. The simplest thing to do is make sure you do Meta tags. another thing is to ad full
alt names to your images...robots like those..dont use the same name over and over a....
Looking for tool, tips, css, pop, tool, tip, javascript, involved
|
|
Searching Video's for tool, tips, css, pop, tool, tip, javascript, involved
|
advertisement
|
|
