All,
How to get a mouse over text for the following code.On mouse over the text i have to display welcome.
<div id="sub1 sub2 sub3">some text</div>
Thanks....
All,
How to get a mouse over text for the following code.On mouse over the text i have to display welcome.
<div id="sub1 sub2 sub3">some text</div>
Thanks....
This is badly formed HTML. You need to either have a single id or space sperated classes. Either way if you're new I'd look into jQuery.
<div id="sub1">some text</div>
or
<div class="sub1 sub2 sub3">some text</div>
If you had the following HTML:
<div id="sub1">some text</div>
<div id="welcome" style="display:none;">Some welcome message</div>
$(document).ready(function() {
$('#sub1').hover(
function() { $('#welcome').show(); },
function() { $('#welcome').hide(); }
);
});
you'd probably want to include the events on your html:
<div id="sub1" onmouseover="showWelcome();" onmouseout="hideWelcome();">some text</div>
then your javascript would have these two functions
function showWelcome()
{
var welcome = document.getElementById('welcome');
welcome.style.display = 'block';
}
function hideWelcome()
{
var welcome = document.getElementById('welcome');
welcome.style.display = 'none';
}
Please note: this javascript doesn't take cross browser issues into consideration. for this you'd need to elaborate on your code, just another reason to use jquery.
<div onmouseover='alert("welcome")' id="sub1 sub2 sub3">some text</div>
Or something like this
Tested in IE8 & Firefox
<div id="sub1 sub2 sub3" title="welcome">some text</div>
I'm assuming you want to display the welcome when you mouse over "some text".
As a message box, this will be:
<div id="sub1" onmouseover="javascript:alert('Welcome!');">some text</div>
As a tooltip, it should be:
<div id="sub1" title="Welcome!">some text</div>
As a new div, you can use:
<dic id="sub1" onmouseover="javascript:var mydiv = document.createElement('div'); mydiv.height = 100; mydiv.width = 100; mydiv.zindex = 1000; mydiv.innerHTML = 'Welcome!'; mydiv.position = 'absolute'; mydiv.top = 0; mydiv.left = 0;">some text</div>
You should NEVER contain spaces in the id
of an element.
Here's a jQuery solution.
<script type="text/javascript" src="/path/to/your/copy/of/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sub1").mouseover(function() {
$("#welcome").toggle();
});
});
</script>
Using this markup:
<div id="sub1">some text</div>
<div id="welcome" style="display:none;">Welcome message</div>
You didn't really specify if (or when) you wanted to hide the welcome message, but this would toggle hiding or showing each time you moused over the text.
Using the title attribute:
<div id="sub1 sub2 sub3" title="some text on mouse over">some text</div>
the prototype way
<div id="sub1" title="some text on mouse over">some text</div>
<script type="text/javascript">//<![CDATA[
$("sub1").observe("mouseover", function() {
alert(this.readAttribute("title"));
});
//]]></script>
include Prototype Lib for testing
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>