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?
 
WarpsehConnect With a Mentor Commented:
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
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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
 
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
 
Al_SararasAuthor Commented:
Works perfectly - much appreciated!
0
All Courses

From novice to tech pro — start learning today.