NEED HELP!

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:23

NEED HELP!

Poster: josiah
Dated: Thursday January 17 2008 - 2:02:55 GMT

Hello All!

I'm sorta new to the WebDesign business, and I've got a little siuation that I'll try to write out as clear as possible.

I do not know how to write any web language. And for a while now I've been getting by, by cheating. I'll do all my design work in Photoshop CS2, create my slices, then open it in Image ready and set my rollovers. And that was getting me by just fine, and I could do some okay stuff that way.

Well now I'm on a new adventure and I'm completely lost. I'm trying to figure out how to create a dropdown menu. A friend told me I need to learn Java. So I found your site and have been trying to figure out where to start. I'm completly lost in this whole thing.

Here's a image of what I would like to do http://emmortonbaptist.com/Navigation/N ... mplate.jpg

Is it possible to use what I have now? Or do I need to do something different? I just don't know what to do after the design part. I have Dreamwever and usually use that to set my links. But I'm willing to learn what I must to make this dropdown menu work. Do I need to take classes? Do I need to learn online? I have no Idea!

Please help!
Thanks in advanced!

Re: NEED HELP!

Poster: Ruth
Dated: Thursday January 17 2008 - 5:29:37 GMT

I am not sure what you are asking. The Milonic menu is already programmed for you, so all you need to do is set the design as you want, and the aI strings to have the necessary information. I see the image you have, and you can set the styling in the Milonic menu to look like that, you just need the images and such. Do you have the images you want to use? I could help you set it up if you have that.

Here are some sample menus which are available for download so you can see how one is set up.

The first is made totally from images, so the text is on each image. http://www.milonic.com/menusample18.php

The next uses background images and you then put the text in the item. http://www.milonic.com/menusample82.php

You can read more on how to create your menu viewforum.php?f=14

You want to look at styling the menu parts I, II, III. These don't address image menus but you'd do more or less the same thing. If you were using images with text already on them you'd put in image=imageName; instead of text=whatever text. If you were using background images instead of images with text on them, you'd put the bgimage in the style section and then in the 'aI' you'd put the text in the text=. So, let's say you wanted the menu item to say HOME, you'd code the aI string as

Code:

aI("text=HOME;url=whatever the url is;");

This is a very easy menu to use since you don't have to know javascript, or java which is a programming language. All you have to know is how to type in what you want in the aI.

Anyway, if you have the images where I can see them and you can tell me what you want 1 or 2 of the menu items to say and the url for them, I could make you up an example.

Ruth

Re: NEED HELP!

Poster: josiah
Dated: Thursday January 17 2008 - 23:32:29 GMT

AHH..okay...I see. Well I don't have it ready yet, because I just have it all in one photoshop file. But your saying that I need to save each menu link as a image, then upload it to my server and give you a link. okay thats easy enough. I'm kidna on a weird work hours right now, so I might be able to get it all ready late tonight for you to show me the example.

Thanks So much!

Re: NEED HELP!

Poster: Ruth
Dated: Friday January 18 2008 - 1:11:52 GMT

Hi,

Well, given you want that button look, yes, each would have to be an image with the text on it. So, here's an example menu_data.js file for you set up to use images in the submenu and a menubgimage in the main menu with text as the items instead of images, just a bgimage for the whole menu. You could set up each item with the same bgimage and then use text. To do that in that subStyle you'd add subStyle.bgimage=name of image; Then in each submenu item you'd eliminate the image I have coded and add text=Statement of Faith; text=Worship Times; and so on.

Code:

_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;




with(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
menubgimage="mainbg.gif";
fontfamily="Tahoma, Verdana, Arial";
fontsize="100%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="";
offcolor="#ffffff";
onbgcolor="";
oncolor="#EFEFEF";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="";
pagecolor="#FFFFCC";
separatorcolor="#999999";
separatorsize=0;
subimage="arrow.gif";
subimagepadding=2;
}
subStyle=new copyOf(menuStyle)
subStyle.menubgimage="";

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=10;
orientation="horizontal";
style=menuStyle;
top=10;
itemwidth="15%";
aI("text=Home;url=http://www.milonic.com/;");
aI("showmenu=About;text=About Us;");
aI("text=Something for Everyone;");
aI("text=Out Reach;");
aI("text=Ministries;");
aI("text=Podcasts;");
aI("text=Contact Us;");
}

