Web Design Forums

Limbo · 21-07-2006, 05:08

Can this be done with pure CSS?

Snippet:
<div id="moo">
<ul>
<li><a href="#">image-01</a></li>
<li><a href="#">image-02</a></li>
<li><a href="#">image-03</a></li>
</ul>
</div>

So when I click the link the background image of ID moo changes image...

Ta, Limbo

Limbo · 21-07-2006, 10:30

weldo · 21-07-2006, 10:35

pass.

MikeMackay · 21-07-2006, 10:37

Not sure about a pure CSS solution but I know this can be achieved using DOM Scripting...

- Mike

Limbo · 21-07-2006, 10:56

Quote:

Originally Posted by MikeMackay

Not sure about a pure CSS solution but I know this can be achieved using DOM Scripting...

- Mike

Cheers fellas.

Mike - Care to elaborate a little - or maybe a link?

pgo · 21-07-2006, 11:01

Perhaps you could do something similar to: http://www.alistapart.com/articles/imagegallery/

Sorry, I'm a JS retard.

Limbo · 21-07-2006, 11:06

Nope - that wont do it

have loads of scripts like that

This one HAS to change the background property - the div contains text so dont want to have to play with additional floats & divs as well - just one lot of padding.

It's an odd one - not much out there about it.

Limbo · 21-07-2006, 11:42

So I've got this far using sliding doors - seems to work in IE & FF:

<html>
<head>
<style type='text/css'>

