Results 1 to 13 of 13
  1. #1
    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


  2. #2
    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" />
    That's the easy way, though it is not very stylish.

    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>
    Try it, even without pulling in an actual image, you'll get the idea for how this works. It's actually pretty lean and slick

    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

  3. #3
    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

  4. #4
    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.


  5. #5
    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.
    It is identical, except the box doesn't float with the cursor in my version.

    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>
    Try the other one and then this one. You'll see the difference.

    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

  6. #6
    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


  7. #7
    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?
    Correct

    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 no idea what LORE KB is, but contact forms are easy with the right processing script. If you just want some help putting basic forms together, I'll be glad to do it for the heck of it.

    But try out those scripts and see if they do what you're looking for them to do.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  8. #8
    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!

  9. #9
    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.


  10. #10
    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

  11. #11
    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

  12. #12
    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.

  13. #13
    Join Date
    Sep 2004
    Posts
    1,909
    Those are great examples as well. I appreciate you posting those links.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •