Change and change-back formatted text in a <div> element upon mouseover.

This site is best viewed in a modern browser with JavaScript enabled.

Change and change-back formatted text in a <div> element upon mouseover.

Rhyknowscerious

Hi. I am working on a Web site consisting of 6 pages. There are 6 <a>nchors (links) on the left side of the page for navigation.

The Web site is displayed in a way where most of it does not change except for a small content <div> to the right of the table of contents. The entire page is supposed to fit onto a screen without the need of scrolling. The home page displays a welcome message in that content <div> when the page first loads.

Here's where I am having all kinds of trouble:
1) Right now, users are required to click on a link and open a whole new Web page to merely make it appear that the content <div> changed. Instead, I want JavaScript to change the content in the <div> when users hover the mouse over the link. (This will help me eliminate the need for having multiple html documents.)

2) When the user's mouse leaves the link area, I want the text to return to its original message. (Normally the content does not change back when the mouse leaves the link area, of course.)

3) I would like to have users actually click the link to prevent the content <div> from changing when the mouse leaves the link's area.

My whole goal, besides making an interactive Web site, is to both reduce the Web site to one page and to also make it pass w3c's strict XHTML validation checker.

Notes:
I tried document.write() but it erased my page and printed only the text which was supposed to show up in my content <div>.

I used document.getElementByID().innerHTML="" which seemed to work for regular text but it would not work when I included <span style="what:ever;">Content Message...</span> between the innerHTML quotes.

If I were rich, I would give you a million dollars to teach me how to do this, but I'm not, so I'll give you a great big pat on the back instead!

Padonak

this demonstrates how to change the content but it does not fully fit your needs because it is not clear to me from where are you going to get new portions of the content

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>123</title>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#fff;color:#000;padding:0px;margin:0px;}
#menu{position:absolute;top:10px;left:10px;padding:10px 10px 50px 10px;width:10&#37;;border:1px dashed #ccc;color:#000;background-color:#f1fdf0;}
#menu a{display:block;text-decoration:none;margin-top:50px;}
#content{color:#000;background-color:#fff;padding-top:200px;}
#content div{margin-top:20px;}
#tipbox{position:absolute;left:85%;top:30px;display:block;border:1px dashed #ccc;color:Yellow;background-color:#000;width:100px;padding:10px;font-size:14px;}
</style>
<script type="text/javascript">
var tips=[['MouseOVER tip 1','MouseOUT tip 1','Click tip 1'],
['MouseOVER tip 2','MouseOUT tip 2','Click tip 2'],
['MouseOVER tip 3','MouseOUT tip 3','Click tip 3']],
contents=[
['<a href="#null"><img src="http://cdn4.staztic.com/cdn/logos/krcotrash2boobs01-2.png:w25h25" alt="" /></a>',
'<a href="#null"><img src="http://cdn4.staztic.com/cdn/logos/krcotrash2boobs01-2.png:w50h50" alt="" /></a>',
'<a href="#null"><img src="http://cdn4.staztic.com/cdn/logos/krcotrash2boobs01-2.png:w75h75" alt="" /></a>'],
['<div><img src="http://cdn4.staztic.com/cdn/logos/comtg1passassass-5.png:w24h24" alt="" /></div>',
'<div><img src="http://cdn4.staztic.com/cdn/logos/comtg1passassass-5.png:w48h48" alt="" /></div>',
'<div><img src="http://cdn4.staztic.com/cdn/logos/comtg1passassass-5.png:w96h96" alt="" /></div>'],
['<img src="http://a.dryicons.com/images/icon_sets/coquette_part_5_icons_set/png/128x128/html_file.png" alt="" /></br />',
'<img src="http://denweb.ru/wp-content/uploads/2011/02/1297635060_file_HTML.png" alt="" /><br />',
'<img src="http://files.softicons.com/download/system-icons/lozengue-filetype-icons-by-gurato/png/256/HTML.png" alt="" /><br />']
];
$(document).ready(function(){$('#menu a').each(function(i){$(this).mouseover(function(){$('#tipbox').html(tips[i][0]);$('#content').html(contents[i][0]);});$(this).mouseout(function(){$('#tipbox').html(tips[i][1]);$('#content').html(contents[i][1]);});$(this).click(function(){$('#tipbox').html(tips[i][2]);$('#content').html(contents[i][2]);});});});
</script>
</head>
<body>
<center>
<div id="menu"><a href="#null">link1</a><a href="#null">link1</a><a href="#null">link1</a></div>
<div id="content"><div>tons of spam</div><div>tons of spam</div><div>tons of spam</div><div>tons of spam</div><div>tons of spam</div></div>
<div id="tipbox">tips go here</div>
</center>
</body>
</html>

