...

View Full Version : add dropdown menu in the existing system



coding_begins
01-20-2012, 02:34 AM
I am working on a site which is pretty old school.. i have a vertical drop down menu using javascript which uses <img src tag>..
Check the tab fountains at http://www.texaslakesandponds.com/index_html.html (it has a vertex and kasco dropdown)

I want to add a similar dropdown for Aerators with the same format and color. I dont know how to do that since it uses a <ul><li> format and the image is called in the css class.
Can someone please help me with the code.

coding_begins
01-20-2012, 05:50 PM
is it possible to replicate the same with CSS?

SeattleMicah
01-20-2012, 06:38 PM
so it looks like you needs to give your html a mouse over command...then add that even in your javascript. I am pretty new too js so hopefully some other will weigh in.



<tr>
<td>
<div class='nav-aerators'>

<ul>
<li><a href="lakelifepump.html">Aerators</a></li>
</ul>

</div>
</a>

</td>
</tr>
<tr>
<td>
<a onMouseover="dropdownmenu(this, event, menu2, '165px');window.status='Home';document.fountains.href='images/mouseovers/fountains.jpg'; return true;" onMouseout="delayhidemenu();window.status=''; document.fountains.src='images/fountains.jpg'; return true;"><img src="images/fountains.jpg" name="fountains" alt="Fountains" width="117" height="26" border="0"></a>
</td>
</tr>
that second button calls menu2 event


var menu2=new Array()
menu2[0]='<a href="vertexfountains.html">Vertex</a>'
menu2[1]='<a href="kascofountains.html">Kasco</a>'


So maybe what you could do is edit the aerators <td></td> to be filled with this instead... Change the menu2 to a new menu11 or and then replace the fountains.jpg to your aerators.jp's. than add a js function up with the others to give you your other links..



<tr>
<td>
<a onMouseover="dropdownmenu(this, event, menu11, '165px');window.status='Home';document.fountains.href='images/mouseovers/fountains.jpg'; return true;" onMouseout="delayhidemenu();window.status=''; document.fountains.src='images/fountains.jpg'; return true;"><img src="images/fountains.jpg" name="fountains" alt="Fountains" width="117" height="26" border="0"></a>

</td>
</tr>

var menu11=new Array()
menu2[0]='<a href="Whatever.html">whatever</a>'
menu2[1]='<a href="HELLO.html">HELLO</a>'


there may be other things you need to change but I think these are the only two elements.

coding_begins
01-20-2012, 06:42 PM
The problem is fountains.jpg is already an image with fountains printed on it.
Aerators is a text placed manually over the empty image using css..so i cannot call the image like how it is called for fountains in the <img src=''> tag..

SeattleMicah
01-20-2012, 06:45 PM
ahh I see... well can you recreate the aerators like the fountains is, then remove the picture in the css for the current aerators?

coding_begins
01-20-2012, 06:47 PM
well i cannot do that..i am not a graphic designer and the person who did that is not available. So i am just trying to convert all the images in the css format, so it the text can be modified easily later..

SeattleMicah
01-20-2012, 06:51 PM
shoot, ya that will be much easier, but either way your going to have edit the images because you will have to remove the text in the .jpgs

coding_begins
01-20-2012, 06:52 PM
yes, i already have the image without the text. It's just that I want to activate the dropdown the same way it is designed now..

SeattleMicah
01-20-2012, 07:03 PM
I don't see a way to edit this element to overlay text, I am sorry I couldn't help you out man I hope you get it!

<td>
<a onmouseout="delayhidemenu();window.status=''; document.fountains.src='images/fountains.jpg'; return true;" onmouseover="dropdownmenu(this, event, menu2, '165px');window.status='Home';document.fountains.href='images/mouseovers/fountains.jpg'; return true;"><img width="117" border="0" height="26" alt="Fountains" name="fountains" src="images/fountains.jpg"></a></td>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum