My Dilema.

[Parsa44]

Reccently i made a navigation bar on photoshop. The navigation bar has a rollover effect.

I had finished the graphics and was just about to put the names of the buttons on when i thought it would be much better if it was possible to just have the roll over button with no name on it, then put the name on in HTML. so if any of my pages changes names i can just edit it instead of making the button all over again.

In simpler terms.

I made a roll over button

Is it possible to use HTML to write somthing over the roll over button and still make it work.

 

[sourfacedcyclop]

It should be. You could use somthing like this

<ul class="navbar">
<li class="rolllink"> <a href="whereever.html"> Text you want here </a> </li>
</ul>

and then for the css

ul.navbar {
list-style:none;
display:block;
}

ul.navbar li.rolllink {
background: url(image.extension) no-repeat;
height:whatever;
width:whatever;
display:block;
}

ul.navbar li.rolllink:hover {
background: url(image-hover.extension) no-repeat;
}

that should be the gist of it. You would need to edit the css to you needs, but that would be one way of doing it, hope it helps

 

[Parsa44]

So i just repeat that for each one of my buttons?

 

[sourfacedcyclop]

The image is the same correct? Its just the text you want to change?

<ul class="navbar">
<li class="rolllink"> <a href="whereever.html"> Text you want here </a> </li>
<li class="rolllink"> <a href="whereever.html"> Link 2 </a> </li>
<li class="rolllink"> <a href="whereever.html"> Link 3 </a> </li>
<li class="rolllink"> <a href="whereever.html"> Link 4 </a> </li>
<li class="rolllink"> <a href="whereever.html"> Link 5 </a> </li>
</ul>

that would be how you add more links

 

[Parsa44]

Okay thanks mate =)

 

[sourfacedcyclop]

No, prob, if you need more help you can pm me