pretty straight forward. Get the code, save it in a filename.html then run it. Hover over one of the sites named above the horizontal line to get further information below.
This is just to help some people learn JavaScript don't really care what the rating is just there to help people :)
<html>
<head>
<script type="text/JavaScript" language="JavaScript">
function a (info) {
switch (info) {
case "Hawkee":
document.getElementById("data").innerHTML = "Hawkee is a social network that focuses on social software and social shopping. Our members are active developers and consumers who share a fond interest in technology. From video games to PHP scripting we cover a variety of topics for the technically inclined. Users can share code snippets, product reviews, comments, screenshots, photos and downloads in order to gain valuable feedback from friends in their network.";
break;
case "XCodes":
document.getElementById("data").innerHTML = "X-Static Codes is a website based on many different coding languages";
break;
case "CodeDB":
document.getElementById("data").innerHTML = "CodeDB (Code Database) is a website based on many different coding languages";
break;
}
}
</script>
</head>
<body>
<b>To get more information about a site, hover over it.</b><br />
<span onmouseover='JavaScript:a("Hawkee")'>Hawkee.com</span> <b> | </b>
<span onmouseover='JavaScript:a("XCodes")'>X-Static Codes</span> <b> | </b>
<span onmouseover='JavaScript:a("CodeDB")'>CodeDb</span> <b> | </b>
<hr />
<div id="data" class="data"></div>
</body>
</html>
html:
<span class='mover' name="Hawkee is a social network that focuses on social software and social shopping. Our members are active developers and consumers who share a fond interest in technology. From video games to PHP scripting we cover a variety of topics for the technically inclined. Users can share code snippets, product reviews, comments, screenshots, photos and downloads in order to gain valuable feedback from friends in their network.">Hawkee.com</span> <b> | </b>
<span class='mover' name="X-Static Codes is a website based on many different coding languages">X-Static Codes</span> <b> | </b>
<span class='mover' name="CodeDB (Code Database) is a website based on many different coding languages">CodeDb</span> <b> | </b>
<hr />
<div class="data"></div>
javascript:
$('.mover').hover(function(){$('.data').text($(this).attr('name'));},function(){$('.data').text('');});
basic html:
<span class='mover' name='ROLLOVER TEXT'>Rollover me!</span><span class='data'></span>
does the same thing yours does, but with one line of javascript =] jquery ftw
I found it useful also. I adapted it for my own needs however!
Changed slightly:
<span onmouseover=\'JavaScript:a(\"Hawkee\")\' onmouseout=\'Javascript:a(\"Null\")\' >Hawkee.com
and added this to the end of the Javascript cases(before two final \'} }\' ):
case \"Null\":
document.getElementById(\"data\").innerHTML = \"\";
break;
This means that when the mouse no longer hovers over, the text vanishes!
