Hi all,

I'm still working on my first template for SS, and I have a rollover/mouseover menu that was created in Dreamweaver.
When I have copied the code into the page.ss it no longer functions.

Is there something I should know about SS with regards to bringing in Javascript like this etc???

Any help would be great

<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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

Probably the image file paths are incorrect... ('../images/UI/nav/n_01home1_on.gif') etc.

Hi Hamish
That code was taken from a non page.ss file.

I have tried proper paths for ss like

{$ThemeDir}/images/UI/nav/n_11contacts1_on.gif

The image loads like it should, it's just the functioning (rollover etc) nothing is happening.

Theres nothing in the SS page.ss that would be preventing it from running?

Hi tf22raptor,

I saw your code here and I would strongly recommend you try a completely different approach to creating your rollovers. The method produced via Dreamweaver is quite old and no longer a standard or a best practice....

I would recommend you create a you navigation as a list

<ul id="nav">
      <li class="item1"><a href="#">Item 1</a></li>
      <li class="item2"><a href="#">Item 2</a></li>
      <li class="item3"><a href="#">Item 3</a></li>
</ul>

Now you have all the hooks you need to style (use Image Replacement method for your images). In your css file then just start adding what you need...

/* CSS Styles */
#nav {
	font-size: 1.2em;
	list-style: none;
	margin: 0;
	padding: 0 0 40px 0;
	overflow: hidden;
}

#nav li {
	display: block;
	float: left;
	text-align: center;
}

#nav li a {
	display: block;
	text-indent:-9999px;   /* Important will shift your text of the page and that is where the image replaces */
	width: 52px;  /* Size of your images */
	height: 70px;
}

.item1 a, .item1 a:link{
	background: url(../images/UI/nav/n_01home1.gif) 0 0 no-repeat;
}

.item1 a:hover {  /* the hover state image */
	background: url(../images/UI/nav/n_01home1_on.gif) 0 0 no-repeat;
}

There are plenty of tutorials out there covering "CSS Image Replacement" as well as creating Nav Menus using Lists and CSS (throw JavaScript in there for some enhancements later if you like)

I realize this may take you off you path here, but trust me it is path you will enjoy taking. It is liberating and rids your page of ugly, non-semantic code.

-Ed

Hi chingo yeah thanks for that. This is my first CSS layout site and I wasn't aware of CSS being able to do rollovers until recently, I will definatley ditch the horror that is the dreamweaver code and try a CSS solution.

Thanks for the post and the examples.

Cheers

that is an amazing peice of css. As I said I've only just learned about, CSS and what float, clear and all this css jargon means as I was quite happy just using table based design for the past 10 years.

A few questions about it.
What spec is this css from? css1,css2 or css3?

Do I need to be using a link name (item 1) in the link?
<li class="item1"><a href="#">Item 1</a></li>

can I just use
<li class="item1"><a href="#"></a></li>

???

How did you learn this peice of code, do you have any top notch css sites you recommend to check out for examples etc.
I'vefound it hard to find high quality css tutorials.

Finally what is the go with font sizes in css, I see a lot of people using 1.2em and eve %, what the!?!?!?. I'm a pt and px guy what is em and why the heck would they use %? (I'm a pixel to pixel perfect type of designer that when I do my concepts in photoshop aim to get them exactly like what I see but in html)

Also I have image sizes that are varying in width that make up the navigation, with that code you just have the one peice of css specifying the width of the first button.

#nav li a {
display: block;
text-indent:-9999px; /* Important will shift your text of the page and that is where the image replaces */
width: 52px; /* Size of your images */
height: 70px;
}

How would I go about it in css to specify individual sizes of images for each button.
At the because all of my images are using that value, I'm getting some of my nav images cut in half etc

Any help would be great

I worked out how to do the width for each individual image,

moved the
width: 52px; /* Size of your images */

to each individually named
.item1 a, .item1 a:link{

did need to apply it to the hover element for what ever reason.

Stil unsure of my other queries.