5 Replies Latest reply on May 23, 2012 4:14 AM by Oh happy days

    Disjointed text rollovers?

    Oh happy days Level 1

      In a three div layout (like below)  I would like to have a list of text items in the left and center divs and when the mouse hovers over these text items, additional text would appear in the right hand div.

       

      I've read the various discussions regarding disjointed text rollovers which produce a pop up box, but I'm not sure if this is the way to do what I want to achieve.  Is it possible using rollovers to get the text to appear in a div eg #right? Or should I be using something else eg Spry accordion?

       

      rollover-query-to-adobe-forum.png

        • 2. Re: Disjointed text rollovers?
          osgood_ Level 8

          You could look at 'Set Text of Container' in Dreamweaver. Window>Behaviours>Set Text>Set Text of Container

          • 3. Re: Disjointed text rollovers?
            Oh happy days Level 1

            Ken - Thanks for your reply.

            I have already tried Nancy's demo but as the position is set at absolute, depending on screen size, the pop up would 'move'.  It isn't quite what I'm looking for.

             

            Osgood - Thanks for your reply.

            This looks hopeful, but I've not come across this before. Do you know of any tutorials available?

             

            Thanks again to you both.

            • 4. Re: Disjointed text rollovers?
              osgood_ Level 8

              You just turn your text in an anchor tag:

               

              <a href="#">Some text</a>.

               

              Style it with some css:

               

              a {

              text-decoration: none;

              color: #666;

              }

               

              Select the text in the anchor tag. Go to Window>Behaviours>Set Text>Set Text of Container> Choose which container you want the text to appear in (they are listed in the drop menu so be sure to give your containers an id - <div id="textToAppearHere"></div>) and then insert some text into the text field that youre presented with. Choose onMouseOver or OnClick as the event

               

               

              Here's an example:

               

               

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

              <html xmlns="http://www.w3.org/1999/xhtml">

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

              <title>Untitled Document</title>

              <style type="text/css">

              #wrapper {

                  width: 600px;

                  margin: 0 auto;

                  border: 1px solid #666;

                  overflow: hidden;

              }

              #one, #two, #three {

                  width: 199px;

                  float: left;

                  height: 300px;

                  border-right: 1px solid #666;

                  padding: 20px 0;

              }

              a {

                  text-decoration: none;

                  color:#666;

              }

              p {

                  padding: 0 20px 10px 20px;

                  margin: 0;

              }

              </style>

              <script type="text/javascript">

              <!--

              function MM_setTextOfLayer(objId,x,newText) { //v9.0

                with (document) if (getElementById && ((obj=getElementById(objId))!=null))

                  with (obj) innerHTML = unescape(newText);

              }

              //-->

              </script>

              </head>

               

              <body>

              <div id="wrapper">

              <div id="one">

              <p><a href="#" onmouseover="MM_setTextOfLayer('three','','&lt;p&gt;This is some information&lt;/p&gt;&lt;p&gt;This is some information&lt;/p&gt;&lt;p&gt;This is some information&lt;/p&gt;&lt;p&gt;This is some information&lt;/p&gt;')">Some text</a></p>

              <p><a href="#" onmouseover="MM_setTextOfLayer('three','','&lt;p&gt;More Information&lt;/p&gt;&lt;p&gt;More Information&lt;/p&gt;&lt;p&gt;More Information&lt;/p&gt;')">Some text</a></p>

              <p><a href="#" onmouseover="MM_setTextOfLayer('three','','&lt;p&gt;Another column of information&lt;/p&gt;&lt;p&gt;Another column of information&lt;/p&gt;&lt;p&gt;Another column of information&lt;/p&gt;&lt;p&gt;Another column of information&lt;/p&gt;&lt;p&gt;Another column of information&lt;/p&gt;&lt;p&gt;Another column of information&lt;/p&gt;')">Some text</a></p>

              </div>

              <div id="two">

              <p><a href="#">Some text</a></p>

              <p><a href="#">Some text</a></p>

              <p><a href="#">Some text</a></p>

              </div>

              <div id="three">

              </div>

              </div>

              </body>

              </html>

              • 5. Re: Disjointed text rollovers?
                Oh happy days Level 1

                Thanks very much for help.  This is exactly what I hoped would be achievable.

                 

                Thanks for your time.