Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member Deek Fracott's Avatar
    Join Date
    Sep 2012
    Location
    Clarksville, TN
    Posts
    31
    Member #
    33091
    Here is some simple code.

    hover the mouse inside the red box and a span pops up; nifty.

    How would I tweak this code so when: I have my mouse inside the red box, my span INSTEAD pops up inside the blue output div?

    Code:
    <style type="text/css">
    <!--
     
    #imgwrap    { width: 250px; height: 74px;
                  position: relative }
    #left      { width:83px; height: 35px;
                  position: absolute; top: 0; left: 0;
                  border: 2px solid red; }
     
    #left span
                { width: 5em;
                  font: bold 75% Arial, sans-serif;
                  color: black; background: orange;
                  border: 5px dotted green;
                  display: none }
     
    #left:hover span
                { display: block }
    #output {
        height: 100px;
        width: 300px;
        border: 5px dotted blue;
       
    }
    -->
    </style>
    </head>
    <body>
    <div id="imgwrap">
    <img src="http://htmlhelp.com/icon/wdglogo.gif" width="250" height="74" usemap="#map" alt="Webdesign Group">
    <div id="left"><span>The is the top left corner</span></div>
    </div>
    <div id="output">output div</div>
    Thanks in advance!

  2.  

  3. #2
    Member Deek Fracott's Avatar
    Join Date
    Sep 2012
    Location
    Clarksville, TN
    Posts
    31
    Member #
    33091
    I found a way to do this using some JS

    Code:
    <script language="JavaScript">
    function changeContent() {
    document.getElementById('output').innerHTML="output message.";
    }
    </script>
     
    ...AND...
     
    onClick="changeContent()"  <-- (can be applied almost anywhere) -->
    but is there anyway to do this using pure CSS?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:30 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com