?
Solved

OnMouseOver/OnMouseDown textbox for text, not over an image or link

Posted on 2005-05-08
7
Medium Priority
?
359 Views
Last Modified: 2013-12-13
I'm *very* new to PhP, and this question should be very simple. I have a list of names on a roster in PhP and would like to allow users to either click or simply move their mouse over a name - which is NOT an image or link, just a name in simple text - and have a small yellow text box appear with one or two words.  Much like the TITLE on an A HREF link, but the names are text and not links.  Is this possible?

I know this is probably extremely simple, but I gave it 100 pts because its somewhat urgent.  Thanks in advance.  
0
Comment
Question by:GregWhiteside
  • 4
  • 3
7 Comments
 
LVL 32

Accepted Solution

by:
Batalf earned 400 total points
ID: 13953480
Yes this is possible by using the title attribute on a <span> or <p> tag

Example:

<span title="Hello there">This is a test</span><br>
<span title="New test">This is is also a test</span><br>

Batalf
0
 

Author Comment

by:GregWhiteside
ID: 13953523
Thanks a bunch Batalf.  That was exactly what I was looking for.  Is there any way to edit the text (size, bold, etc) in the span title?  Also, is there a way to accomplish this with a mousedown?

Cheers!
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13953537
Yes, that's possible.

example:

<style type="text/css">
span{
      cursor:pointer;
}
.highlighted{
      font-weight:bold;
}
.normal{
      font-weight:normal;
}
</style>
<script type="text/javascript">
var activeSpan = false;
function toggleDown(obj){
      if(activeSpan){
            activeSpan.className='normal';
      }
      obj.className='highlighted';
      activeSpan = obj;      
}
</script>
<span title="Hello there" onmousedown="toggleDown(this)">This is a test</span><br>
<span title="New test" onmousedown="toggleDown(this)">This is is also a test</span><br>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:GregWhiteside
ID: 13953749
Thanks again,

Where should the script be added in the file?  (yes, I'm that new :-( )
0
 

Author Comment

by:GregWhiteside
ID: 13953784
Scratch that last comment.  I got the script working, and it didn't quite do what I expected.  I suppose the most important question is using the simple:

<span title="Hello there">This is a test</span>


Is there a way I can make the "Hello there," in the yellow pop-up, bolder or larger?  
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13953786
The CSS part

span{
     cursor:pointer;
}
.highlighted{
     font-weight:bold;
}
.normal{
     font-weight:normal;
}

could be placed in a file with extension .css. Then you could use the <link> tag to include it into your files

<link rel="stylesheet" type="text/css" href="myCSS.css" id="thecss">
(Put the line above in between <head> and </head>)

The script

var activeSpan = false;
function toggleDown(obj){
     if(activeSpan){
          activeSpan.className='normal';
     }
     obj.className='highlighted';
     activeSpan = obj;    
}

could also be put in an external js file, example myScript.js. Then use the <script> tag to include it

<script src="myScript.js" type="text/javascript"></script> (Put it in between <head> and </head>)

Please note that you don't have to put the files in external files, but it will make it possible for users to cache the files, and that could speed up your page. You can also put it between your <head> and </head> tags in your main page.

Also notice that when you put CSS or javascript in external files, you don't copy the start and end tag(<style type="text/css">, </style> <script type="text/javascript"> and </script>).


Batalf

0
 
LVL 32

Expert Comment

by:Batalf
ID: 13953803
No, I don't think you could modify the yellow popup.

It's built into the browser, and I don't think there's any method of modifying the size of that by Javascript or CSS.

If it's too small, then the alternative might be to create a custom box, i.e. use a combination of <div> tags and javascript to animate the yellow box.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses
Course of the Month14 days, 16 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question