I want to create a CSS rollover effect. I've looked at various tutorials online but can't find what I'm looking for. Basically on one side of the screen I want a series of thumbnail images. When you rollover the thumbnail, the full size image appears on the other side of the screen. Can anyone help or point me in the right direction? Cheers, MB
Unfortunately that won't work because the link in the example is text. I need the thumbnail image to link to the full size image. Thanks for the link anyway - may well be useful for another site
Im trying to do the same thing, you need to create a separate class for each image and link, and in the A:hover of the link you need to add a background image then use absolute positioning to get the picture to appear were you want it too, it works but im still haveing problems were my links and pictures flicker, and im trying to figure that out now. I hope i helped you out.
Actually, Mike, it will work. You're not limited to text (use an image as the link, or try one of the image replacement techniques)... the idea here is you can set nested elements of anchors to behave differently on :hover states. Look through the code, and if you find yourself stuck, let me know and I might be able to whip up a quick example.
That is fantastic and exactly what I needed. Did you do this yourself? Regardless, there's some Rep winging it's way to you now. Many thanks for that. I'll post the finished site once it's launched but that is awesome. Cheers, MB
Yeah, I figured it would be good to put up a live example for other members. Ah, DP has rep! Awesome.
I've just put it together. Needed to create a couple of new classes for unusual shaped images and it worked like an absolute dream! I honestly can't thank you enough. I spend a couple of hours last night wading through about 20 pages of Google results for "css rollovers" and found none of them did what I wanted. Your solution is by far and away the easiest and slickest. You are an absolute star! I'm even prepared to let the fact that your Australian go without mentioning the Ashes......doh!
Thats almost exactly what i need to do except im using text enstead of thomb pictures, im still trying to figure it out, i tryed useing a regular class a:link, and set a:hover to a absolute pos. background img, but the background img trys and acts like a links so the text link and the img start to flicker enless you move your mouse quikly to the picture that appears in hover
does the div a img gotta be a:img or a img? sorry i ask so many questions im really trying to understand this
cj1223, I'm having a little trouble comprehending your posts. Could you please upload what you have so far?
I forgot what i was having problems with earlier but now, for some reason fire fox(which i just updated yesterday) isnt reading my html code properly, for instance http://marketpost.net/practice.html all three items the left navigation box, the arrow, and the right navigation box are like 25 pixels from the top of the black table in Dream weaver but they line up good in my Fire Fox. and the arrow in DW is like 600 pixels from the left edge and in My FF browser it appears perfect, after the left navigation box, also the right navigation box isn't correct pixels, i made it to look good for fire fox but it looks messed up in DW, so it kinda sucks