Large textbox on hover

bargall · 06-11-2012, 06:51 PM

I'm developing a visual resume, and have a timeline of my experience and education. When you hover over the bars or text on the timeline, I want a textbox with a paragraph detailing more information to appear then disappear when the mouse moves again. I have the timeline developed, images and text, through Photoshop and I am using Dreamweaver to develop. It has been a LONG time since I have used DW, so I can't remember how to do this.

Is it possible with an image? I want it to be like an image map, except rather than clicking to go to an additional page, the box will pop up with text. I do NOT want a tooltip. I want a large amount of text.

jmrker · 06-11-2012, 06:58 PM

Are you looking for something like this?
http://www.simile-widgets.org/timeline/

bargall · 06-11-2012, 07:09 PM

No, more like what you do on vizualize me.

I made one through the site here vizualize.me/brittany.argall

However, I am not happy with any of the cookie cutter themes and am developing one on my own. See how when you scroll over the timeline it gives you a description? That's what I need to be able to do.

bargall · 06-11-2012, 07:21 PM

I basically need to make an image map, but rather than taking you to a new page when you click or mouseover the hotspot, I need a textbox to come up.

xelawho · 06-11-2012, 08:10 PM

here is a simple example, maybe you can adapt it...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>

		<style type="text/css">
		#details{
		position:absolute;
		width:400px;
		display:none;
		}
		</style>
	</head>
	
	<body>
<div id="info">	
<span id="education2009to2011">Education 2009 to 2011</span>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<span id="education2007to2009">Education 2007 to 2009</span>
</div>
<div id="details"></div>
		<script type="text/javascript">
if (window.addEventListener)
addEvent = function(ob, type, fn ) {
ob.addEventListener(type, fn, false );
};
else if (document.attachEvent)
addEvent = function(ob, type, fn ) {
var eProp = type + fn;
ob['e'+eProp] = fn;
ob[eProp] = function(){ob['e'+eProp]( window.event );};
ob.attachEvent( 'on'+type, ob[eProp]);
};
*
var text={
education2009to2011:"2011 Summa Cum Laude Graduate; 2010 and 2011 Honors Convocation Honoree; Blue Key Honors Society; Kappa Delta Pi Honors Society for Education; Tau Lambda Honors Society; Sigma Pi Epsilon Delta Honors Society; National Science Teachers Association",
education2007to2009:"Graduated top 5% of class; President, Future Educators Association; National Honors Society; President, New Student Tour Guide Group; Future Leaders of York Graduate 2006; Organized a benefit concert totaling $1,200 for Olivia's House and the Reid Menzer Memorial Skate Park"
}
var spans=document.getElementById("info").getElementsByTagName("span")
for (var i = 0; i < spans.length; i++) {
addEvent(spans[i],'mouseover',function(event){showinfo(event,this.id)});
addEvent(spans[i],'mouseout',hideinfo);
}

function showinfo(e,divid){
var square = document.getElementById ("details");
var posx = 0;
				var posy = 0;
				if (e==null)
				e = window.event;
				if (e.pageX || e.pageY){
				posx = e.pageX;
				posy = e.pageY;
					}
				else if (e.clientX || e.clientY){
				posx = (e.clientX + document.body.scrollLeft
				+ document.documentElement.scrollLeft);
				posy = (e.clientY + document.body.scrollTop
				+ document.documentElement.scrollTop);
						} 
                square.style.left = posx+15 + "px";
                square.style.top = posy+20 + "px";
square.innerHTML=text[divid]
square.style.display="block"
}

function hideinfo(){
document.getElementById("details").style.display="none"
}
		</script>		
	</body>
</html>