Results 1 to 13 of 13
Thread: Roll over Text Blurbs???
-
09-13-2006, 11:56 AM #1Web Hosting Master
- Join Date
- Sep 2004
- Posts
- 1,909
Roll over Text Blurbs???
Hi there,
Does anyone know where I can find the script that will display a block of text when you roll over either a text link or an image link?
The one I am looking for is the most commonly used script with host where next to the features there is a question mark. When you roll over it - a text box appears with information regarding that feature?
I'm not really ignorant on locating the script - just figured this would be faster and plus, I'm not sure really how to word it so I find the right one when I do a search.
Have sympathy on me please - your help is great appreciated.
Jerett
-
09-13-2006, 01:20 PM #2Retired Moderator
- Join Date
- May 2004
- Location
- Pflugerville, TX
- Posts
- 11,231
There are a couple ways to do this.
Code:<img src="questionmark.gif" alt="" title="Here's some rollover text" />
Now, here's a more complicated way, but way nicer to look at:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <script type="text/javascript"> function show(obj,event,foo) { document.getElementById('stuff').style.visibility = "visible"; document.getElementById('stuff').innerHTML = document.getElementById(foo).title; document.getElementById('stuff').style.left = event.clientX; document.getElementById('stuff').style.top = event.clientY; } function hide() { document.getElementById('stuff').style.visibility = "hidden"; } </script> <style type="text/css"> #stuff { border:1px solid #000 ; background:#FFF ; color:#000 ; padding:5px ; position:absolute ; visibility:hidden } </style> </head> <body> <div id="stuff">FOO!</div> <p><img src="questionmark.gif" alt="" title="Here's some rollover text - Q1" id="q1" onmouseover="show(this,event,'q1');" onmouseout="hide();"></p> <p><img src="questionmark.gif" alt="" title="Here's some rollover text - Q2" id="q2" onmouseover="show(this,event,'q2');" onmouseout="hide();"></p> <p><img src="questionmark.gif" alt="" title="Here's some rollover text - Q3" id="q3" onmouseover="show(this,event,'q3');" onmouseout="hide();"></p> <p><img src="questionmark.gif" alt="" title="Here's some rollover text - Q4" id="q4" onmouseover="show(this,event,'q4');" onmouseout="hide();"></p> <p><img src="questionmark.gif" alt="" title="Here's some rollover text - Q5" id="q5" onmouseover="show(this,event,'q5');" onmouseout="hide();"></p> </body> </html>
Please pardon the HTML 4.01 Transitional. It required less keystrokes to write it, and I get a little lazy from time to time. It'll validate to strict just fine, and I'm sure you can make it XHTML with little difficulty.Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design
-
09-13-2006, 01:59 PM #3Retired Moderator
- Join Date
- May 2004
- Location
- Pflugerville, TX
- Posts
- 11,231
I should add, this script takes accessibility into consideration. If someone has JavaScript disabled or not available in their browser, the title will make itself available as the fallback mechanism. It will both pop up, and it will play nice with screenreaders. This is why I'm pulling the title attribute into the popup <div>, as opposed to housing a series of hidden <div>s on the page and popping them up, which is also common.
(the script is unique, albeit researched, but unique and open for public use - no credit necessary)Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design
-
09-13-2006, 03:37 PM #4Web Hosting Master
- Join Date
- Sep 2004
- Posts
- 1,909
Paul - thanks brother. I will try and see what I can do with it. My coding has not been up to par and so basic html is best of me. Still havent learned XHTML.
However, is this the same sort of script being utilized in some fashion by other host? One off hand that I can think of is Surfspeedy.
http://surfspeedy.com/shared_hosting/index.htm
Thanks again Paul.
5 out of 5 people agree, Paul is a web designer.
-
09-13-2006, 03:47 PM #5Retired Moderator
- Join Date
- May 2004
- Location
- Pflugerville, TX
- Posts
- 11,231
However, is this the same sort of script being utilized in some fashion by other host? One off hand that I can think of is Surfspeedy.
Making it float is actually pretty easy:Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <script type="text/javascript"> function show(obj,event,foo) { document.getElementById('stuff').style.visibility = "visible"; document.getElementById('stuff').innerHTML = document.getElementById(foo).title; document.getElementById('stuff').style.left = event.clientX; document.getElementById('stuff').style.top = event.clientY; } function hide() { document.getElementById('stuff').style.visibility = "hidden"; } </script> <style type="text/css"> #stuff { border:1px solid #000 ; background:#FFF ; color:#000 ; padding:5px ; position:absolute ; visibility:hidden } </style> </head> <body> <div id="stuff">FOO!</div> <p><img src="questionmark.gif" alt="" title="Here's some rollover text - Q1" id="q1" onmousemove="show(this,event,'q1');" onmouseout="hide();"></p> <p><img src="questionmark.gif" alt="" title="Here's some rollover text - Q2" id="q2" onmousemove="show(this,event,'q2');" onmouseout="hide();"></p> <p><img src="questionmark.gif" alt="" title="Here's some rollover text - Q3" id="q3" onmousemove="show(this,event,'q3');" onmouseout="hide();"></p> <p><img src="questionmark.gif" alt="" title="Here's some rollover text - Q4" id="q4" onmousemove="show(this,event,'q4');" onmouseout="hide();"></p> <p><img src="questionmark.gif" alt="" title="Here's some rollover text - Q5" id="q5" onmousemove="show(this,event,'q5');" onmouseout="hide();"></p> </body> </html>
Also, you'll need to set height and width for the images in order for Firefox to give you something over which to roll your mouse (I didn't set any, and Firefox treats this like the images don't exist...since they don't ). Or, use an actual image where I planted those generic images, and you can see the effect just fine.Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design
-
09-13-2006, 04:03 PM #6Web Hosting Master
- Join Date
- Sep 2004
- Posts
- 1,909
So my text - regardless of size would go where the title tag is in the img - correct?
Thanks Paull. I am going to give this a shot when I get home not to mention work on my support center.
Can you shoot me a pm Paul if you have time on what it might cost to knock out some simple contact forms? I have LORE KB and wanted to utilize their contact us option but upgrade the form to do a few things - simple - but still - not my fortay. I just want to get an idea incase I need assistance.
I'll shoot you the idea I have in the pm.
Thanks
-
09-13-2006, 04:10 PM #7Retired Moderator
- Join Date
- May 2004
- Location
- Pflugerville, TX
- Posts
- 11,231
So my text - regardless of size would go where the title tag is in the img - correct?
Can you shoot me a pm Paul if you have time on what it might cost to knock out some simple contact forms?
But try out those scripts and see if they do what you're looking for them to do.Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design
-
09-13-2006, 04:12 PM #8Web Hosting Master
- Join Date
- Sep 2005
- Location
- Middle England
- Posts
- 918
You could use a CSS method. See http://www.dynamicdrive.com/style/cs...-image-viewer/ - all the CSS is there for the text on hover - just strip out the images!
-
09-13-2006, 04:22 PM #9Web Hosting Master
- Join Date
- Sep 2004
- Posts
- 1,909
Not bad either. I think I am going to try them Pauls first and then have a look at the other. I am always up to learning new things. and Paul - ill pm you.
-
09-13-2006, 04:36 PM #10Retired Moderator
- Join Date
- May 2004
- Location
- Pflugerville, TX
- Posts
- 11,231
Sounds good Jerett. The CSS version looks quite interesting - thanks for posting it, bluedreamer
Typically, the "proper" separation of tasks within a Web page are (X)HTML -> structure, CSS -> style and JavaScript -> behavior. "Proper" is in quotes, because there's some debate on the difference between style and behavior with specific functionality. In this case, I think of what's happening on the page as being behavioral, and in the interest of maintaining the aforementioned separation (and keeping the markup nice and lean) while keeping the page optimally accessible, I prefer going the JS route.
The next developer will come along and tell you this falls under style. Maybe he (or she) is right...Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design
-
09-14-2006, 02:28 AM #11Web Hosting Master
- Join Date
- Apr 2006
- Posts
- 562
CSSplay has some good examples of this too:
Balloon Pop-Ups:
http://www.cssplay.co.uk/menu/balloons.html
Pop-Up Images on Inline Links:
http://www.cssplay.co.uk/menu/pop_ups.html
Javascript-esque Pop-Up:
http://www.cssplay.co.uk/menu/alert.html
-
09-14-2006, 02:53 AM #12Web Hosting Master
- Join Date
- Jul 2004
- Posts
- 2,360
And another reason for using this over title tooltip is because title disappears after sometime, not good when it is a long message.
-
09-14-2006, 09:23 AM #13Web Hosting Master
- Join Date
- Sep 2004
- Posts
- 1,909
Those are great examples as well. I appreciate you posting those links.