19 replies [Last post]
imageswappin
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2005-12-08
Posts: 9
Points: 0

Is it possible to set up a disjointed image swap with CSS? In this example I've used good old Javascript, but would like to get rid of the script. Anyone know of a way to accomplish this with CSS?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Disjoint image swap with CSS?

Sort of, take a look at the photo gallery demonstrations of Stu Nichols --- http://www.cssplay.co.uk/menu/scroll_gallery.html

That one will change persistantly on click and temporarily on hover. There are others listed on his demostrations page that behave differently.

mike lane
mike lane's picture
Offline
Regular
Tacoma, WA
Last seen: 13 years 45 weeks ago
Tacoma, WA
Timezone: GMT-8
Joined: 2005-12-06
Posts: 50
Points: 0

Disjoint image swap with CSS?

This was just posted in the forums today I think. You can modify the method that is used on http://www.meyerweb.com/eric/css/edge/popups/demo.html to do what you want.

http//photos.mikelanestudios.com/
http//blog.mikelanestudios.com/

Anonymous
Anonymous's picture
Guru

Disjoint image swap with CSS?

mike lane wrote:
This was just posted in the forums today I think. You can modify the method that is used on http://www.meyerweb.com/eric/css/edge/popups/demo.html to do what you want.
Yep, I was just going to post that. Smile

(Plus it uses absolute positioning, mike! Laughing out loud)

Wink

mike lane
mike lane's picture
Offline
Regular
Tacoma, WA
Last seen: 13 years 45 weeks ago
Tacoma, WA
Timezone: GMT-8
Joined: 2005-12-06
Posts: 50
Points: 0

Disjoint image swap with CSS?

Triumph wrote:
Yep, I was just going to post that. Smile

(Plus it uses absolute positioning, mike! Laughing out loud)

Wink

:roll:

http//photos.mikelanestudios.com/
http//blog.mikelanestudios.com/

imageswappin
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2005-12-08
Posts: 9
Points: 0

Disjoint image swap with CSS?

Thanks for the suggestions. That last option looks fairly easy to implement, but I'm concerned about IE5.x support. Anyone know of any similar approaches with relatively good browser rendering?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Disjoint image swap with CSS?

imageswappin wrote:
Thanks for the suggestions. That last option looks fairly easy to implement, but I'm concerned about IE5.x support. Anyone know of any similar approaches with relatively good browser rendering?

If you're talking about the Eric Meyer example, just checked it out in IE5.01 and 5.5 and looks fine to me.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

imageswappin
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2005-12-08
Posts: 9
Points: 0

Disjoint image swap with CSS?

Thanks Tyssen, good to know.
By the way, where does one find older browsers for download? If I wanted to install a couple of IE5.x's, for example, where can I grab installers?

Thanks again...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Disjoint image swap with CSS?

You don't install older versions of IE as such. Download the packages from Evolt and then check out PIE for an explanation of how to set them up properly.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

imageswappin
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2005-12-08
Posts: 9
Points: 0

Disjoint image swap with CSS?

Thanks again Tyssen, I'll get into those browser installations tomorrow. For the moment, here's how things are going on the swap-front.

I've managed to implement the Eric Meyer model, with a few tweaks seeing as Mike used text links to call up the image swap. This meant that where he used

div#links a img

I couldn't because I was using an image to call up the other image. So, instead I gave the "hidden" swap images an ID of "#hide". This seems to be working fine in Firefox1.5, but no go in IE6, see here. (I've stuffed the CSS into the HTML file, so please take a look and let me know if you have any ideas about what IE is hung up on.)

Beyond that, there are 2 other flies in the ointment.

In my original example, on mouse-over the swap-image (the large one) stuck around when the mouse moved off the link. Mousing-over one of the other links would then call up the next appropriate swap-image, which would likewise stick around on mouse-out until another link was moused-over. This doesn't work with Mike's rules.

Also, my plan for this arrangement is to plunk it into pages in the midst of (relatively) sized content (text), which means the <div> will move relative to the content above/below it. This means absolute positioning won't do the job. Anyone have any idea how to implement this function with relative positioning?

I know, I know; my first post here and I'm asking a lot.

Any help is greatly appreciated...

Anonymous
Anonymous's picture
Guru

Disjoint image swap with CSS?

mike lane wrote:
:roll:
What? Laughing out loud

imageswappin
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2005-12-08
Posts: 9
Points: 0

Disjoint image swap with CSS?

Sorry if that wasn't clear. Essentially I want to remove the "image restore" behaviour, so that if you mouse-over thumbnail B the large version of B stays visible even after mouse-out.

I also want to position these elements as a unit relatively, so that if the text before this unit is made larger, the unit is able to move down the page. This isn't possible with absolute positioning.

Hope that's a little more clear.

Anyone able to figure out why the example isn't working in IE?

imageswappin
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2005-12-08
Posts: 9
Points: 0

Disjoint image swap with CSS?

I've sort of managed to set things up using (negative) relative positioning and the pop-ups are showing up in the correct position (only in Firefox1.5), but now there are two new bugs:

