Complicated CSS swap
- Started
- Last post
- 23 Responses
- digilee
Guys, I hope someone can help me out here.
I have a link in a list, (class assigned)
I have block, (class assigned), with a background image.I want to swap the background image of the block onMouseover on the links.
Any pointers?
Thanks in advance.
- Witt0
a:hover.block1 {
background: url(img/file.ext)
}
- digilee0
Man! I so thought that would work, but no.
:(
- mpfree0
you mean like in the right nav?
- digilee0
mpfree ... that's just changing the bg color isn't it?
If so then that's not it.
I feel I need to explain more.
A list of links:
link1
link2
link3Also I have a css created block:
block1When I roll over link1, I want to change the background image of block1.
When I roll over link2 I want to change the background of block1 to a different image.
In the same way as the old javascript image swap.
I don't know if this is actually possible!
- Witt0
damn. probably doesn't work because another image is there. maybe un-hiding a div containg the new bg would work.
- digilee0
I could do a 'change property' but I can't access the link as this is php created!
Any javascript solution would have been easy but it HAS to be done in css.
Onwards and upwards.
- mpfree0
hmmm... yeah you might want to use Flash for that one
but there probably is some complicated JS out there that tackles it
- digilee0
thanks anyway.
IF I ever find a solution I'll post it here.
- rafalski0
something in the lines of..
document.getElementsByClassName... = function() {this.style.backgroundImage = "blah.jpg"}
or simpler inline, as a tag parameter:
onmouseover="this.style.backgrou...
My syntax might be flawed, but I meant well :)
- rafalski0
wait.. you want to swap some block's bg triggered by an mouseover event on a separate link?
onmouseover='document.getElement...
provided that it's the only element on the site with that class name (better use an ID than class in such case)
- welded0
He apparently doesn't have access to the source code, besides CSS, so the JS isn't a solution. Sounds like a hosted web board, or something.
- digilee0
It's not a hosted web board, the links are dynamically generated, by php, which I can't change, (not good enough at php).
The only way I can do this would be by using css.
- rafalski0
..but can you add some JS at the end of the code? does the link have a name or an id, also, is the element you're targetting the only one in the doc with a specific class?
- digilee0
The link has an id, (that's about the only thing I managed to add in the php!).
The main block, that I want to change the bg image on, is the only block with that id.
All i can add to the links is a css id/ class/ style.Block - id=block1 - this never changes
link1 - id=link1
link2 - id=link2 ... etcAs an example:
If I was using frames, I would simply target a frame.Look here as I think this might help - http://z6.co.uk/phoblo.php - the image in the middle is what I want to change on A:HOVER of the links on the left.
- Dancer0
THere is a really simple way to do it without JS and its soooo good:
Get both of and on states in the same image and sift the position of it on the hover stat. This also means that you only load one image
Check the top nav on a site I did a while back:
http://www.addingtonformworks.co…one image:
you can also do a state for the selected state as well.
I think there is a tut for this hang on...
- Dancer0
here you go:
http://www.simplebits.com/notebo…
- Witt0
never tried it but can't you use divs? make a black pic (if bg is black) z-index:100:
.blackpicdiv {
z-index:100;
}.div1link1 {
z-index:1;
}.div2link2 {
z-index: 1
}a:hover.div1 {
z-index:200
}a:hover.div2 {
z-index:200
}?
- Witt0
forget what i said. didn't see your last post.
- Witt0
- digilee0
I appreciate your responses but these are just untargeted image swaps.
I need to actually target another div.If it would work, I would write something like:
link1 a:hover block
background-image:adifferentimagelink2 a:hover block
background-image:anotherimageetc
which basically would mean, on hover on link1, change the background image in the div id=block.
I have tried lots of different rollovers but these all, like your suggestions, just swap the image that you are on.
It's a tough one!