.div {width:300px;height:300px;background:#eee;}
.div a:link, .div a:visited, .div a:active {
background:url(images/test/test-rollover-2.gif);
width:300px;height:300px;
display:block;
}
.div a:hover {
background:url(images/test/test-rollover-1.gif);
width:300px;height:300px;
display:block;
}
</style>
</head>
<body>
<div class="div"><a href="#">rollover</a></div>

</body>
</html>

But I want to trigger the rollover when I hover the link - not the div...

Any suggestions would be hugely appreiciated - need to get this sown up tonight.

Cheers, Limbo

cam · 21-07-2006, 12:21

aye, you're changing the bg on the anchor though. your original block of markup (anchors *inside* a div element changing the background of the div) can only be done with JS as you can't write the CSS rule to catch the hover (as the background element contains the anchors).

far too late in the day to be asking this kinda thing to be honest. sorry chief, pub is calling

MikeMackay · 21-07-2006, 12:43

Here you go. A fully working XHTML Strict background image swapper thingy...this will degrade gracefully if the user doesn't have JavaScript enabled, and also tests for browser object/method compatibility.

I should also point out that if you change the ID of the div in the html page, then you'll also need to change the targetDiv name in the JavaScript on the line that reads:

var targetDiv = document.getElementById("moo");

Hope that helps !!

- Mike

Limbo · 21-07-2006, 13:48

HI Mike

that's bloody great that cheers - Will have a look now.

Ta

Limbo

MikeMackay · 21-07-2006, 14:34

Quote:

Originally Posted by Limbo

HI Mike

that's bloody great that cheers - Will have a look now.

Ta

Limbo

No worries, it didn't take me long to write. If you need anything changing, or if it's not working for you, then let me know and I'll try and see what's wrong.

By the way, in your original post you wanted the background image to change when the link is clicked, then in a later post you said you want it triggered when the link is hovered over. I have set it to work on the click of the link, if you want it to work on the hover instead then let me know.

- Mike

Limbo · 21-07-2006, 16:19

Quote:

Originally Posted by MikeMackay

No worries, it didn't take me long to write. If you need anything changing, or if it's not working for you, then let me know and I'll try and see what's wrong.

By the way, in your original post you wanted the background image to change when the link is clicked, then in a later post you said you want it triggered when the link is hovered over. I have set it to work on the click of the link, if you want it to work on the hover instead then let me know.

- Mike

Cheers Mike

Works perfect in a browser with mozilla core (netscape, firefox, flock...)

But falls over in IE and there's a 1 click delay in opera (background displays white)

Typical of IE to make things more difficult than neccessary.

cam · 21-07-2006, 22:57

aye mike, you're shite!

MikeMackay · 22-07-2006, 06:22

Quote:

Originally Posted by Limbo

But falls over in IE and there's a 1 click delay in opera (background displays white)

I just tried it in my version of IE (6.02) and it worked fine, all images changed successfully.

I'm not too sure about the Opera thing though, I'll have a look in to that.

- Mike

Limbo · 22-07-2006, 08:00

Hi mike, You're right,

My version of IE is the same but I get this annoying message (which I must of closed without allowing)...

Can anything be done to block that?

MikeMackay · 22-07-2006, 08:37

Quote:

Originally Posted by Limbo

Hi mike, You're right,

My version of IE is the same but I get this annoying message (which I must of closed without allowing)...

Can anything be done to block that?

I get that message when I'm running/testing the script locally on my PC through IE because it runs it under the security settings for the "Local Computer" zone which is more strict than the settings for the "Internet zone", hence you get the warning. When I try it online I don't get the message. So it's all down to the Security Level settings inside IE. Further reading on the issue can be found here:

http://www.phdcc.com/xpsp2.htm

With regards to the white background issue, I believe this could be due to loading the image when it's been clicked on. There will be a slight delay while the image is loaded frome the site in to the browser which is triggering the temporary white background issue. After the first time it's been loaded it should show from the cache and change immediately. One option to combat this would be to have the JavaScript pre-load the images in to the browser.

- Mike

Limbo · 22-07-2006, 09:00

Your hired!

Send me a stickymail if you like to earn a few quid from time to time.

Cheers for you help with this. Limbo.

Limbo · 22-07-2006, 09:25

Hi Mike - Last quesiton. There is more than one div that I'd like to have this action work on. The page looks a little like this:

Code:

<div id="moo">
<ul>
<li><a href="#">image-01</a></li>
<li><a href="#">image-02</a></li>
<li><a href="#">image-03</a></li>
</ul>
</div><div id="baa">
<ul>
<li><a href="#">image-04</a></li>
<li><a href="#">image-05</a></li>
<li><a href="#">image-06</a></li>
</ul>

So If I want each link to display different images can I write it in the JS?

The alternative is to have the page work like this:

Code:

<div id="moo"></div>
<ul>
<li><a href="#">image-01</a></li>
<li><a href="#">image-02</a></li>
<li><a href="#">image-03</a></li>
</ul> 
<div id="baa"></div>
<ul>
<li><a href="#">image-04</a></li>
<li><a href="#">image-05</a></li>
<li><a href="#">image-06</a></li>
</ul>

- if it is easier to have the links outside the div?

MikeMackay · 22-07-2006, 11:06

Ok, I've rewritten the code using an array to allow for an unlimited amount of divs that you would like to change the background image with. You'll need to manually add (and change) the div names in the JavaScript code so that it knows which to pick out and prepare:

var contentDivs = Array("moo","baa");

The way it's been written is to keep the <a href> tags inside the div as in your original example. The JavaScript will traverse the node tree to target the necessary div for the image swapping:

<div id="moo">
<ul>
<li><a href="redBg.gif">Red</a></li>
<li><a href="yellowBg.gif">Yellow</a></li>
<li><a href="blueBg.gif">Blue</a></li>
</ul>
</div>

I've tested it out in FF & IE and all seems to work ok. Let me know if you have any issues with it.

- Mike

21-07-2006, 05:08	#1 (permalink)
Limbo Baskin' Join Date: Feb 2005 Posts: 5,619	Changing background image of a container using multiple links Can this be done with pure CSS? Snippet: <div id="moo"> <ul> <li><a href="#">image-01</a></li> <li><a href="#">image-02</a></li> <li><a href="#">image-03</a></li> </ul> </div> So when I click the link the background image of ID moo changes image... Ta, Limbo

21-07-2006, 10:30	#2 (permalink)
Limbo Baskin' Join Date: Feb 2005 Posts: 5,619	bump

21-07-2006, 10:35	#3 (permalink)
weldo now with added beard Join Date: Mar 2004 Location: Liverpool Posts: 5,432	pass. __________________ fuck signatures

21-07-2006, 12:21	#9 (permalink)
cam vague™ Join Date: Mar 2004 Location: Glasgow Posts: 5,512	aye, you're changing the bg on the anchor though. your original block of markup (anchors inside a div element changing the background of the div) can only be done with JS as you can't write the CSS rule to catch the hover (as the background element contains the anchors). far too late in the day to be asking this kinda thing to be honest. sorry chief, pub is calling __________________ The Blog™ \| Twitter \| LinkedIn

21-07-2006, 22:57	#14 (permalink)
cam vague™ Join Date: Mar 2004 Location: Glasgow Posts: 5,512	aye mike, you're shite! __________________ The Blog™ \| Twitter \| LinkedIn

21-07-2006, 10:37	#4 (permalink)
MikeMackay Everything is fine. Join Date: Feb 2005 Location: Witham & London Posts: 828	Not sure about a pure CSS solution but I know this can be achieved using DOM Scripting... - Mike

21-07-2006, 11:01	#6 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	Perhaps you could do something similar to: http://www.alistapart.com/articles/imagegallery/ Sorry, I'm a JS retard.

21-07-2006, 11:06	#7 (permalink)
Limbo Baskin' Join Date: Feb 2005 Posts: 5,619	Nope - that wont do it have loads of scripts like that This one HAS to change the background property - the div contains text so dont want to have to play with additional floats & divs as well - just one lot of padding. It's an odd one - not much out there about it.

21-07-2006, 11:42	#8 (permalink)
Limbo Baskin' Join Date: Feb 2005 Posts: 5,619	So I've got this far using sliding doors - seems to work in IE & FF: <html> <head> <style type='text/css'> .div {width:300px;height:300px;background:#eee;} .div a:link, .div a:visited, .div a:active { background:url(images/test/test-rollover-2.gif); width:300px;height:300px; display:block; } .div a:hover { background:url(images/test/test-rollover-1.gif); width:300px;height:300px; display:block; } </style> </head> <body> <div class="div"><a href="#">rollover</a></div> </body> </html> But I want to trigger the rollover when I hover the link - not the div... Any suggestions would be hugely appreiciated - need to get this sown up tonight. Cheers, Limbo

21-07-2006, 13:48	#11 (permalink)
Limbo Baskin' Join Date: Feb 2005 Posts: 5,619	HI Mike that's bloody great that cheers - Will have a look now. Ta Limbo

22-07-2006, 08:00	#16 (permalink)
Limbo Baskin' Join Date: Feb 2005 Posts: 5,619	Hi mike, You're right, My version of IE is the same but I get this annoying message (which I must of closed without allowing)... Can anything be done to block that? Attached Thumbnails

22-07-2006, 09:00	#18 (permalink)
Limbo Baskin' Join Date: Feb 2005 Posts: 5,619	Your hired! Send me a stickymail if you like to earn a few quid from time to time. Cheers for you help with this. Limbo.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search