| | |
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:
Solved Threads: 0
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?
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
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
•
•
•
•
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?
> i dont believe javascript holds a method to directly change a css background
Something like this:
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>
I don't accept change; I don't deserve to live.
•
•
•
•
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:
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>
When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
> sorry what i meant was i dont believe you can change a
> background image via javascript. my bad
Something like this;
> background image via javascript. my bad
Something like this;
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>
I don't accept change; I don't deserve to live.
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
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
•
•
Join Date: Jun 2007
Posts: 1
Reputation:
Solved Threads: 0
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/
Try one of the image rollover lists:
http://css.maxdesign.com.au/listamatic/
![]() |
Similar Threads
- XP Startup Problem: Infinite Loop (Windows NT / 2000 / XP)
- fancy borders with images... ? (HTML and CSS)
- opera problems with hover menu (JavaScript / DHTML / AJAX)
- daniweb on my start menu (Windows NT / 2000 / XP)
- For some reason program installations cannot create new start menu shortcuts... (Windows NT / 2000 / XP)
- IE6 has been constantly hijacked by .... (Viruses, Spyware and other Nasties)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Page top not top
- Next Thread: Help needed working with prototype.js and php
| Thread Tools | Search this Thread |
acid2 ajax ajaxexample ajaxjspservlets array browser bug captchaformproblem cart checkbox child class close codes createrange() css cursor date debugger decimal dependent design disablefirebug dom dropdown editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming progressbar prototype redirect runtime safari scale scriptlets scroll search security shopping size software toggle unicode w3c web wysiwyg \n






