How to Display text - onMouseOver

Hi,

When a cursor passes over a button I would like to display some text so it appears over the button - but not as an alert. At the same time I would also like the cursor to change to the hand.

I know how to change the cursor to a hand - now I want to add some text to be displayed at the same time.

Thanks!
Al_SararasAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rbudjCommented:
0
erikTsomikSystem Architect, CF programmer Commented:
try this
<input type="button" id="nam" name="nam" value="Save" onmouseover="this.style.cursor='hand'; document.getElementById('nam').value='Submitting...';" onmouseout="document.getElementById('nam').value='Save';"/>

Open in new window

0
Al_SararasAuthor Commented:
Sorry - I said button but actually it is an image that represents a button - the following is the code I have without the text ...

<TD width="8%" height="19" align="left" valign="middle">
<IMG
border="0" src="../images/dcsearch.jpg" width="82" height="25"
onMouseOver="this.style.cursor='hand'"

I had already checked w3schools but the example there used an alert box - I just want text to be displayed over the image (or to the side).
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

WarpsehCommented:
Try this (the OnMouseOut part you can remove it if you don't want the text to disappear):
<IMG
border="0" src="../images/dcsearch.jpg" width="82" height="25"
onMouseOver="this.style.cursor='pointer';document.getElementById('hoverText').style.display='inline'" onMouseOut="this.style.cursor='default';document.getElementById('hoverText').style.display='none'"><span id="hoverText" style="display:none">Text to appear on MouseOver</span>

Open in new window

0
WarpsehCommented:
One more thing, in my example, i used the cursor: pointer, it's better than hand, as it also works on firefox (hand is only for internet explorer)
0
Al_SararasAuthor Commented:
Thanks Warpseh,

I tried mixing your code with what I had and not quite there .... I screwed up somewhere ... I also had an onClick with this image that I hadn't included in the above code snippet (I had tried several different attempts from googling and had commented them out - the onClick was after this commented out logic).

Just to clarify - on the mouseover - the text should appear above the image (the iimage is a button with the text 'Search' which should remain unchanged) - and I do want the onMouseOut so the text disappears.

This my code

<TD width="8%" height="19" align="left" valign="middle">
<img  
 border="0" src="../images/dcsearch.jpg" width="82" height="25"

 onMouseOver="this.style.cursor='pointer';document.getElementById('hoverText').style.display='inline'"
 onMouseOut="this.style.cursor='default';document.getElementById('hoverText').style.display='none'"
 onClick="document.myform.submit()"
 <span id="hoverText" style="display:none">Case sensitive</span>></TD>

0
WarpsehCommented:
I think this might be what you are looking for:
<TD width="8%" height="19" align="left" valign="middle" onMouseOver="this.style.cursor='pointer';document.getElementById('hoverText').style.display='inline'"
 onMouseOut="this.style.cursor='default';document.getElementById('hoverText').style.display='none'"
 onClick="document.myform.submit()"
>
    <span id="hoverText" style="display:none">Case sensitive</span>
<img  
 border="0" src="../images/dcsearch.jpg" width="82" height="25" />
 <span id="hoverText" style="display:none">Case sensitive</span>
 </TD>

Open in new window

0
Al_SararasAuthor Commented:
The text is appearing just like I needed - but the impact of the text display on the onMouseOver drops everthing that is below that spot on the web page by 1 row - and then goes back up 1 row on the onMouseOut.  Is there a way to do this where there is no up/down movement of the rest of the content of the web page.

Thanks!
0
WarpsehCommented:
Uou could do that by already leaving the space clear, using visibility instead of display. Here:
<TD width="8%" height="19" align="left" valign="middle" onMouseOver="this.style.cursor='pointer';document.getElementById('hoverText').style.visibility='visible'"
 onMouseOut="this.style.cursor='default';document.getElementById('hoverText').style.visibility='hidden'"
 onClick="document.myform.submit()"
>
    <span id="hoverText" style="visibility:hidden">Case sensitive</span>
<img  
 border="0" src="../images/dcsearch.jpg" width="82" height="25" />
 </TD>

Open in new window

0
Al_SararasAuthor Commented:

I quickly checked and didn't see a color attribute - is there a way to change the color of the text - black doesn't work with the colors of the web page?

Otherwise - this is exactly what I needed.  

Thanks for your help!


Thanks!
0
WarpsehCommented:
Try this one, change the color inside the span's style  to match the one you want:
<TD width="8%" height="19" align="left" valign="middle" onMouseOver="this.style.cursor='pointer';document.getElementById('hoverText').style.visibility='visible'"
 onMouseOut="this.style.cursor='default';document.getElementById('hoverText').style.visibility='hidden'"
 onClick="document.myform.submit()"
>
    <span id="hoverText" style="visibility:hidden; color:#00CC66">Case sensitive</span>
<img  
 border="0" src="../images/dcsearch.jpg" width="82" height="25" />
 </TD>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Al_SararasAuthor Commented:
Works perfectly - much appreciated!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.