Adobe Community: Adding text to 'on mouse' image boxes

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...

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 :

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

2891 Views 24 Replies Latest reply: Monochrome24, Jun 21, 2012 2:33 AM

Replies

Currently Being Moderated

1. Nancy O.,

May 15, 2012 9:51 AM in reply to Monochrome24

Report

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

2. Monochrome24,

May 16, 2012 4:56 AM in reply to Nancy O.

Report

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

|
Mark as:
Currently Being Moderated

3. Monochrome24,

May 16, 2012 7:32 AM in reply to Monochrome24

Report

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.jp g',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.jp g',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>

|
Mark as:
Currently Being Moderated

4. Nancy O.,

May 16, 2012 8:37 AM in reply to Monochrome24

Report

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

5. Monochrome24,

May 17, 2012 8:22 AM in reply to Nancy O.

Report

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

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?

|
Mark as:
Currently Being Moderated

6. osgood_,

May 17, 2012 8:36 AM in reply to Monochrome24

Report

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

|
Mark as:
Currently Being Moderated

7. Monochrome24,

May 17, 2012 9:50 AM in reply to osgood_

Report

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!

|
Mark as:
Currently Being Moderated

8. John Waller,

May 17, 2012 9:59 AM in reply to Monochrome24

Report

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

9. osgood_,

May 17, 2012 10:11 AM in reply to Monochrome24

Report

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

10. Nancy O.,

May 17, 2012 10:58 AM in reply to Monochrome24

Report

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

11. Monochrome24,

May 30, 2012 9:17 AM in reply to osgood_

Report

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.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>
        <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.

|
Mark as:
Currently Being Moderated

12. osgood_,

May 30, 2012 9:51 AM in reply to Monochrome24

Report

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

13. Monochrome24,

Jun 13, 2012 3:16 AM in reply to osgood_

Report

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)">s ervices 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?

|
Mark as:
Currently Being Moderated

14. osgood_,

Jun 13, 2012 3:23 AM in reply to Monochrome24

Report

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

15. Monochrome24,

Jun 13, 2012 3:49 AM in reply to osgood_

Report

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

|
Mark as:
Currently Being Moderated

16. osgood_,

Jun 13, 2012 4:36 AM in reply to Monochrome24

Report

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

17. Monochrome24,

Jun 13, 2012 1:51 PM in reply to osgood_

Report

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/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','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.jp g',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.jp g',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)">s ervices 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>

|
Mark as:
Currently Being Moderated

18. Monochrome24,

Jun 18, 2012 7:11 AM in reply to osgood_

Report

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!

|
Mark as:
Currently Being Moderated

19. osgood_,

Jun 18, 2012 7:45 AM in reply to Monochrome24

Report

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

20. Monochrome24,

Jun 18, 2012 9:51 AM in reply to osgood_

Report

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

|
Mark as:
Currently Being Moderated

21. osgood_,

Jun 18, 2012 10:02 AM in reply to Monochrome24

Report

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

22. Monochrome24,

Jun 20, 2012 8:51 AM in reply to Nancy O.

Report

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?

|
Mark as:
Currently Being Moderated

23. Nancy O.,

Jun 20, 2012 5:29 PM in reply to Monochrome24

Report

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

24. Monochrome24,

Jun 21, 2012 2:33 AM in reply to Nancy O.

Report

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.

|
Mark as: