[solved] Phatfusion imageMenu

Squeekyclean · by **Squeekyclean** on Fri Jul 03, 2009 12:22 am

A very good evening to everyone.

Looking for a big bit of help with imageMenu from Phatfusion.

My idea was to use this but increase the categories (photos) to eight instead of five, after two weeks of non stop frustration I have finally cracked it but still got problems.

I got eight categories (photos), increased the size to accommodate them all, change them to my own photos and everything works in "Live View" in Dreamweaver.

The problems start when I upload the html page plus the imageMenu.css, imageMenu.js and mootools.js, all I can see in IE and FF is text instead of the imagemenu.

Anyone had this problem or can shed some light on how to sort, it would be appreciated.
I just wish they brought out an extension, all this code is giving me a massive headache.

Squeeky

Jelenoczka · by **Jelenoczka** on Fri Jul 03, 2009 2:13 am

Hi there,

can you please post a demo of your page or maybe the code? :oops:

Squeekyclean · by **Squeekyclean** on Fri Jul 03, 2009 5:04 pm

Hi Jelenoczka

Thank you for looking at my post and offering some help, much appreciated.

The website I have the imageMenu on is http://www.teddy-bears-uk.com/ this is just a test address I use.
You will see that instead of the imageMenu that I should have all I have is a list of the pages.

Here is the code from the html page:

<!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>
<title>Listed | Lanarkshires No 1 Lifestyle Guide</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="Listed - Lanarkshires No 1 Lifestyle Guide & Online Resource For All The Family" />
<meta name="Keywords" content="Beauty, business, eating out, garden, kids, leisure, occasions" />
<meta name="robots" content="index,follow" />
<style type="text/css">

<link href="file:CSSFiles/imageMenu.css" rel="stylesheet" type="text/css"/>
<script src="file:/JavascriptFiles/mootools.js" type="text/javascript"></script>
<script src="file:/JavascriptFiles/imageMenu.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<style type="text/css">

</style>

</head>

<body>
<table width="925" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td width="21" valign="top" bgcolor="#858282"> </td>
<td colspan="2" valign="top" bgcolor="#858282"><img src="logo.jpg" alt="Heavenly Interiors Logo" width="900" height="150" border="0" /></td>
<td width="20" valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td colspan="2" valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td colspan="2" valign="top" bgcolor="#000000"><blockquote><span class="qwerty">Home | Welcome | About Lanarkshire | Lanarkshire Map | Picture Gallery | Competitions | Contact Us | Links</span></blockquote></td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td colspan="2" rowspan="13" valign="top" bgcolor="#000000"><div id="pf_imageMenu1" class="imageMenu">
<ul>
<li class="beauty"><a href="beauty.html">Beauty</a></li>
<li class="business"><a href="business.html">Business</a></li>
<li class="eating-out"><a href="eating-out.html">Eating Out</a></li>
<li class="garden"><a href="home-garden.html">Garden</a></li>
<li class="kids-stuff"><a href="kids-stuff.html">Kids Stuff</a></li>
<li class="leisure"><a href="leisure.html">Leisure</a></li>
<li class="occasions"><a href="occasions.html">Occasions</a></li>
<li class="road"><a href="road.html">On The Road</a></li>
</ul>
</div>
<script type="text/javascript">
// BeginWebWidget phatfusion_imageMenu: pf_imageMenu1

window.addEvent('domready', function(){
var myMenu = new ImageMenu("pf_imageMenu1",$$('.imageMenu a'),{openWidth:310, border:2});
});

// EndWebWidget phatfusion_imageMenu: pf_imageMenu1
</script></td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#858282"> </td>
<td width="155" valign="top" bgcolor="#858282"> </td>
<td width="711" valign="top" bgcolor="#858282"> </td>
<td valign="top" bgcolor="#858282"> </td>
</tr>
</table>
<p align="center"><span class="style50">© Listed 2009 | Website Design by Listed</span></p>
</body>
</html>

Code from the imageMenu.css

/**************************************************************

Image Menu
v 2.2

**************************************************************/

.imageMenu {
position: relative;
width: 840px;
height: 200px;
overflow: hidden;
}

.imageMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 200px;
width: 1000px;

}

.imageMenu ul li {
float: left;
}

.imageMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:98px;
height: 200px;
}

.imageMenu ul li.beauty a {
background: url(file:/images/beauty.jpg) repeat scroll 0%;
}

.imageMenu ul li.business a {
background: url(file:/images/business.jpg) repeat scroll 0%;
}

.imageMenu ul li.eating-out a {
background: url(file:/images/eating-out.jpg) repeat scroll 0%;
}

.imageMenu ul li.garden a {
background: url(file:/images/garden.jpg) repeat scroll 0%;
}

.imageMenu ul li.kids-stuff a {
background: url(file:/images/kids-stuff.jpg) repeat scroll 0%;
}

.imageMenu ul li.leisure a {
background: url(file:/images/leisure.jpg) repeat scroll 0%;
}

.imageMenu ul li.occasions a {
background: url(file:/images/occasions.jpg) repeat scroll 0%;
}

.imageMenu ul li.road a {
background: url(file:/images/road.jpg) repeat scroll 0%;
width: 310px;
}

.clear {
clear: both;
}

/*************************************************************/

I have also uploaded the imageMenu.js and mootools.js files to my server.

Can you see where I'm going wrong?

Thanks in advance.

Squekkyclean

Squeekyclean · by **Squeekyclean** on Sat Jul 04, 2009 10:10 pm

Come on guys & girls,

Thought the idea of a forum was to find help and help others, how do you expect to do that by reading posts and not contributing.

I have been busy trying this that and the next thing, reading other forums and implementing ideas to solve this.

Update: I have got the imageMenu uploaded, links to other pages in place and everything practically working, may have had something to do with updating mootools but I still have a problem, no images in menu.

The accordian part is working and links work but no images displayed.

I tried typing in the full path to the images etc but nothing works.

Any help out there or the number for the samaritans.

Squeeky

Squeekyclean · by **Squeekyclean** on Mon Jul 06, 2009 7:17 pm

Many Many thanks go to another forum for helping to solve the problems I was having, Google Groups - Mootools.

Posted my problems and had a reply within minutes, also sorted a few other problems also.

Squeekyclean

[solved] Phatfusion imageMenu

[solved] Phatfusion imageMenu

Re: Phatfusion imageMenu

Re: Phatfusion imageMenu

Re: Phatfusion imageMenu

Re: Phatfusion imageMenu

Who is online