1
Thumbnails to-the-right disappear on mouse-over. Take a look (remember, Firefox only, IE still isn't liking this).

2
A scroll-bar appears and disappears when mousing-over the thumbs.

Any ideas?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Disjoint image swap with CSS?

Couple of problems you need to sort out before addressing the problem: you can't reuse #hide, you'll need to make it a class instead. Also, your CSS should be like this:

a#hide {
	width: 0;
	height: 0;
	border: 0;
	position: relative;
	top: 0;
	left: 0;
}
a#hide:hover {
	width: 400px;
	height: 400px;
	border: 0;
	position: relative;
	top: -473px;
	left: 1px;
}

Notice the lack of space between # and the ID name and the relocation of :hover. But as I said, it should probably be a.hide instead.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

imageswappin
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2005-12-08
Posts: 9
Points: 0

Disjoint image swap with CSS?

Hi again Tyssen,

I'd forgotten that one is not supposed to reuse IDs, although this doesn't seem to be causing the problem. I say this because I set "hide" up as a class exactly as you suggested and the function broken down completely (that is, nothing was "hidden"). I'm going to keep tinkering, but I'm beginning to think I'm stuck with Javascript for this.

I'm also going to go back and grab the code from Mike's sample, then make a working model with text links, and then replace the text with images.

Thanks for the input so far...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Disjoint image swap with CSS?

imageswappin wrote:
I'm also going to go back and grab the code from Mike's sample, then make a working model with text links, and then replace the text with images.

Don't know if you saw at the bottom of that page that he's done a demo using images too: http://www.meyerweb.com/eric/css/edge/popups/demo2.html

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

imageswappin
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2005-12-08
Posts: 9
Points: 0

Disjoint image swap with CSS?

He has an example using text-links to swap-in images, but not using image-links to swap-in other images, thus his CSS won't work for my dilemma because his rule would hide my thumbnails as well as the larger swap images.

imageswappin
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2005-12-08
Posts: 9
Points: 0

Disjoint image swap with CSS?

If anyone is still interested, I've managed to get this idea working, sort of. Here's the latest version.

This iteration is not only functional (that is, the image thumbnails are indeed triggering larger swap versions) both in FF1.5 and IE6 for PC (I haven't had a chance to test IE5.x and Mac yet), but it's also positionable; that is, it can be placed in the midst of other content that may "move" if resized by the user, and the absolute positioned swap images (the large ones) will show up where you want them to.

Keep in mind that I wanted the first of these 5 (large) images (the blue one) to remain visible at all times.

Here are my ongoing issues:

1
I need some method of producing a "real" null-link, so that I don't need to play with anchor links if/when the user clicks on one of the thumbnails that go nowhere. Even with an anchor link carefully positioned, you can never know for sure where the viewer's page is sitting, and thus there will always be a slight "shift" in the page if/when they click the null-link thumbnails.

2
I still want to figure out a way to have the swap images (the large ones) stay visible on mouse-out. That is, if you mouse-over thumbnail 3, I want large image 3 to stay visible until/unless you mouse-over one of the other thumbnails. At the moment, the swap image (the large one) disappears when you move away from the corresponding thumbnail.

After much tinkering I got this working by taking Mike's code and slowly adjusting it. One strange thing, if you look at the CSS for my sample, this bit of code seems to serve no purpose:

div#links a:hover { background: #fff; }

but without it, nothing seems to work.

Anyway, much progress has been made. It ain't perfect yet, but I now have an image-swap set-up that can be positioned in the midst of other content without using any Javascript.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Disjoint image swap with CSS?

imageswappin wrote:
One strange thing, if you look at the CSS for my sample, this bit of code seems to serve no purpose:

div#links a:hover { background: #fff; } but without it, nothing seems to work. I just discovered that today as well while trying to figure out a problem for someone else who was using the same method. Laughing out loud (By the way, I think his name's Eric. Wink )

Dunno if you'll have much luck getting the rollovers to stick using just CSS though.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Disjoint image swap with CSS?

Did you look at Stu Nicholls code (the link I posted way back). That photo gallery maintains the image onclick. There is another demonstration on his site that can maintain the image when its switched on hover, at least on parts of the page.

I don't know how Stu achieved his results (too lazy to go look just now Smile), but if you wrap the swap image in a container large enough to surround it and the thumbnails and you control the stack order so that you get

- (highest)
- unselected thumbnails
- selected swap image container
- selected thumbnail
- (lowest)

you can maintain the thumbnail hover by changing it into a hover of the swap image container. See this example. Right now it doesn't work in IE. Thats due to IE having a slightly oddball stack ordering. I guess you could fix it with appropriate hacks. I also set up a :focus style so the change would be more persistent if you clicked on a thumbnail. That's wonky as it stops hover working on thumbnails to the left of the selected thumbnail.

In the end, CSS isn't designed for persistent changes to a page. That's behaviours and javascript. What we're trying to achieve here by trick use of CSS is a doddle in javascript. Those that turn of javascript should understand they are losing much of the interactive nature of pages.