Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Large textbox on hover

    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.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    38
    Thanked 505 Times in 499 Posts
    Are you looking for something like this?
    http://www.simile-widgets.org/timeline/

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    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>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •