on hover load content into div?

[wowdavid2002]

hey guys, i'm trying to figure out how to load content into content.div when you hover or click on this <a href>Link</a> instead of loading a new page. is there a way to do this?

here is the html code i have for now. i'm sure its bad.. i'm a super noob now

<div class="container">
   <div class="sidebar1">
	    <ul id="nav">
         <li><img src="images/logo.png" name="bar" width="170" height="95" id="bar" /></li>	

			<li> <a href="#" id="Boom">Home</a> 
		
			<li><a href="#">Projects</a>
				<ul>
					<li><a href="#">Ratis Grief </a>
		
						<ul>
					</ul>
					</li>
					<li><a href="#">Construction</a>
						<ul>
		
						</ul>
					</li>				<li><a href="#">Nights</a>
						<ul>
		
						</ul>
					</li>
					<li><a href="#">Portraits</a></li>
							<li><a href="#">Geometry</a> 
						<ul>
		
						</ul>
					</li>
					<li><a href="#">Fleets</a></li>
		
			  </ul>
		  </li>
            
		
			<li><a href="#">Statement</a>
				<ul>
		
				
				</ul>
			</li>
            	<li><a href="#">Contact</a>
				  <ul>
		
				
				</ul>
			</li>
		
		</ul>
	
	</div><div class="content"></div>

[tempz]

Simple google search

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

div {
    display: none;
}

a:hover + div {
    display: block;
}

Example of the following: http://jsfiddle.net/Vqmaw/

This method uses CSS you can do it with Jquery etc.

[wowdavid2002]

how would i assign it to open into a specific div?

[tempz]

Change "div" to what ever you want? Update it in the css.

[VIPStephan]

For more advanced interaction you need JavaScript. Loading content into the page asynchronously (i. e. at a time other than on general page load) is done with a method commonly called “AJAX”. The search engine of your choice will tell you more.

[wowdavid2002]

yea.. i was able to find a jquery that would load the divs, but then it stopped working once i used it with the mootools scripts i need for my menu. in way over my head now!

[VIPStephan]

Yeah, that’s what I wrote this sticky thead for. If you insist in using mootools I’m sure it also has some AJAX functions. But in any case, AJAX is plain old JavaScript, you don’t need jQuery or mootools at all to do that (although they make things easier).