Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Aug 2011
    Posts
    134
    Thanks
    20
    Thanked 0 Times in 0 Posts

    add dropdown menu in the existing system

    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.

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Posts
    134
    Thanks
    20
    Thanked 0 Times in 0 Posts
    is it possible to replicate the same with CSS?

  • #3
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    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.

    PHP Code:
    <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
    PHP Code:
    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..

    PHP Code:
    <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.

  • #4
    Regular Coder
    Join Date
    Aug 2011
    Posts
    134
    Thanks
    20
    Thanked 0 Times in 0 Posts
    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..

  • #5
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    ahh I see... well can you recreate the aerators like the fountains is, then remove the picture in the css for the current aerators?

  • #6
    Regular Coder
    Join Date
    Aug 2011
    Posts
    134
    Thanks
    20
    Thanked 0 Times in 0 Posts
    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..

  • #7
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    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

  • #8
    Regular Coder
    Join Date
    Aug 2011
    Posts
    134
    Thanks
    20
    Thanked 0 Times in 0 Posts
    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..

  • #9
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    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!
    PHP Code:
    <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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •