www.webdeveloper.com
Results 1 to 3 of 3

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

Hybrid View

  1. #1
    Join Date
    Mar 2012
    Posts
    1

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

    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!

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    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

    Code:
    <!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>

  3. #3
    Join Date
    Nov 2007
    Posts
    432
    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".

    Code:
    <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>
    Last edited by nap0leon; 03-30-2012 at 04:55 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles