Image Menu

robertweis · **Joined:** Sat Mar 13, 2010 6:11 pm **Posts:** 15

Hi, I wonder if it is possible to imbed "Phatfusion ImageMenu" into iWeb. It is a very cool sliding picture menu.
If not, is there another way to make something like this.
http://www.phatfusion.net/plugins/imagemenu/

Please help.
:roll:

iWebFAQ · **Posted:** Sat Mar 13, 2010 10:50 pm

Hi,

I currently can't answer your question for sure since I have no computer at this time so I can't see what you're linking to. Anyway I hope to get it back from repair on Tuesday.

I don't think you can implement the one you're linking to since it's a plugin for I don't know what. But you may be able to create something similar with an application called BannerZest. You may want to have a look at it and see whether it does what you want. It creates a lot of different kind of image menus which can be embedded into iWeb.

Regards,
Cédric

robertweis · **Joined:** Sat Mar 13, 2010 6:11 pm **Posts:** 15

Hi, thanks for your answer. I have been looking at the BannerZest program and there is nowhere you can add a link to a image.
Also I would like the mouse over effect as in "ImageMenu" and click to choose a menu item

Regards Robert

iWebFAQ · **Posted:** Mon Mar 15, 2010 12:51 am

I will look into it on Tuesday, stay tuned.

iWebFAQ · **Posted:** Tue Mar 16, 2010 11:54 pm

Hi Robert,

today is your lucky day.

Download the imageMenu from the site you linked to and you will get a folder called "imageMenu" in there you see a folder called "img". That's where you put your images. Once you put the images in that folder take the whole "imageMenu" folder and upload it to the root of your server/website.

Open iWeb and paste the following code in an HTML Snippet:

Code:

<div class="container">
      
   <link rel="stylesheet" href="/imageMenu/css/style.css" type="text/css" media="screen" />
   
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
   <script type="text/javascript" src="/imageMenu/lighter/Lighter.js"></script>
   <script type="text/javascript" src="/imageMenu/lighter/Fuel.css.js"></script>
   <script type="text/javascript" src="/imageMenu/lighter/Fuel.html.js"></script>
   <script type="text/javascript" src="/imageMenu/lighter/Fuel.js.js"></script>
   <script type="text/javascript">
      window.addEvent('domready', function(){
         $$('code').light({
            altLines: 'hover',
            path: '/imageMenu/lighter/',
            mode: 'ol',
            fuel: 'js',
            indent: 4
         });
      });
   </script>
   
   <link rel="stylesheet" href="/imageMenu/css/imageMenu.css" type="text/css" media="screen" />
   
   <script type="text/javascript" src="/imageMenu/js/Fx.Elements.js"></script>
   <script type="text/javascript" src="/imageMenu/js/imageMenu.js"></script>
   <script type="text/javascript">
   
      window.addEvent('domready', function(){
         var basicMenu = new ImageMenu($$('#imageMenuBasic a'),{
            openWidth:310, 
            border:2
         });
      });
   
   </script>
         <div>
            <div id="imageMenuBasic" class="imageMenu">
            <ul>
               <li class="landscapes"><a href="http://www.aaronbirchphotography.com" target="_top">Landscapes</a></li>
               <li class="people"><a href="http://www.aaronbirchphotography.com" target="_top">People</a></li>
               <li class="nature"><a href="http://www.aaronbirchphotography.com" target="_top">Nature</a></li>
               <li class="urban"><a href="http://www.aaronbirchphotography.com" target="_top">Urban</a></li>
               <li class="abstract"><a href="http://www.aaronbirchphotography.com" target="_top">Abstract</a></li>
            </ul>
            </div>
         </div>
   </div>

Where it says

<li class="people">

people is the name of the image so replace it with the name of your own image (just without the extension .jpg)
Where it says http://www.aaronbirchphotography.com enter the URL to the page you want the image to link to
People is the title of the image which displays in the menu

You will probably have to enlarge the HTML Snippet you entered the code to for the menu to display completely

The menu will show up only once published to the web not in iWeb itself nor in local.

If you publish to MobileMe upload the imageMenu folder to the iDisk/Web/Sites/ folder. If you're using MobileMe's standard web.me.com/username/ address you have to add /YourUsername/ to the relative paths above hence
"/imageMenu/lighter/Lighter.js"
would get
"/YourUsername/imageMenu/lighter/Lighter.js"

Regards,
Cédric

robertweis · **Joined:** Sat Mar 13, 2010 6:11 pm **Posts:** 15

