GoFuckYourself.com - Adult Webmaster Forum

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - Clickable WP background (https://gfy.com/showthread.php?t=1035090)

Horny Joe

08-22-2011 02:18 AM

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

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 (Post 18371278)

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 (Post 18371360)

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! :thumbsup

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 (Post 18371268)

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 (Post 18371854)

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 (Post 18372510)

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>

All times are GMT -7. The time now is 08:57 PM.