Clickable WP background

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Horny Joe
    Confirmed User
    • Jul 2004
    • 2661

    #1

    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
  • phasic
    Confirmed User
    • Jul 2005
    • 2104

    #2
    Bump, I wanna know this too.
    Brief revisit. (mic drop)

    Comment

    • Tim
      AffiliateManager for Hire
      • Feb 2002
      • 19210

      #3
      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.
      Last edited by Tim; 08-22-2011, 01:27 AM.
      🍑🍆 Sex Vitamins
      🍑 𓂸
      This sig for sale!

      Comment

      • Horny Joe
        Confirmed User
        • Jul 2004
        • 2661

        #4
        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
        The Very Best Teen Content! Make $$$$ - Join DIESEL ACTION for Great Teen content

        Comment

        • scouser
          marketer.
          • Aug 2006
          • 2280

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

          Comment

          • Horny Joe
            Confirmed User
            • Jul 2004
            • 2661

            #6
            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!
            The Very Best Teen Content! Make $$$$ - Join DIESEL ACTION for Great Teen content

            Comment

            • seeandsee
              Check SIG!
              • Mar 2006
              • 50945

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

              Comment

              • Mutt
                Too lazy to set a custom title
                • Sep 2002
                • 34431

                #8
                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!

                Comment

                • fris
                  Too lazy to set a custom title
                  • Aug 2002
                  • 55679

                  #9
                  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.
                  Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence.

                  Comment

                  • Bladewire
                    StraightBro
                    • Aug 2003
                    • 56228

                    #10
                    Google wont like that


                    Skype: CallTomNow

                    Comment

                    • potter
                      Confirmed User
                      • Dec 2004
                      • 6559

                      #11
                      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.

                      Comment

                      • Horny Joe
                        Confirmed User
                        • Jul 2004
                        • 2661

                        #12
                        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!
                        The Very Best Teen Content! Make $$$$ - Join DIESEL ACTION for Great Teen content

                        Comment

                        • candyflip
                          Carpe Visio
                          • Jul 2002
                          • 43069

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

                          Spend you some brain.
                          Email Me

                          Comment

                          • V_RocKs
                            Damn Right I Kiss Ass!
                            • Nov 2003
                            • 32449

                            #14
                            interesting stuff

                            Comment

                            • potter
                              Confirmed User
                              • Dec 2004
                              • 6559

                              #15
                              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.

                              Comment

                              • potter
                                Confirmed User
                                • Dec 2004
                                • 6559

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

                                Comment

                                • potter
                                  Confirmed User
                                  • Dec 2004
                                  • 6559

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

                                  Comment

                                  Working...