So, I performed a sprite on a button but when I tried to put that button over an image it gets hidden behind the image. So, what’s the trick to allowing a sprite to sit on top of an image.
Sorry, I tried to post and image of the example, but for some reason the editor kept giving me an error.
If you want the sprite to sit over the top of text, you need to place it in something like a span element that is absolutely positioned over the text. Here is an example (it’s not a sprite, but works the same way):
I don’t want it to sit on top of text. I want the button to sit on top of another image. I wish I could upload the photo to show but I keep getting an error message.
I think I misread your question. But it’s not clear what you are trying to do. An image over an image? That makes no sense. Do you mean that you want to use an image for a link but to have that image change on hover? That’s quite easy, and it’s what a sprite is for. BUT … in a sprite, both the normal state and the hover state are part of the same image. You just shift the position of the background image on hover.
Firstly confirm that this is what you want, and we can explain further if that’s the case.
Yes so I have a button which I want people to click on when to take them to another website. The button changes when you hover over it and its working great with the use of a sprite. However, when I try to place that button over the background image that I want to set it on then the button gets hidden behind the image. The order of the html doesn’t matter, either way the button gets hidden.
This is still a bit confusing, but I’m guessing that you have a button, inside a bigger container that has a background image? In that case, place that bigger image as a background on the div that contains the button.
If that doesn’t make sense, make up an image of what you are trying to do and post it here. If you are having trouble posting an image, use the “Manage Attachments” facility, or just post a link to an image online somewhere.
Thanks changing that big image to a background image worked. However, now I have an issue of making a background image clickable. I don’t know if I’ve seen this before.
You can’t do that per se, but you can fake it. BUT … why? You want a clickable button … inside a div that is separately clickable? This is not making sense at all.
Image text can be made big and blurry, but cannot be enlarged like real text… of which there is none.
That aside, if you show an example of somewhere working the way you want, or can throw up a fake temp version page with real code (and real images) we can play with, we can show how it can be coded (and accessible too).