with(milonic=new menuname("About")){
style=subStyle;
aI("image=statement.gif;overimage=statement_over.gif;url=http://www.apache.org/;");
aI("image=worship_times.gif;overimage=worship_times_over.gif;url=http://ww.mysql.com/;");
aI("image=directions.gif;overimage=directions_over.gif;url=http://www.php.net/;");
aI("image=events.gif;overimage=events_over.gif;url=http://www.phpbb.net/;");
aI("image=staff.gif;overimage=staff_over.gif;url=http://www.milonic.com;");
}

drawMenus();

Ruth

Re: NEED HELP!

Re: NEED HELP!

Poster: Ruth
Dated: Friday January 18 2008 - 23:39:23 GMT

Hi,

I can set up a menu for you, but I can't do the page, you will need to set up the page layout the way you want it. I can then set up the menu to be where you want it on the page. What page did you take that jpg template from? I could use that to set up the menu.

Ruth

Re: NEED HELP!

Poster: josiah
Dated: Saturday January 19 2008 - 3:10:13 GMT

Hi Again,

First I want to say thanks for what you've done so far! Your amazing for helping do what I need to do.

Second, what type of file do you need to set up the navigation? I created a whole new file with the web layout just for the navigation. That way I could use that template and when it got the way I needed it I could just take it from the template and apply it to the other pages. So should I give you the template page just for this first go around, and when you're finished with it I can take it and apply the same things to the other pages? They all have the same header layout and everything, so no matter what page I give you it'll be the same.

Re: NEED HELP!

Poster: Ruth
Dated: Saturday January 19 2008 - 3:31:38 GMT

Hi,

Yes, I'd need the template page and you need to tell me where you want the menu. I can then make up a demo and explain how it is done, from that point you should be able to set it up wherever you want it.

Ruth

Re: NEED HELP!

Poster: josiah
Dated: Sunday January 20 2008 - 1:49:42 GMT

ok..so I think this i what you need? Here is the PSD file...

josiahking.com/NavigationTemplate.psd

Thanks!

Re: NEED HELP!

Poster: Ruth
Dated: Sunday January 20 2008 - 2:33:37 GMT

Hi,

OK, we are at cross purposes here. That psd file is an Adobe Photoshop Template which is an image file, not the web page. I need the webpage so I can put the menu where you want it. I can't put the menu on an image. As an example, the following is the coding for a test page I have with a menu created to be in a table cell

Code:

<HTML>
<HEAD>
  <!-- Created with AOLpress/2.0 -->
  <TITLE>Please title this page. </TITLE>
  </HEAD>
<BODY> <script type="text/javascript" src="milonic_src.js"></script>   
<script type="text/javascript" src="mmenudom.js"></script>
<script type="text/javascript" src="menu_data.js"></script>   
<TABLE BORDER=1 CELLPADDING="2" CELLSPACING=0 BORDERCOLOR="red">
  <TR>
    <TD COLSPAN=2>LOGO IMAGE HERE</TD>
    <TD>some image</TD>
  </TR>
  <TR>
    <TD COLSPAN=3>The main menu will be in the below area in a table cell which  spans 3 columns like this one does. </TD>
  </TR>
  <TR>
    <TD COLSPAN=3><script type="text/javascript" src="main_data.js"></script>   
</TD>
  </TR>
  <TR>
    <TD>a</TD>
    <TD>s</TD>
    <TD>d</TD>
  </TR>
</TABLE>
</BODY></HTML>

Of course, because there is no file named main_data.js if this code were saved as an htm file when opened in IE or something it would give an error. But, that is what I need your html code for the page so I can position the menu code where it goes. Do you not have a webpage up that I can see?

Ruth

Re: NEED HELP!

Poster: josiah
Dated: Sunday January 20 2008 - 3:35:44 GMT

Hi,