nap0leon

Here's an example that uses an event listener on each div with a specified ID. When the user mousesover a certain DIV, the "popup" for that div displays. when the user mouses-out of that div, the popup goes away.

Note: this page has another feature that you probably don't need - if the user clicks on the link, the "popup" content for that DIV goes away. If you don't want users to be able to hide-by-click, remove the 3 "click" event listners (leaving only "mouseover" and "mouseout".

<script>
function AddEventListener(element, eventType, handler, capture)
{
	if (element.addEventListener)
		element.addEventListener(eventType, handler, capture);
	else if (element.attachEvent)
		element.attachEvent("on" + eventType, handler);
}

window.onload = function()
{
	AddEventListener(document.getElementById("RockySays"), "mouseover", function(e){
		document.getElementById('popup1').style.display = 'inline';
		document.getElementById('popup2').style.display = 'none';
		document.getElementById('popup3').style.display = 'none';
	}, false);

AddEventListener(document.getElementById("ArnoldSays"), "mouseover", function(e){
	document.getElementById('popup1').style.display = 'none';
	document.getElementById('popup2').style.display = 'inline';
	document.getElementById('popup3').style.display = 'none';
}, false);

AddEventListener(document.getElementById("JJSays"), "mouseover", function(e){
	document.getElementById('popup1').style.display = 'none';
	document.getElementById('popup2').style.display = 'none';
	document.getElementById('popup3').style.display = 'inline';
}, false);


AddEventListener(document.getElementById("RockySays"), "click", function(e){
	(document.getElementById('popup1').style.display = 'inline') ? document.getElementById('popup1').style.display = 'none' : document.getElementById('popup1').style.display = 'inline';
}, false);

AddEventListener(document.getElementById("ArnoldSays"), "click", function(e){
	(document.getElementById('popup2').style.display = 'inline') ? document.getElementById('popup2').style.display = 'none' : document.getElementById('popup2').style.display = 'inline';
}, false);

AddEventListener(document.getElementById("JJSays"), "click", function(e){
	(document.getElementById('popup3').style.display = 'inline') ? document.getElementById('popup3').style.display = 'none' : document.getElementById('popup3').style.display = 'inline';
}, false);

AddEventListener(document.getElementById("popup1"), "mouseout", function(e){
	document.getElementById('popup1').style.display = 'none';
}, false);

AddEventListener(document.getElementById("popup2"), "mouseout", function(e){
	document.getElementById('popup2').style.display = 'none';
}, false);

AddEventListener(document.getElementById("popup3"), "mouseout", function(e){
	document.getElementById('popup3').style.display = 'none';
}, false);

};
</script>
<style>
div {float:left;}
b {font-size:larger;}
#popup1 {display:none; border:1px solid black; overflow:auto; height:400px; width:400px;}
#popup2 {display:none; border:1px solid black; overflow:auto; height:400px; width:400px;}
#popup3 {display:none; border:1px solid black; overflow:auto; height:400px; width:400px;}
</style>
<div>
	<div id="nav">
		<span id="RockySays">Rocky says...</span><br/>
		<span id="ArnoldSays">Arnold says...</span><br/>
		<span id="JJSays">JJ says...</span><br/>
	</div>
	<div id="popup1">
	  <p><b>Yo Adrian</b></p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p><a href="">Link goes Here</a></p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
        </div>
	<div id="popup2"><b>Whatchu talkin' about Willis</b></div>
	<div id="popup3"><b>Dy-no-miiiiite!</b></div>
</div>