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?
anthmaina 0 Light Poster
Fungus1487 55 Posting Pro in Training
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.
~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster
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:
<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> Fungus1487 55 Posting Pro in Training
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:<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
~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster
> sorry what i meant was i dont believe you can change a
> background image via javascript. my bad
Something like this;
<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>
Fungus1487 55 Posting Pro in Training
you obviously have magical powers of which i do not.
~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster
> you obviously have magical powers of which i do not.
Nah, I just like poking at things. ;-)
butjeffsays 0 Newbie Poster
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:
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.