ok sorry about that, thats what I was confussed about. I was not sure if you needed the HTML file or the PSD file. I do not yet have the HTML file, but I suppose I can create one for you to sample on. See, I am taking over this website from someone else, so Its still kinda a mess. And as of last night I am not able to get into the FTP account, so I'm waiting on the owner to get back to me to find out why it locked me out.

So this website is not up yet with my design.
Here's the HTML I just threw together for your sample. Let me know if this works.

Code:

<html>
<head>
<title>NavigationTemplate</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (NavigationTemplate.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
   if (document.images) {
      rslt = new Image();
      rslt.src = arg;
      return rslt;
   }
}

function changeImages() {
   if (document.images && (preloadFlag == true)) {
      for (var i=0; i<changeImages.arguments.length; i+=2) {
         document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
      }
   }
}

var preloadFlag = false;
function preloadImages() {
   if (document.images) {
      NavigationTemplate_04_over = newImage("images/NavigationTemplate_04-over.gif");
      NavigationTemplate_06_over = newImage("images/NavigationTemplate_06-over.gif");
      NavigationTemplate_12_over = newImage("images/NavigationTemplate_12-over.gif");
      preloadFlag = true;
   }
}

// -->
</script>
<!-- End Preload Script -->
<style type="text/css">
<!--
body {
   background-image: url(images/NavigationTemplate_02.gif);
}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">
<div align="center">
  <!-- ImageReady Slices (NavigationTemplate.psd) -->
  <table id="Table_01" width="826" height="900" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="7">
        <img src="images/NavigationTemplate_01.gif" width="825" height="171" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="171" alt=""></td>
     </tr>
    <tr>
      <td rowspan="4">
        <img src="images/NavigationTemplate_02.gif" width="61" height="56" alt=""></td>
       <td colspan="6">
          <img src="images/NavigationTemplate_03.gif" width="764" height="11" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="11" alt=""></td>
     </tr>
    <tr>
      <td>
        <a href="//directions//#"
            onmouseover="changeImages('NavigationTemplate_04', 'images/NavigationTemplate_04-over.gif'); return true;"
            onmouseout="changeImages('NavigationTemplate_04', 'images/NavigationTemplate_04.gif'); return true;"
            onmousedown="changeImages('NavigationTemplate_04', 'images/NavigationTemplate_04-over.gif'); return true;"
            onmouseup="changeImages('NavigationTemplate_04', 'images/NavigationTemplate_04-over.gif'); return true;">
          <img name="NavigationTemplate_04" src="images/NavigationTemplate_04.gif" width="225" height="26" border="0" alt=""></a></td>
       <td rowspan="6">
          <img src="images/NavigationTemplate_05.gif" width="324" height="718" alt=""></td>
       <td colspan="3" rowspan="2">
          <a href="//pastorswelcome//#"
            onmouseover="changeImages('NavigationTemplate_06', 'images/NavigationTemplate_06-over.gif'); return true;"
            onmouseout="changeImages('NavigationTemplate_06', 'images/NavigationTemplate_06.gif'); return true;"
            onmousedown="changeImages('NavigationTemplate_06', 'images/NavigationTemplate_06-over.gif'); return true;"
            onmouseup="changeImages('NavigationTemplate_06', 'images/NavigationTemplate_06-over.gif'); return true;">
            <img name="NavigationTemplate_06" src="images/NavigationTemplate_06.gif" width="152" height="27" border="0" alt=""></a></td>
       <td rowspan="6">
          <img src="images/NavigationTemplate_07.gif" width="63" height="718" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="26" alt=""></td>
     </tr>
    <tr>
      <td rowspan="5">
        <img src="images/NavigationTemplate_08.gif" width="225" height="692" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="1" alt=""></td>
     </tr>
    <tr>
      <td colspan="3" rowspan="2">
        <img src="images/NavigationTemplate_09.gif" width="152" height="673" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="18" alt=""></td>
     </tr>
    <tr>
      <td rowspan="3">
        <img src="images/NavigationTemplate_10.gif" width="61" height="673" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="655" alt=""></td>
     </tr>
    <tr>
      <td rowspan="2">
        <img src="images/NavigationTemplate_11.gif" width="39" height="18" alt=""></td>
       <td>
          <a href="josiahking.com"
            onmouseover="changeImages('NavigationTemplate_12', 'images/NavigationTemplate_12-over.gif'); return true;"
            onmouseout="changeImages('NavigationTemplate_12', 'images/NavigationTemplate_12.gif'); return true;"
            onmousedown="changeImages('NavigationTemplate_12', 'images/NavigationTemplate_12-over.gif'); return true;"
            onmouseup="changeImages('NavigationTemplate_12', 'images/NavigationTemplate_12-over.gif'); return true;">
            <img name="NavigationTemplate_12" src="images/NavigationTemplate_12.gif" width="107" height="15" border="0" alt=""></a></td>
       <td rowspan="2">
          <img src="images/NavigationTemplate_13.gif" width="6" height="18" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="15" alt=""></td>
     </tr>
    <tr>
      <td>
        <img src="images/NavigationTemplate_14.gif" width="107" height="3" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="3" alt=""></td>
     </tr>
  </table>
  <!-- End ImageReady Slices -->
