Dynamic background image change possible?
Hey lets say i got two links on my page and i have some sub links(show up when main link clicked). Those two links have different background image.
*link1
-link1underlinkone
-link1underlinktwo
*link2
-link2underlinkone
-link2underlinktwo
-link2underlinkthree
I can easily change background image on those two main links, but how sh开发者_运维问答ould i pass same background style to my under-links? And underunder-links if i would have any?
edit: woops forgot to tell i want change background image of BODY not the link/links ;)
You should try putting both the main links in seperate div's with their sub-links. Set the background on the div (set display to none so it is invisible), and then set the background on all the links to inherit, so they take the background from their parent div.
Edit: Use the code I made below
<head>
<style type="text/css">
#link1wrapper {
background-image: url(background1.jpg);
visiblity:hidden;
}
#link2wrapper {
background-image: url(background2.jpg);
visiblity:hidden;
}
.linkmenu a{
background-image: inherit;
visibility: visible;
}
</style>
</head>
<body>
<div id="link1wrapper" class="linkmenu">
*link1
-link1underlinkone
-link1underlinktwo
</div>
<div id="link2wrapper" class="linkmenu">
*link2
-link2underlinkone
-link2underlinktwo
-link2underlinkthree
</div>
</body>
Edit: I fixed the code. Now, it puts a background on the div's and hides the div's, then I set the links in the div's to visible and voila, all the links have inherited it's background. The things you should be aware of are not to put anything else in the div's. If you do, you have to style them to set them to visible and set their background to none.
That's all I could come up with based on the very limited information you have given me. You didn't use any code, any examples, or any references, so it's very hard to answer your question accurately.
I better get an upvote for this one =p
Guessing you want to make a proper menu structure here is a little demo I made.
http://jsfiddle.net/sg3s/fPu9S/
The two key properties used are background-image: inherit and visibility: hidden.
background-image: inherit will make the element inherit properties from its direct parent, if no image is specified this means no properties will be inherited. Due to this we need to make the ul for the sublinks / menu inherit the properties from its parent too... Then we mask this image on the ul using visibility: hidden and since visibility default setting is inherit we need to make the lis visible again with visibility:visible.
So thats the explanation of what is actually going on. inheriting the styles can't be used together with the anchor tags unless you nest the sub links inside the main anchors and I don't think that is even valid or accepted code.
加载中,请稍侯......
精彩评论