Clickable WP background

[Horny Joe]

fris or any WP gurus, is it possible to have a clickable WP background?

What would be great was a "background rotator"-plugin, but I guess that is too much to ask

[phasic]

Bump, I wanna know this too.

[Tim]

Not sure if this is exactly what you want but with this one you/your visitors can change the background:

http://www.neoease.com/themes/ and check Elegant Box.

[Horny Joe]

Originally Posted by Tim

Not sure if this is exactly what you want but with this one you/your visitors can change the background:

http://www.neoease.com/themes/ and check Elegant Box.

No, not like this (nice theme, though). I want to use all space on the page and instead of just a background photo/color, I want to have a full page banner that the surfers can click on

[scouser]

if its a <div> with a background-image set you could always just add a onclick='document.location.href = "http://google.com"'. though that would interfererz with any <a>'s etc within that div

[Horny Joe]

Originally Posted by deadmoon

if its a <div> with a background-image set you could always just add a onclick='document.location.href = "http://google.com"'. though that would interfererz with any <a>'s etc within that div

I will test this... THanks!

[seeandsee]

lots of flash games use that to cover empty space on left and right because most of them have their pages centered, maybe check their csourcescode...

[Mutt]

couldn't you lay a transparent gif/png over the background image with z-index and make the transparent gif clickable?

[fris]

Originally Posted by Horny Joe

fris or any WP gurus, is it possible to have a clickable WP background?

What would be great was a "background rotator"-plugin, but I guess that is too much to ask

yes its possible ;)

not really a wp issue though, more of a design issue.

[Bladewire]

Google wont like that

[potter]

Uhg, this really is bad bad UI design and it goes against the past 15 years of user experience but:

<style type="text/css">
.background-switch{
position:absolute;
top:0;
left:0;
z-index:3;
width:100%;
height:100%;
}
.wrapper{
position:absolute;
top:0;
left:50%;
z-index:6;
margin-left:-480px;
width:960px;
}
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('.background-switch').click(function() {
  //background script here
});
</script>

<div class="background-switch"></div>
<div class="wrapper">rest of website goes here</div>

I see some issues that could arise from it, but it's the best starting point to accomplish this.

[Horny Joe]

Originally Posted by potter

Uhg, this really is bad bad UI design and it goes against the past 15 years of user experience but:

<style type="text/css">
.background-switch{
position:absolute;
top:0;
left:0;
z-index:3;
width:100%;
height:100%;
}
.wrapper{
position:absolute;
top:0;
left:50%;
z-index:6;
margin-left:-480px;
width:960px;
}
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('.background-switch').click(function() {
  //background script here
});
</script>

<div class="background-switch"></div>
<div class="wrapper">rest of website goes here</div>

I see some issues that could arise from it, but it's the best starting point to accomplish this.

Great! THanks! Will play around with this and see how it turns out! Got a new 6 blog network that I want to try it on. Not any traffic there yet, so I have some time to get it right

Thank you again!

[candyflip]

The big gossip blogs that run on Wordpress all manage to do this.

[V_RocKs]

interesting stuff

[potter]

Originally Posted by candyflip

The big gossip blogs that run on Wordpress all manage to do this.

I already posted how to do it.

Here's the jquery if he doesn't have it:

<script type="text/javascript">
var images = ['foo.jpg', 'bar.jpg', 'image.jpg'];

function setImage() {
   return images[Math.floor(Math.random() * images.length)];
}

$('.background-switch').click(function() {
  $(this).css('background-image':setImage());
});
</script>

^ I literally just wrote that out without testing, but in theory it should work just fine. Basically, each time you click on the background-switch div, it'll switch the background image css to a random one selected from the images variable.

[potter]

And if you wanted to change the background image of the body, it'd be even easier (even though the code above is simple as pie already).

[potter]

figured i'd test it to make sure it works, it does (i did background-color instead of background-image though since i'm not going to make a bunch of test images for the sake of making sure it works).

<html>
<head>
<style type="text/css">
.background-switch{
position:absolute;
top:0;
left:0;
z-index:3;
width:100%;
height:100%;
background-color:cyan;
}
.wrapper{
position:absolute;
top:0;
left:50%;
z-index:6;
margin-left:-480px;
width:960px;
background-color:magenta;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var images = ['red', 'black', 'yellow'];

function setImage() {
   return images[Math.floor(Math.random() * images.length)];
}

$(document).ready(function() {
	$('.background-switch').click(function() {
	  $(this).css("background-color",setImage());
	});
});
</script>
</head>
<body>
<div class="background-switch"></div>
<div class="wrapper">rest of website goes here</div>
</body>
</html>