</div>
</body>
</html>

I'm not sure if that actually helps becuase the site is not up? I'm pretty sure you can't use it can you? If not, then I'll have to wait till I get back in contact with the current website owner to get everything back in my name/churches name so I have access to everything.

I'm really sorry about all the confussion. My work hours are crazy right now and I'm trying to learn this and do everything all at the same time. I guess the next question is (to make sure we're on the same page) The HTML code you need, it should not have the current navigation in it right? becuase you're adding it correct?

If thats right, here it is without the navigation in it.

Code:

<html>
<head>
<title>NavigationTemplate</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (NavigationTemplate.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
   if (document.images) {
      rslt = new Image();
      rslt.src = arg;
      return rslt;
   }
}

function changeImages() {
   if (document.images && (preloadFlag == true)) {
      for (var i=0; i<changeImages.arguments.length; i+=2) {
         document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
      }
   }
}

var preloadFlag = false;
function preloadImages() {
   if (document.images) {
      NavigationTemplate_wo_nav_04_over = newImage("images/NavigationTemplate_wo_na-06.gif");
      NavigationTemplate_wo_nav_06_over = newImage("images/NavigationTemplate_wo_na-09.gif");
      NavigationTemplate_wo_nav_12_over = newImage("images/NavigationTemplate_wo_na-16.gif");
      preloadFlag = true;
   }
}

// -->
</script>
<!-- End Preload Script -->
<style type="text/css">
<!--
body {
   background-image: url(images/NavigationTemplate_02.gif);
}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">
<div align="center">
  <!-- ImageReady Slices (NavigationTemplate.psd) -->
  <table id="Table_01" width="826" height="900" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="7">
        <img src="images/NavigationTemplate_wo_nav_0.gif" width="825" height="171" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="171" alt=""></td>
     </tr>
    <tr>
      <td rowspan="4">
        <img src="images/NavigationTemplate_wo_na-03.gif" width="61" height="56" alt=""></td>
       <td colspan="6">
          <img src="images/NavigationTemplate_wo_na-04.gif" width="764" height="11" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="11" alt=""></td>
     </tr>
    <tr>
      <td>
        <a href="//directions//#"
            onmouseover="changeImages('NavigationTemplate_wo_nav_04', 'images/NavigationTemplate_wo_na-06.gif'); return true;"
            onmouseout="changeImages('NavigationTemplate_wo_nav_04', 'images/NavigationTemplate_wo_na-05.gif'); return true;"
            onmousedown="changeImages('NavigationTemplate_wo_nav_04', 'images/NavigationTemplate_wo_na-06.gif'); return true;"
            onmouseup="changeImages('NavigationTemplate_wo_nav_04', 'images/NavigationTemplate_wo_na-06.gif'); return true;">
          <img name="NavigationTemplate_wo_nav_04" src="images/NavigationTemplate_wo_na-05.gif" width="225" height="26" border="0" alt=""></a></td>
       <td rowspan="6">
          <img src="images/NavigationTemplate_wo_na-07.gif" width="324" height="718" alt=""></td>
       <td colspan="3" rowspan="2">
          <a href="//pastorswelcome//#"
            onmouseover="changeImages('NavigationTemplate_wo_nav_06', 'images/NavigationTemplate_wo_na-09.gif'); return true;"
            onmouseout="changeImages('NavigationTemplate_wo_nav_06', 'images/NavigationTemplate_wo_na-08.gif'); return true;"
            onmousedown="changeImages('NavigationTemplate_wo_nav_06', 'images/NavigationTemplate_wo_na-09.gif'); return true;"
            onmouseup="changeImages('NavigationTemplate_wo_nav_06', 'images/NavigationTemplate_wo_na-09.gif'); return true;">
            <img name="NavigationTemplate_wo_nav_06" src="images/NavigationTemplate_wo_na-08.gif" width="152" height="27" border="0" alt=""></a></td>
       <td rowspan="6">
          <img src="images/NavigationTemplate_wo_na-10.gif" width="63" height="718" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="26" alt=""></td>
     </tr>
    <tr>
      <td rowspan="5">
        <img src="images/NavigationTemplate_wo_na-11.gif" width="225" height="692" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="1" alt=""></td>
     </tr>
    <tr>
      <td colspan="3" rowspan="2">
        <img src="images/NavigationTemplate_wo_na-12.gif" width="152" height="673" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="18" alt=""></td>
     </tr>
    <tr>
      <td rowspan="3">
        <img src="images/NavigationTemplate_wo_nav_1.gif" width="61" height="673" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="655" alt=""></td>
     </tr>
    <tr>
      <td rowspan="2">
        <img src="images/NavigationTemplate_wo_na-14.gif" width="39" height="18" alt=""></td>
       <td>
          <a href="josiahking.com"
            onmouseover="changeImages('NavigationTemplate_wo_nav_12', 'images/NavigationTemplate_wo_na-16.gif'); return true;"
            onmouseout="changeImages('NavigationTemplate_wo_nav_12', 'images/NavigationTemplate_wo_na-15.gif'); return true;"
            onmousedown="changeImages('NavigationTemplate_wo_nav_12', 'images/NavigationTemplate_wo_na-16.gif'); return true;"
            onmouseup="changeImages('NavigationTemplate_wo_nav_12', 'images/NavigationTemplate_wo_na-16.gif'); return true;">
            <img name="NavigationTemplate_wo_nav_12" src="images/NavigationTemplate_wo_na-15.gif" width="107" height="15" border="0" alt=""></a></td>
       <td rowspan="2">
          <img src="images/NavigationTemplate_wo_na-17.gif" width="6" height="18" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="15" alt=""></td>
     </tr>
    <tr>
      <td>
        <img src="images/NavigationTemplate_wo_na-18.gif" width="107" height="3" alt=""></td>
       <td>
          <img src="images/spacer.gif" width="1" height="3" alt=""></td>
     </tr>
  </table>
  <!-- End ImageReady Slices -->
</div>
</body>
</html>

THANKS SO MUCH for working with me!

Re: NEED HELP!

Poster: Ruth
Dated: Sunday January 20 2008 - 5:18:20 GMT

Hi,

OK, I just put a page together with the menu on it using the images I made from your template. I think that is the easiest. You can see how it is done and then do it however you need on your final page. If you need help then, just post back so I have the actual page to use

I put it all in a zip file. It does not contain the program files, just a data file called josiah_data.js So, you'll need to unzip this to whever you have the milonic files. One reason I always rename the data file is that it won't overwrite the one in the download so I always have it. You can look at the source code and see how I did the call for the milonic files. And you can open the josiah file and see how I set up the menu. Note that I didn't have urls, but if you see the first one Home, you'll see how you do the urls. You can then just put in whatever you need as urls.

http://support.milonic.com/ruth/josiah.zip

Let me know when you get this so I can delete it. Oh, I did do overimages, you don't have to use them. If you don't want them then just delete overimage=imagename; from each aI string. I made them look like the 'button' depresses when you mouseover it.

Ruth

Re: NEED HELP!

Poster: josiah
Dated: Sunday January 20 2008 - 13:06:27 GMT

Hi,

Thanks so much! I got the file so you can delete it now. I really do appericate the time you've taken to help a helpless person.

Thanks so mcuh, and I'll post back when I get it all done and let you see my final work.

Thanks Ruth!