Hi Cédric.

I want to thank you very much for taking time to help me.
Still have one problem, I done everything you wrote but can not get the pictures to show on my page witch I
uploaded to my server. I get it in text like this http://hem.bredband.net/imacweis/Tomt.html.

I used the pictures that came with the "ImageMenu" and I only changed one link to see if it worked.
What am I doing wrong please help.

Best regards
Robert

iWebFAQ · **Posted:** Thu Mar 18, 2010 11:22 pm

robertweis wrote:

I done everything you wrote but can not get the pictures to show [...] what am I doing wrong?

Where did you upload the "imageMenu" folder to?

The folder should be under
http://hem.bredband.net/imageMenu/
if http://hem.bredband.net is your domain

If http://hem.bredband.net/imacweis/ is your "base URL" hence if imacweis is your username and not your sitename in iWeb
then the imageMenu folder should be reachable under
http://hem.bredband.net/imacweis/imageMenu/

and in that case you would have to change the relative paths in the code from
"/imageMenu/lighter/Lighter.js"
to
"/imacweis/imageMenu/lighter/Lighter.js"

Bottom line: I don't know how your hosting works.

All codes on my website assume you have a domain name yourdomain.com
And a sitename in iWeb /sitename/
And a pagename in iWeb pagename.html
Hence yourdomain.com/sitename/pagename.html
The imageMenu folder should be under yourdomain.com/imageMenu/
If your hosting is different it would be up to you...

robertweis · **Joined:** Sat Mar 13, 2010 6:11 pm **Posts:** 15

Hi, and thanks again.

I tried everything still no images, maybe it can't work.

Here is my structure.
FTP Server address: "ftp.bredband.net"
username: "imacweis"

Web place name: "Test"

Web URL: "http://hem.bredband.net/imacweis"

I log on to the server and place the imageMenu folder in the root, and all the files from iWeb
It still can't find the pictures

I understan if you can't help me anymore.

Thank you anyway.
Robert

iWebFAQ · **Posted:** Fri Mar 19, 2010 11:37 pm

This is the code which should work for you. Again it works only in HTML Snippets and only once uploaded to the web.

Code:

<div class="container">
      
   <link rel="stylesheet" href="/imacweis/imageMenu/css/style.css" type="text/css" media="screen" />
   
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
   <script type="text/javascript" src="/imacweis/imageMenu/lighter/Lighter.js"></script>
   <script type="text/javascript" src="/imacweis/imageMenu/lighter/Fuel.css.js"></script>
   <script type="text/javascript" src="/imacweis/imageMenu/lighter/Fuel.html.js"></script>
   <script type="text/javascript" src="/imacweis/imageMenu/lighter/Fuel.js.js"></script>
   <script type="text/javascript">
      window.addEvent('domready', function(){
         $$('code').light({
            altLines: 'hover',
            path: '/imacweis/imageMenu/lighter/',
            mode: 'ol',
            fuel: 'js',
            indent: 4
         });
      });
   </script>
   
   <link rel="stylesheet" href="/imacweis/imageMenu/css/imageMenu.css" type="text/css" media="screen" />
   
   <script type="text/javascript" src="/imacweis/imageMenu/js/Fx.Elements.js"></script>
   <script type="text/javascript" src="/imacweis/imageMenu/js/imageMenu.js"></script>
   <script type="text/javascript">
   
      window.addEvent('domready', function(){
         var basicMenu = new ImageMenu($$('#imageMenuBasic a'),{
            openWidth:310, 
            border:2
         });
      });
   
   </script>
         <div>
            <div id="imageMenuBasic" class="imageMenu">
            <ul>
               <li class="landscapes"><a href="http://www.aaronbirchphotography.com" target="_top">Landscapes</a></li>
               <li class="people"><a href="http://www.aaronbirchphotography.com" target="_top">People</a></li>
               <li class="nature"><a href="http://www.aaronbirchphotography.com" target="_top">Nature</a></li>
               <li class="urban"><a href="http://www.aaronbirchphotography.com" target="_top">Urban</a></li>
               <li class="abstract"><a href="http://www.aaronbirchphotography.com" target="_top">Abstract</a></li>
            </ul>
            </div>
         </div>
   </div>

Let me know...

robertweis · **Joined:** Sat Mar 13, 2010 6:11 pm **Posts:** 15

Well what can I say, now it works.
I want to give you 1000 thanks.
How wonderful of you to take time for me and my problems.
Once again, thank you very much.

Have a nice weekend.

Best Regards
Robert