AJAX

Drop down menu with images

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Sep 2004

Posts: 33

Reputation: anthmaina is an unknown quantity at this point

Solved Threads: 0

anthmaina

Offline

Light Poster

Drop down menu with images

Jun 18th, 2007

I have written a script for a drop down menu on my site which on mouse over the menu item changes from blue to yellow and show the drop down item but now I'm stuck,i want to use background images instead of colors.On mouse over, it changes from image A to image B and still show drop down items.Any clue or suggestions?

•

Join Date: Apr 2007

Posts: 437

Reputation: Fungus1487 is on a distinguished road

Solved Threads: 50

Fungus1487 Fungus1487 is offline

Offline

Posting Pro in Training

Re: Drop down menu with images

Jun 18th, 2007

i dont believe javascript holds a method to directly change a css background. but if you create two css classes for your menus you can use javascript to change the class. just google search for altering a css class from javascript im sure theres a few examples. An easier way tho perhaps could be a purely css menu ? try googling that aswell as they can be used by all clients unlike javascript. but this depends if you want a drop down with inner dropdown groups. But yer try having a look and see waht suits you.

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design

•

Join Date: Jun 2006

Posts: 7,609

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 464

~s.o.s~

Offline

Failure as a human

Re: Drop down menu with images

Jun 18th, 2007

•

I have written a script for a drop down menu on my site which on mouse over the menu item changes from blue to yellow and show the drop down item but now I'm stuck,i want to use background images instead of colors.On mouse over, it changes from image A to image B and still show drop down items.Any clue or suggestions?

Maybe pasting your code here would help us provide some concrete suggestions.

> i dont believe javascript holds a method to directly change a css background
Something like this:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<html>
<head>
    <script>
    function changeOver(id)
    {
        var elem = document.getElementById(id);
        elem.style.backgroundColor = '#aabbcc';
        elem.style.cursor = 'pointer';
        elem.style.cursor = 'hand';
    }
    function changeOut(id)
    {
        document.getElementById(id).style.backgroundColor = '#ffffff';
    }
    </script>
</head>
<body>
    <span id="myP" onmouseout="changeOut(this.id);" onmouseover="changeOver(this.id);">Place your mouse over this text</span>
</body>
</html>
<html>
<head>
    <script>
    function changeOver(id)
    {
        var elem = document.getElementById(id);
        elem.style.backgroundColor = '#aabbcc';
        elem.style.cursor = 'pointer';
        elem.style.cursor = 'hand';
    }
    function changeOut(id)
    {
        document.getElementById(id).style.backgroundColor = '#ffffff';
    }
    </script>
</head>
<body>
    <span id="myP" onmouseout="changeOut(this.id);" onmouseover="changeOver(this.id);">Place your mouse over this text</span>
</body>
</html>

I don't accept change; I don't deserve to live.

•

Join Date: Apr 2007

Posts: 437

Reputation: Fungus1487 is on a distinguished road

Solved Threads: 50

Fungus1487 Fungus1487 is offline

Offline

Posting Pro in Training

Re: Drop down menu with images

Jun 18th, 2007

•

Originally Posted by ~s.o.s~

Maybe pasting your code here would help us provide some concrete suggestions.

> i dont believe javascript holds a method to directly change a css background
Something like this:
Help with Code Tags

javascript Syntax (Toggle Plain Text)
<html>
<head>
    <script>
    function changeOver(id)
    {
        var elem = document.getElementById(id);
        elem.style.backgroundColor = '#aabbcc';
        elem.style.cursor = 'pointer';
        elem.style.cursor = 'hand';
    }
    function changeOut(id)
    {
        document.getElementById(id).style.backgroundColor = '#ffffff';
    }
    </script>
</head>
<body>
    <span id="myP" onmouseout="changeOut(this.id);" onmouseover="changeOver(this.id);">Place your mouse over this text</span>
</body>
</html>
<html> <head> <script> function changeOver(id) { var elem = document.getElementById(id); elem.style.backgroundColor = '#aabbcc'; elem.style.cursor = 'pointer'; elem.style.cursor = 'hand'; } function changeOut(id) { document.getElementById(id).style.backgroundColor = '#ffffff'; } </script> </head> <body> <span id="myP" onmouseout="changeOut(this.id);" onmouseover="changeOver(this.id);">Place your mouse over this text</span> </body> </html>

sorry what i meant was i dont believe you can change a background image via javascript. my bad

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design

•

Join Date: Jun 2006

Posts: 7,609

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 464

~s.o.s~

Offline

Failure as a human

Re: Drop down menu with images

Jun 18th, 2007

> sorry what i meant was i dont believe you can change a
> background image via javascript. my bad

Something like this;

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<html>
<head>
    <script>
    function changeOver(id)
    {
        var elem = document.getElementById(id);
        elem.style.backgroundImage = "url(submit.gif)";
        elem.style.cursor = 'pointer';
        elem.style.cursor = 'hand';
    }
    function changeOut(id)
    {
        var elem = document.getElementById(id);
        elem.style.backgroundImage = "url(search.gif)";
    }
    </script>
</head>
<body>
    <span style="background-image: url(search.gif); color: white;" id="myP" onmouseout="changeOut(this.id);" onmouseover="changeOver(this.id);">
    Hello to all of you. This text is white
    </span>
</body>
</html>
<html>
<head>
    <script>
    function changeOver(id)
    {
        var elem = document.getElementById(id);
        elem.style.backgroundImage = "url(submit.gif)";
        elem.style.cursor = 'pointer';
        elem.style.cursor = 'hand';
    }
    function changeOut(id)
    {
        var elem = document.getElementById(id);
        elem.style.backgroundImage = "url(search.gif)";
    }
    </script>
</head>
<body>
    <span style="background-image: url(search.gif); color: white;" id="myP" onmouseout="changeOut(this.id);" onmouseover="changeOver(this.id);">
    Hello to all of you. This text is white
    </span>
</body>
</html>

Attached Images

I don't accept change; I don't deserve to live.

•

Join Date: Apr 2007

Posts: 437

Reputation: Fungus1487 is on a distinguished road

Solved Threads: 50

Fungus1487 Fungus1487 is offline

Offline

Posting Pro in Training

Re: Drop down menu with images

Jun 19th, 2007

you obviously have magical powers of which i do not.

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design

•

Join Date: Jun 2006

Posts: 7,609

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 464

~s.o.s~

Offline

Failure as a human

Re: Drop down menu with images

Jun 19th, 2007

> you obviously have magical powers of which i do not.
Nah, I just like poking at things. ;-)

I don't accept change; I don't deserve to live.

•

Join Date: Jun 2007

Posts: 1

Reputation: butjeffsays is an unknown quantity at this point

Solved Threads: 0

butjeffsays butjeffsays is offline

Offline

Newbie Poster

Re: Drop down menu with images

Jun 19th, 2007

You could save yourself some scripting next time with purely css rollovers, and save the scripting for the dropdown positioning.

Try one of the image rollover lists:

http://css.maxdesign.com.au/listamatic/