Skip navigation
Currently Being Moderated

Adding text to 'on mouse' image boxes

May 15, 2012 9:43 AM

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/servic es_brochures.jpg','Images/services_carto.jpg','Images/services_catalog ues.jpg','Images/services_destoprint.jpg','Images/services_digiIllustr ate.jpg','Images/services_branding.jpg','Images/services_packaging.jpg ','Images/services_reports.jpg','Images/services_digiretouch.jpg','Ima ges/services_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.jp g',1)" onmouseout="MM_swapImgRestore()">retouching</a></li>

        <li><a href="#" onmouseover="MM_swapImage('Image1','','Images/services_techmanuals.jp g',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!

 
Replies
  • Currently Being Moderated
    May 15, 2012 9:51 AM   in reply to Monochrome24

    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/

     
    |
    Mark as:
  • Currently Being Moderated
    May 16, 2012 8:37 AM   in reply to Monochrome24

    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-transiti ons-panel/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 17, 2012 8:36 AM   in reply to Monochrome24

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 17, 2012 9:59 AM   in reply to Monochrome24

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

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 17, 2012 10:11 AM   in reply to Monochrome24

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    May 17, 2012 10:58 AM   in reply to Monochrome24

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 30, 2012 9:51 AM   in reply to Monochrome24

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 13, 2012 3:23 AM   in reply to Monochrome24

    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)">s ervices ordering page</a></li>

     

    To this:

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 13, 2012 4:36 AM   in reply to Monochrome24

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 18, 2012 7:45 AM   in reply to Monochrome24

    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)">s ervices ordering page</a></li>

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 18, 2012 10:02 AM   in reply to Monochrome24

    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'

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2012 5:29 PM   in reply to Monochrome24

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 31, 2013 9:04 PM   in reply to Monochrome24

    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!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points