alangnw
03-17-2009, 04:03 PM
I have used this script before successfully some time ago - though if I remember correctly I had the same problem. On looking at their site I see the support forum is no more. I was hoping someone here might be able to help. Thanks in advance for any help you can offer.
The menu shows fine when I test it locally. But once uploaded to a server the items are displaying as text on a live site as follows.
* Item1
* Item2
* Item3
* Item4
* Item5
* Item6
* Item7
* Item8
I have checked what I have done against the previous use and everything looks the same. I'm at a bit of a loss as to where to look...?
<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:233, border:2, onOpen:function(e,i){alert(e);}});
});
</script>
<div id="imageMenu">
<ul>
<li class="item1"><a href="index.html">Item1</a></li>
<li class="item2"><a href="about.html">Item2</a></li>
<li class="item3"><a href="menus.html">Item3</a></li>
<li class="item4"><a href="events.html">Item4</a></li>
<li class="item5"><a href="functions.html">Item5</a></li>
<li class="item6"><a href="reviews.html">Item6</a></li>
<li class="item7"><a href="links.html">Item7</a></li>
<li class="item8"><a href="contact.html">Item8</a></li>
</ul>
</div>
/**************************************************************
Image Menu
v 2.2
**************************************************************/
#imageMenu {
position: relative;
width: 904px;
height: 150px;
overflow: hidden;
}
#imageMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 150px;
width: 1000px;
padding: 0px;
}
#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:112px;
height: 150px;
}
#imageMenu ul li.item1 a {
background: url(/images/item1.jpg) repeat scroll 0%;
}
#imageMenu ul li.item2 a {
background: url(/images/item2.jpg) repeat scroll 0%;
}
#imageMenu ul li.item3 a {
background: url(/images/item3.jpg) repeat scroll 0%;
}
#imageMenu ul li.item4 a {
background: url(/images/item4.jpg) repeat scroll 0%;
}
#imageMenu ul li.item5 a {
background: url(/images/item5.jpg) repeat scroll 0%;
}
#imageMenu ul li.item6 a {
background: url(/images/item6.jpg) repeat scroll 0%;
}
#imageMenu ul li.item7 a {
background: url(/images/item7.jpg) repeat scroll 0%;
}
#imageMenu ul li.item8 a {
background: url(/images/item8.jpg) repeat scroll 0%;
}
.clear {
clear: both;
}
/*************************************************************/
The menu shows fine when I test it locally. But once uploaded to a server the items are displaying as text on a live site as follows.
* Item1
* Item2
* Item3
* Item4
* Item5
* Item6
* Item7
* Item8
I have checked what I have done against the previous use and everything looks the same. I'm at a bit of a loss as to where to look...?
<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:233, border:2, onOpen:function(e,i){alert(e);}});
});
</script>
<div id="imageMenu">
<ul>
<li class="item1"><a href="index.html">Item1</a></li>
<li class="item2"><a href="about.html">Item2</a></li>
<li class="item3"><a href="menus.html">Item3</a></li>
<li class="item4"><a href="events.html">Item4</a></li>
<li class="item5"><a href="functions.html">Item5</a></li>
<li class="item6"><a href="reviews.html">Item6</a></li>
<li class="item7"><a href="links.html">Item7</a></li>
<li class="item8"><a href="contact.html">Item8</a></li>
</ul>
</div>
/**************************************************************
Image Menu
v 2.2
**************************************************************/
#imageMenu {
position: relative;
width: 904px;
height: 150px;
overflow: hidden;
}
#imageMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 150px;
width: 1000px;
padding: 0px;
}
#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:112px;
height: 150px;
}
#imageMenu ul li.item1 a {
background: url(/images/item1.jpg) repeat scroll 0%;
}
#imageMenu ul li.item2 a {
background: url(/images/item2.jpg) repeat scroll 0%;
}
#imageMenu ul li.item3 a {
background: url(/images/item3.jpg) repeat scroll 0%;
}
#imageMenu ul li.item4 a {
background: url(/images/item4.jpg) repeat scroll 0%;
}
#imageMenu ul li.item5 a {
background: url(/images/item5.jpg) repeat scroll 0%;
}
#imageMenu ul li.item6 a {
background: url(/images/item6.jpg) repeat scroll 0%;
}
#imageMenu ul li.item7 a {
background: url(/images/item7.jpg) repeat scroll 0%;
}
#imageMenu ul li.item8 a {
background: url(/images/item8.jpg) repeat scroll 0%;
}
.clear {
clear: both;
}
/*************************************************************/