Clickable WP background - GoFuckYourself.com

Horny Joe · 08-22-2011, 02:18 AM

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 · 08-22-2011, 02:20 AM

Bump, I wanna know this too.

Tim · 08-22-2011, 02:25 AM

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 · 08-22-2011, 03:14 AM

Quote:

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 · 08-22-2011, 03:57 AM

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 · 08-22-2011, 03:59 AM

Quote:

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 · 08-22-2011, 04:09 AM

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 · 08-22-2011, 04:30 AM

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

fris · 08-22-2011, 06:42 AM

Quote:

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 · 08-22-2011, 08:56 AM

Google wont like that

potter · 08-22-2011, 09:08 AM

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

Code:

<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 · 08-22-2011, 01:06 PM

Quote:

Originally Posted by potter

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

Code:

<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 · 08-22-2011, 01:08 PM

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

V_RocKs · 08-22-2011, 04:32 PM

interesting stuff

potter · 08-22-2011, 04:56 PM

Quote:

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:

Code:

<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 · 08-22-2011, 04:58 PM

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 · 08-22-2011, 05:07 PM

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).

Code:

<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>

08-22-2011, 02:18 AM	#1
Horny Joe Confirmed User Industry Role: Join Date: Jul 2004 Location: Online Posts: 2,661	Clickable WP background 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 __________________ The Very Best Teen Content! Make $$$$ - Join DIESEL ACTION for Great Teen content

08-22-2011, 02:20 AM	#2
phasic Confirmed User Industry Role: Join Date: Jul 2005 Location: US Posts: 2,104	Bump, I wanna know this too. __________________ Brief revisit. (mic drop)

08-22-2011, 02:25 AM	#3
Tim AffiliateManager for Hire Industry Role: Join Date: Feb 2002 Location: UK Posts: 19,210	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. __________________ 🍑🍆 Sex Vitamins 🍑 𓂸 This sig for sale! Last edited by Tim; 08-22-2011 at 02:27 AM..

08-22-2011, 04:09 AM	#7
seeandsee Check SIG! Industry Role: Join Date: Mar 2006 Location: Europe (Skype: gojkoas) Posts: 50,945	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... __________________ BUY MY SIG - 50$/Year Contact here

08-22-2011, 04:30 AM	#8
Mutt Too lazy to set a custom title Industry Role: Join Date: Sep 2002 Posts: 34,431	couldn't you lay a transparent gif/png over the background image with z-index and make the transparent gif clickable? __________________ I moved my sites to Vacares Hosting. I've saved money, my hair is thicker, lost some weight too! Thanks Sly!

08-22-2011, 03:57 AM	#5
scouser marketer. Industry Role: Join Date: Aug 2006 Location: bcn Posts: 2,280	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

08-22-2011, 08:56 AM	#10
Bladewire StraightBro Industry Role: Join Date: Aug 2003 Location: Monarch Beach, CA USA Posts: 56,229	Google wont like that __________________ Skype: CallTomNow

08-22-2011, 01:08 PM	#13
candyflip Carpe Visio Industry Role: Join Date: Jul 2002 Location: New York Posts: 43,064	The big gossip blogs that run on Wordpress all manage to do this. __________________ Spend you some brain. Email Me

08-22-2011, 04:32 PM	#14
V_RocKs Damn Right I Kiss Ass! Industry Role: Join Date: Dec 2003 Location: Cowtown, USA Posts: 32,422	interesting stuff

08-22-2011, 04:58 PM	#16
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	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). __________________