25 Replies Latest reply: Aug 31, 2013 9:04 PM by devourgang RSS

    Adding text to 'on mouse' image boxes

    Monochrome24 Community Member

      Me again I'm afraid. After completing the web page below I thought it might be better to have a line of explanatory text for each image shown as the drop down menu is 'rolled' over...

       

      Screen Shot 2012-05-15 at 17.30.23.jpg

      Each of the items in the menu on the right reveal an alternate image and for the life of me I can't see where to add a simple line or two of text to either go under or to the right of the image (if I move images to the left!

       

      Anyone have a way to add the text? I can see that you can add text in the 'Behaviours' - Is this where I should be going?

       

      Code below for this area of the page :

       

      CSS :

      #imageview {

                height: 476px;

                width: 476px;

                position: relative;

                left: 138px;

                top: 30px;

                float: left;

                background-repeat: no-repeat;

                background-position: center center;

      }

       

      HTML :

       

      <body onload="MM_preloadImages('Images/services_adverts.jpg','Images/services_brochures.jpg','I mages/services_carto.jpg','Images/services_catalogues.jpg','Images/services_destoprint.jpg ','Images/services_digiIllustrate.jpg','Images/services_branding.jpg','Images/services_pac kaging.jpg','Images/services_reports.jpg','Images/services_digiretouch.jpg','Images/servic es_techmanuals.jpg','Images/services_webdesign.jpg')">

       

      <div id="wrapper">

      <div id="header panel"><img src="Images/handprint_panel.jpg" alt="header" width="960" height="190" border="0" usemap="#Map" />

        <ul id="MenuBar1" class="MenuBarHorizontal">

          <li><a class="MenuBarItemSubmenu" href="#">SERVICES</a>

           

            <ul class="stay">

              <li onmouseover="MM_swapImage('Image1','','Images/services_adverts.jpg',1)"><a href="#">advertising</a></li>

              <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_brochures.jpg',1)" onmouseout="MM_swapImgRestore()">brochures</a></li>

              <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_carto.jpg',1)" onmouseout="MM_swapImgRestore()">cartography</a></li>

              <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_catalogues.jpg',1)" onmouseout="MM_swapImgRestore()">catalogues</a></li>

              <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_destoprint.jpg',1)" onmouseout="MM_swapImgRestore()">design to print</a></li>

              <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_digiIllustrate.jpg',1)" onmouseout="MM_swapImgRestore()">illustration</a></li>

              <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_branding.jpg',1)" onmouseout="MM_swapImgRestore()">logos and branding</a></li>

              <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_packaging.jpg',1)" onmouseout="MM_swapImgRestore()">packaging</a></li>

              <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_reports.jpg',1)" onmouseout="MM_swapImgRestore()">reports</a></li>

              <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_digiretouch.jpg',1)" onmouseout="MM_swapImgRestore()">retouching</a></li>

              <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_techmanuals.jpg',1)" onmouseout="MM_swapImgRestore()">technical manuals</a></li>

              <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_webdesign.jpg',1)" onmouseout="MM_swapImgRestore()">web design</a></li>

            </ul>

          </li>

          <li><a href="contact.html">CONTACT</a></li>

          <li><a href="history.html">HISTORY</a></li>

          <li><a href="profile.html">PROFILE</a></li>

          <li><a href="index.html">HOME</a></li>

          <div id="imageview"><img src="Images/services_adverts.jpg" width="440" height="440" border="18" id="Image1" />

          </div>

       

      This works fine already and I really appreciate being able to include some text! If it means adding a separate div box for each alternate rollover/image change then how do I link said div to the onmmouse/onmouseout....

       

      Over to you gurus!

        • 1. Re: Adding text to 'on mouse' image boxes
          Nancy O. MVP

          Add a title attribute to each of your anchor tags.

           

          Change this:

           

          <a href="#"

           

          to this:

           

          <a title="some descriptive text goes here" href="#"

           

           

           

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          http://twitter.com/altweb

          http://alt-web.blogspot.com/

          • 2. Re: Adding text to 'on mouse' image boxes
            Monochrome24 Community Member

            Thanks Nancy - so I've included what text I needed within the code for each time the image changes....

             

            Do I amend the CSS (above) to "show" the text or create a new CSS?...and if so based on what html?

             

            Wish I hadn't thought of this now

            • 3. Re: Adding text to 'on mouse' image boxes
              Monochrome24 Community Member

              Following up I have managed to add code to the html that rules the image box size (highlighted in bold) so I can have about two lines of text below each image revealed as they are scrolled from the drop menu..... I just need to know how to make the text 'visible' now I have added to each <li>

               

              Do I have to create a new CSS Style and what with please?

               

              Please check below Nancy :

               

               

              <ul id="MenuBar1" class="MenuBarHorizontal">

                  <li><a class="MenuBarItemSubmenu" href="#">SERVICES</a>

                   

                    <ul class="stay">

                      <li onmouseover="MM_swapImage('Image1','','Images/services_adverts.jpg',1)"><a title="two lines of advertising descriptive text goes here" href="#">advertising</a></li>

                      <li><a title="two lines of brochure descriptive text goes here" href="#" onmouseover="MM_swapImage('Image1','','Images/services_brochures.jpg',1)" onmouseout="MM_swapImgRestore()">brochures</a></li>

                      <li><a title="two lines of cartography descriptive text goes here" href="#" onmouseover="MM_swapImage('Image1','','Images/services_carto.jpg',1)" onmouseout="MM_swapImgRestore()">cartography</a></li>

                     

              *** and so on ***

               

              <li><a title="two lines of catalogues descriptive text goes here" href="#" onmouseover="MM_swapImage('Image1','','Images/services_catalogues.jpg',1)" onmouseout="MM_swapImgRestore()">catalogues</a></li>

                      <li><a title="two lines of print descriptive text goes here" href="#" onmouseover="MM_swapImage('Image1','','Images/services_destoprint.jpg',1)" onmouseout="MM_swapImgRestore()">design to print</a></li>

                      <li><a title="two lines of illustration descriptive text goes here" href="#" onmouseover="MM_swapImage('Image1','','Images/services_digiIllustrate.jpg',1)" onmouseout="MM_swapImgRestore()">illustration</a></li>

                      <li><a title="two lines of logos and branding descriptive text goes here" href="#" onmouseover="MM_swapImage('Image1','','Images/services_branding.jpg',1)" onmouseout="MM_swapImgRestore()">logos and branding</a></li>

                      <li><a title="two lines of packaging descriptive text goes here" href="#" onmouseover="MM_swapImage('Image1','','Images/services_packaging.jpg',1)" onmouseout="MM_swapImgRestore()">packaging</a></li>

                      <li><a title="two lines of annual reports descriptive text goes here" href="#" onmouseover="MM_swapImage('Image1','','Images/services_reports.jpg',1)" onmouseout="MM_swapImgRestore()">reports</a></li>

                      <li><a title="two lines of photo retouching descriptive text goes here" href="#" onmouseover="MM_swapImage('Image1','','Images/services_digiretouch.jpg',1)" onmouseout="MM_swapImgRestore()">retouching</a></li>

                      <li><a title="two lines of technical manuals descriptive text goes here" href="#" onmouseover="MM_swapImage('Image1','','Images/services_techmanuals.jpg',1)" onmouseout="MM_swapImgRestore()">technical manuals</a></li>

              <li><a title="two lines of web design descriptive text goes here" href="#" onmouseover="MM_swapImage('Image1','','Images/services_webdesign.jpg',1)" onmouseout="MM_swapImgRestore()">web design</a></li>

                    </ul>

                  </li>

                  <li><a href="contact.html">CONTACT</a></li>

                  <li><a href="history.html">HISTORY</a></li>

                  <li><a href="profile.html">PROFILE</a></li>

                  <li><a href="index.html">HOME</a></li>

                 

              *** image space adjusted as highlighted***

               

              <div id="imageview"><img src="Images/services_adverts.jpg" width="440" height="440" style="border-bottom:48px" id="Image1" /></div>

              • 4. Re: Adding text to 'on mouse' image boxes
                Nancy O. MVP

                In my solution, an ordinary tooltip of text appears on mouseover.   Preview in browsers to test.

                 

                If you want something dynamic and you're using CSS6, look at CSS Transitions.

                http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-the-css-transitions-panel/

                 

                 

                Nancy O.

                • 5. Re: Adding text to 'on mouse' image boxes
                  Monochrome24 Community Member

                  Thanks Nancy I just discovered that when checking my page in a browser - the lemon coloured text box....

                   

                  Screen Shot 2012-05-17 at 16.08.18.jpg

                   

                  I really need the text to be in the same box occupied by alternate images as shown above and, until I get back into work, I can't invest in the new CS6 much as I dream of owning it!

                   

                  I guess the only way around this is to extend black background below each image in Photoshop and add text there?

                  • 6. Re: Adding text to 'on mouse' image boxes
                    osgood_ MVP

                    Can you put the website online somewhere so we can dig into it and try and help you out?

                    • 7. Re: Adding text to 'on mouse' image boxes
                      Monochrome24 Community Member

                      Thanks Osgood - There's nowhere free the actually allows me to upload but I can email or post the whole code if needed?

                       

                      The idea behind adding topic specific text to a div (that already contains alternate images linked to the spry menu on the right) should be simple but I'm stumbling here!

                      • 8. Re: Adding text to 'on mouse' image boxes
                        John Waller MVP

                        We're also struggling without the ability to view the page online.

                         

                        Where do you eventually plan to host it on the web?

                        • 9. Re: Adding text to 'on mouse' image boxes
                          osgood_ MVP

                          You can try adding a setTextofContainer behaviour to your existing swap image behaviour for each link.

                           

                          Add a <div> container under the 'imageview' <div> as below and position it using css. Then select each link individually and go>Windows>Behaviours>Click plus icon> select Set Text>Set Text of Container. Choose 'caption' from the dropmenu and insert your caption into the box. Save and repeat for your other links.

                           

                           

                          <div id="imageview"><img src="Images/services_adverts.jpg" width="440" height="440" style="border-bottom:48px" id="Image1" /></div>

                          <div id="caption">caption goes here</div>

                          • 10. Re: Adding text to 'on mouse' image boxes
                            Nancy O. MVP

                            Ultimately, you need to find permanent web hosting. 

                            In the meantime, this is free:

                            http://www.000webhost.com/


                            CSS Disjointed Rollovers (view source to see the code):

                            alt-web.com/DEMOS/CSS-Image-Viewer.shtml

                             

                             

                            Nancy O.

                            • 11. Re: Adding text to 'on mouse' image boxes
                              Monochrome24 Community Member

                              Hello osgood - I've only just around to implementing your advice!

                               

                              I religiously used your additional html code and fiddled around until the CSS I created made the line visible wher I wanted it.

                               

                              However, I have tried repeatedly to add the new behaviour by setting text in a container (using the CSS in drop down) but nothing happens!

                              The original line of text in <div id="caption">caption goes here</div> styas the same for whatever item I roll over in the right side drop down menu?

                               

                              Images change - text doesn't!

                               

                              Here's the updated code and CSS...the bold highlights show the new html when adding a new behaviour and your html code down at 'imageview' :

                               

                              <ul class="stay">

                                      <li onmouseover="MM_swapImage('Image1','','Images/services_adverts.jpg',1)" onfocus="MM_setTextOfLayer('explanation','','put descriptive text here')"><a href="#">advertising</a></li>

                                      <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_brochures.jpg',1)" onmouseout="MM_swapImgRestore()">brochures</a></li>

                                      <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_carto.jpg',1)" onmouseout="MM_swapImgRestore()">cartography</a></li>

                                      <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_catalogues.jpg',1)" onmouseout="MM_swapImgRestore()">catalogues</a></li>

                                      <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_destoprint.jpg',1)" onmouseout="MM_swapImgRestore()">design to print</a></li>

                                      <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_digiIllustrate.jpg',1)" onmouseout="MM_swapImgRestore()">illustration</a></li>

                                      <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_branding.jpg',1)" onmouseout="MM_swapImgRestore()">logos and branding</a></li>

                                      <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_packaging.jpg',1)" onmouseout="MM_swapImgRestore()">packaging</a></li>

                                      <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_reports.jpg',1)" onmouseout="MM_swapImgRestore()">reports</a></li>

                                      <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_digiretouch.jpg',1)" onmouseout="MM_swapImgRestore()">retouching</a></li>

                                      <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_techmanuals.jpg',1)" onmouseout="MM_swapImgRestore()">technical manuals</a></li>

                                      <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_webdesign.jpg',1)" onmouseout="MM_swapImgRestore()">web design</a></li>

                                      <li><a href="#" onclick="MM_goToURL('parent','ordering.html');return document.MM_returnValue" onmouseover="MM_swapImage('Image1','','Images/ordering_out.jpg',1)" onmouseout="MM_swapImgRestore()">services ordering page</a></li>

                                    </ul>

                                  </li>

                                  <li><a href="contact.html">CONTACT</a></li>

                                  <li><a href="history.html">HISTORY</a></li>

                                  <li><a href="profile.html">PROFILE</a></li>

                                  <li><a href="index.html">HOME</a></li>

                                  <div id="imageview"><img src="Images/services_adverts.jpg" width="476" height="476" style="border-bottom:10px" id="Image1" />

                                  <div id="explanation">explanation goes here</div>

                                  </div>

                                </ul>

                               

                               

                              CSS :

                               

                              #imageview #explanation {

                                        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                        font-size: 12pt;

                                        color: #AF9D96;

                                        text-align: left;

                                        padding-top: 10px;

                              }

                               

                              Hopefully this makes sense (or doesn't!) to you and you can see where I've cocked up this time!?

                               

                              Thanks.

                              • 12. Re: Adding text to 'on mouse' image boxes
                                osgood_ MVP

                                Move the MM_swapImage behaviours onto the anchor tag and the MM_setTextOfLayer behaviour onto the <li> tag (see below)

                                 

                                 

                                <li onmouseover="MM_setTextOfLayer('explanation','','put descriptive text here')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_adverts.jpg',1 )">advertising</a></li>

                                • 13. Re: Adding text to 'on mouse' image boxes
                                  Monochrome24 Community Member

                                  Hi osgood - It worked perfectly but all the code alteration!

                                   

                                  One problem I can't seem to erase is that the 'explanation' text from the web design sub menu (second to last) appears again on the bottom sub menu! It should only be a 'click and go' link to another page?

                                   

                                  There is no text included in the code; Just behaviours to mouseover and onclick.

                                   

                                  The last two lines of code as shown including your amended line :

                                   

                                  <li onmouseover="MM_setTextOfLayer('explanation','','Creation of front end web sites for all needs')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_webdesign.jpg',1 )">web design</a></li>

                                  <li><a href="#" onclick="MM_goToURL('parent','ordering.html')" onmouseover="MM_swapImage('Image1','','Images/ordering_out.jpg',1)">services ordering page</a></li>

                                  *(this line somehow is including the text 'Creation of front end web sites for all needs' when seen graphically)*

                                   

                                  Much appreciated if you can offer a rerason why?
                                  Sample.jpg

                                  • 14. Re: Adding text to 'on mouse' image boxes
                                    osgood_ MVP

                                    Change this line:

                                     

                                    <li><a href="#" onclick="MM_goToURL('parent','ordering.html');return document.MM_returnValue" onmouseover="MM_swapImage('Image1','','Images/ordering_out.jpg',1)">services ordering page</a></li>

                                     

                                    To this:

                                     

                                    <li><a href="ordering.html" target="_parent" onmouseover="MM_swapImage('Image1','','Images/ordering_out.jpg',1)">services ordering page</a></li

                                    • 15. Re: Adding text to 'on mouse' image boxes
                                      Monochrome24 Community Member

                                      Caught me about to shut Dreamweaver for lunch!

                                       

                                      Just altered to the new line of code you kindly supplied osgood, but still shows the 'Creation of.....' as highlighted in the screen grabs

                                      • 16. Re: Adding text to 'on mouse' image boxes
                                        osgood_ MVP

                                        Can you upload the page somewhere or can you post the whole of the pages code here so I can take a look and see what is happening?

                                        • 17. Re: Adding text to 'on mouse' image boxes
                                          Monochrome24 Community Member

                                          No idea where to upload since these "free sites" are a useless process and all adverts everywhere!
                                          Unless you use one yourself you can recommend?

                                           

                                          The whole page coding is below osgood - I've searched but just can't see how this 'orphaned' text insists in appearing!... the line is highlighted bold :

                                           

                                          <!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>Handprint Design</title>

                                          <style type="text/css">

                                           

                                          body {

                                                    background-color: #000;

                                                    background-image: url(Images/background_grad.jpg);

                                                    background-repeat: repeat-x;

                                          }

                                           

                                          #bodyArea {

                                                    background-color: #000;

                                                    height: 162px;

                                                    width: 158px;

                                                    position: relative;

                                                    left: 33px;

                                                    top: -120px;

                                                    float: left;

                                                    background-image: url(Images/handprint.jpg);

                                          }

                                           

                                          #imageview {

                                                    height: 520px;

                                                    width: 476px;

                                                    position: relative;

                                                    left: 148px;

                                                    top: 20px;

                                                    float: left;

                                          }

                                           

                                          #imageview #explanation {

                                                    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                                    font-size: 12pt;

                                                    color: #AF9D96;

                                                    text-align: left;

                                                    padding-top: 10px;

                                          }

                                           

                                           

                                          </style>

                                          <link href="CSS/layout.css" rel="stylesheet" type="text/css" />

                                          <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                                          <script type="text/javascript">

                                          function MM_preloadImages() { //v3.0

                                            var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                                              var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                                              if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

                                          }

                                           

                                           

                                          function MM_findObj(n, d) { //v4.01

                                            var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

                                              d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

                                            if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

                                            for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

                                            if(!x && d.getElementById) x=d.getElementById(n); return x;

                                          }

                                           

                                           

                                          function MM_swapImage() { //v3.0

                                            var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

                                             if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

                                          }

                                          function MM_goToURL() { //v3.0

                                            var i, args=MM_goToURL.arguments; document.MM_returnValue = false;

                                            for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");

                                          }

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

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

                                              with (obj) innerHTML = unescape(newText);

                                          }

                                          </script>

                                          <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

                                          </head>

                                           

                                           

                                          <body onload="MM_preloadImages('Images/services_adverts.jpg','Images/services_brochures.jpg','I mages/services_carto.jpg','Images/services_catalogues.jpg','Images/services_destoprint.jpg ','Images/services_digiIllustrate.jpg','Images/services_branding.jpg','Images/services_pac kaging.jpg','Images/services_reports.jpg','Images/services_digiretouch.jpg','Images/servic es_techmanuals.jpg','Images/services_webdesign.jpg','Images/ordering_out.jpg')">

                                           

                                          <div id="wrapper">

                                          <div id="header panel"><img src="Images/handprint_panel.jpg" alt="header" width="960" height="190" border="0" usemap="#Map" />

                                            <ul id="MenuBar1" class="MenuBarHorizontal">

                                              <li><a class="MenuBarItemSubmenu" href="#">SERVICES</a>

                                               

                                                <ul class="stay">

                                                  <li onmouseover="MM_setTextOfLayer('explanation','','Advertising layout for magazines, posters and fliers')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_adverts.jpg',1 )">advertising</a></li>

                                                  <li onmouseover="MM_setTextOfLayer('explanation','','Informative brochures completely designed to print')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_brochures.jpg',1 )">brochures</a></li>

                                                  <li onmouseover="MM_setTextOfLayer('explanation','','Maps designed for all needs')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_carto.jpg',1 )">cartography</a></li>

                                                  <li onmouseover="MM_setTextOfLayer('explanation','','Catalogue design, imagery and typesetting')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_catalogues.jpg',1 )">catalogues</a></li>

                                                  <li onmouseover="MM_setTextOfLayer('explanation','','Print ready artwork designed including liaising with printers')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_destoprint.jpg',1 )">design to print</a></li>

                                                  <li onmouseover="MM_setTextOfLayer('explanation','','Digital vector and hand drawn illustration')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_digiIllustrate.jpg',1 )">illustration</a></li>

                                                  <li onmouseover="MM_setTextOfLayer('explanation','','Complete branding from logos to corporate identity')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_branding.jpg',1 )">logos and branding</a></li>

                                                  <li onmouseover="MM_setTextOfLayer('explanation','','Creation of artwork for packaging')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_packaging.jpg',1 )">packaging</a></li>

                                                  <li onmouseover="MM_setTextOfLayer('explanation','','Corporate and Annual reports designed and typesetted')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_reports.jpg',1 )">reports</a></li>

                                                  <li onmouseover="MM_setTextOfLayer('explanation','','Complete photo retouching, correction and restoring')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_digiretouch.jpg',1 )">retouching</a></li>

                                                  <li onmouseover="MM_setTextOfLayer('explanation','','Including diagrams, technical tables and assembly images')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_techmanuals.jpg',1 )">technical manuals</a></li>

                                                  <li onmouseover="MM_setTextOfLayer('explanation','','Creation of front end web sites for all needs')"><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_webdesign.jpg',1 )">web design</a></li>

                                                  <li><a href="ordering.html" target="_parent" onmouseover="MM_swapImage('Image1','','Images/ordering_out.jpg',1)">services ordering page</a></li>

                                                </ul>

                                              </li>

                                              <li><a href="contact.html">CONTACT</a></li>

                                              <li><a href="history.html">HISTORY</a></li>

                                              <li><a href="profile.html">PROFILE</a></li>

                                              <li><a href="index.html">HOME</a></li>

                                              <div id="imageview"><img src="Images/services_adverts.jpg" width="476" height="476" style="border-bottom:10px" id="Image1" />

                                              <div id="explanation"></div>

                                              </div>

                                            </ul>

                                            <div id="background"></div>

                                           

                                           

                                          <map name="Map" id="Map">

                                          <area shape="poly" coords="131,167,74,128,34,103,50,41,97,11,137,66,155,77,177,41,188,41,188,114,181,141,147 ,169,131,166" href="index.html" />

                                          </map>

                                          </div>

                                          </div>

                                          <script type="text/javascript">

                                          var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                          </script>

                                          </body>

                                          </html>

                                          • 18. Re: Adding text to 'on mouse' image boxes
                                            Monochrome24 Community Member

                                            Hi osgood!

                                             

                                            Any joy solving the problem yet?

                                             

                                            If not, could there be a 'work around' such as creating the last submenu 'services ordering...' as an individual (rollover and click on) div box reflecting the other drop menu items actions and looks but hopefully eliminating that pesky line of text inherited so far?

                                             

                                            Not so sure lining the div under the drop menu would be easy though!

                                            • 19. Re: Adding text to 'on mouse' image boxes
                                              osgood_ MVP

                                              Change 'services ordering page' <li> to as below:

                                               

                                              <li onmouseover="MM_setTextOfLayer('explanation','','')"><a href="ordering.html" target="_parent" onmouseover="MM_swapImage('Image1','','Images/ordering_out.jpg',1)">services ordering page</a></li>

                                              • 20. Re: Adding text to 'on mouse' image boxes
                                                Monochrome24 Community Member

                                                Perfect as usual osgood! Not knowing code in depth does placing the 'MM_setText...' within the <li> make it invisible or something similar then?

                                                 

                                                Thanks again and doubtless I will be back in the future

                                                • 21. Re: Adding text to 'on mouse' image boxes
                                                  osgood_ MVP

                                                  Monochrome24 wrote:

                                                   

                                                  Perfect as usual osgood! Not knowing code in depth does placing the 'MM_setText...' within the <li> make it invisible or something similar then?

                                                   

                                                   

                                                  This code - onmouseover="MM_setTextOfLayer('explanation','','')" - just swaps the description to nothing when you mouse over the words 'service ordering page'

                                                  • 22. Re: Adding text to 'on mouse' image boxes
                                                    Monochrome24 Community Member

                                                    Thanks for the Free Web Link Nancy!

                                                     

                                                    I tried a dry run, uploading my website to 000 but I hit a problem : I have created a Contact/Ordering page that should allow selecting specific boxes and entry of email details so when the details are 'Sent' they come to my personal email Inbox - a test run didn't work.

                                                    I am assuming there might be a problem with PHP (?) although I have no idea how or what to do to get this working! Or is this something that the Free Host is not doing correctly?

                                                     

                                                    I have deleted my complete file from 000 until I can get this to work.

                                                     

                                                    Any ideas?

                                                    • 23. Re: Adding text to 'on mouse' image boxes
                                                      Nancy O. MVP

                                                      Free hosting is not a substitute for paid hosting.    You get what you pay for.

                                                      000 is a short term, free site to use until you procure permanent  hosting someplace else.

                                                       

                                                      Reputable paid hosts (in no particular order). 

                                                       

                                                      • InMotion
                                                      • Lunarpages
                                                      • Pair Networks
                                                      • Dreamhost

                                                       

                                                      Web Hosting Reviews

                                                      http://www.whoishostingthis.com/hosting-reviews/

                                                       

                                                       

                                                      Good luck with your project,

                                                      Nancy O.

                                                      • 24. Re: Adding text to 'on mouse' image boxes
                                                        Monochrome24 Community Member

                                                        That's fine Nancy - I can just use 000 as a demo weblink as part of my portfolio then.

                                                         

                                                        When things take off I'll move on to a paid site!

                                                         

                                                        Thanks!

                                                         

                                                        M24.

                                                        • 25. Re: Adding text to 'on mouse' image boxes
                                                          devourgang Community Member

                                                          Free hosting always has advertisements or not all the options paid hosting has. Most the time paid hosting give you free .com domains when you sign up for the first time.

                                                           

                                                          If you're looking for reputable paid hosts. 

                                                           

                                                          • Godaddy
                                                          • Hostgator
                                                          • Justhost
                                                          • Fatcow

                                                           

                                                          Check out Web Hosting Coupons and Promos:

                                                          http://sitediscounters.com/category/coupons/

                                                           

                                                          Hope you find what you're looking for!