drop down menu using images and javascript [SOLVED]

26 Posts

timbo_la Reply #1, 17 years, 5 months ago

Hi,

i started to look at implementing my navigation to my site using wayfinder and i have began reading the first few chapters of the wayfinder e-book and i am slowly starting to understand how things work.

i must admit i need to do a bit more research and practice but i just wanted to see if i was heading in the write direction.

below is the html my menus

<div id="colortab" class="ddcolortabs">
<ul>
<li><a href="#" title="news" target="_self"><img src="../images/menu_buttons/news_button.jpg" alt="news" class="domroll ../images/menu_buttons/over_state/new_button_over.jpg"/></a></li>	

<li><a href="index.php?page=about_me" title="about"><img src="../images/menu_buttons/about_button.jpg" alt="contact" class="domroll ../images/menu_buttons/over_state/about_button_over.jpg"/></a></li>	

<li><a href="#" title="portfolio" rel="dropmenu1_a"><img src="../images/menu_buttons/portfolio_button.jpg" alt="portfolio" class="domroll ../images/menu_buttons/over_state/portfolio_button_over.jpg"/></a></li>

<li><a href="index.php?page=contact" title="contact">

<img src="../images/menu_buttons/contact_button.jpg" alt="contact" class="domroll ../images/menu_buttons/over_state/contact_button_over.jpg"/></a></li>	

</ul>
</div>

i understand that all i need to do is my a template for the outer UL tags and also for the inner IL tags. which i have done. I have also made image TVs for the normal state and over state. This is where my question comes in, Do i have to make separate wayfinder templates for the over state to work.

below is what i have made so far.

<li><a href="[+wf.link+]" title="[+wf.title+]"[+wf.linktext+][+navImage+]" class="domroll ..[+navImageOver+]"/></a>[</li>

at the moment it aint working, do i need to separate the rollover image into its own template?

any guidance is much appreciated.

Tim

- 26 Posts
timbo_la Reply #2, 17 years, 5 months ago
Just to update to say that i have figured it out, such a great feeling when you start to understand how things work and you discover how to do it.

i will share with you how i did it.

instead of using the image widget which adds the "img src" tag for each button state. I used INPUT = image but then in the WIDGET field usesd the "html entities" selection here is my code below.
```
<li><a href="[+wf.link+]" title="[+wf.title+]"><img src="[+navImage+]" alt="news" class="domroll [+navImageOver+]"/>[+wf.wrapper+]</a></li>
```
the [+navImage+] and [+navImageOver+] are the Template Variables which are using the "html entities" widget to just replace the links to the images, without using the "img src" tags.

hope that makes sense, This may be pretty obvious but i hope it will help anyone else out there who is trying to do a similar thing.

Tim