Wordpress / PHP question

C

chrismitchell

Guest
I have a nice interesting question for all those who know PHP and or Wordpress :)

I am wanting to make the entire background be one image and I have some roll over options on my home page that I want to make the background change as I roll over them (if you get my drift).. anyone made anything like that before?
 
OnMouseover Javascript for it? but didnt do anything like that...but if i tried i used for sure two different images and used javascript...
 
javascript onMouseOver would be fine :) can you give me the code? :)
 
or css could be better :D

Add this css to your document...


CSS

#img {
width: 100px;
height: 100px;
background: URL("http://www.designforums.co.uk/avatars/designium.gif?dateline=1257442132");
}
#img:hover {
background: URL("http://www.designforums.co.uk/avatars/designium.gif?dateline=1257442132");
}



And this code in your
Body


<div id="img"></div>
 
that css one will definately do the trick :) cheers matey :D
 
Css wouldn't be able to change this you can only effect the element in question not parent elements. You would need JavaScript il have a look this am if I have time.
 
Hey Andy :) cheers for having a looksee too :) it seems to have half worked LOL :) I just need to force the CSS on a box and then it might work LOL :p
 
what are you trying to do exactly Chris, maybe I misunderstood??

I thought you wanted to on click or hover of a button change the background image of the body??
 
just use jquery to append a class to the body tag on mouse over of a link.

simple, and can be done in 3 lines of code :)
 
nice one Geoff :) do you happen to have those 3 lines of code that I can use? LOL
 
LOL Chris loving it.

Right try this I'll write it off the cuff so let me know if you get an error.
We'll use CSS and JS with the idea of just swoping out backgrounds, that way both, or multiple backgrounds are already loaded once the CSS sheet loads.

So JavaScript, and if you want it in DOM scripting let me know I'll write it as onpage JavaScript just to save time.

<a href="background.php?colour=blue" onclick="document.getElementsByTagName('body')[0].setAttribute('id','blue');return false" rel="nofollow">Blue design</a>

<a href="background.php?colour=blue" onclick="document.getElementsByTagName('body')[0].setAttribute('id','red');return false" rel="nofollow">Red design</a>

Then in the CSS

#blue{background:url.....}
#red{background:url.....}

But remember that for accessibility to create it manually so when JavaScript is not turned on load background.php and set the background that way, do you get me?
Otherwise you will have pointless links.

Let me know if you have problems with the above.

Jaz

Key:
Blue ~ XHTML
Green ~ CSS
 
Good on ya Jaz :D I'll give it a go now :D I'll be so chuffed if it works :D
 
That worked an absolute treat :D It just needed a bit of an edit (mainly putting the onMouseOver in and making it sit in a div :D but it works :D)

Thanks Jaz :D
 
Ok now that's sorted..

I have a 2nd question, now i've made the background change on the roll over, I now need to make it change to the background on the page that it changed if that makes sense?

eg: you rollover button 1 it shows background 1, then when you click button 1 to go to post 1, with the background 1 behind it.. i'm sure that its a regular expression, but my mind is blank :p

Cheers again :D
 
Mmm.....okay the way I would do it if you are using buttons is something like this ~

<form action="somepage.php" method="post">
<p>
<input type="hidden" name="colour" value="red" />
<button type="submit" onmouseover=.......></button>
</p>
</form>
<form action="somepage.php" method="post">
<p>
<input type="hidden" name="colour" value="blue" />
<button type="submit" onmouseover=.......></button>
</p>
</form>

Then test for the hidden POST variable on the next page and manually set the id of the body to which ever is set then,

IE:
if(isset($_POST['colour']) || isset($_COOKIE['colour'])){?>
<meta name="robots" content="noindex, follow">
</head>
<?php if(isset($_POST['colour'])){
$colour=$_POST['colour'];
setcookie("colour", $colour);
}else{
$colour=$_COOKIE['colour'];
}
if($colour=="red"){?>
<body id="red">
<?php
}elseif($colour=="blue"){?>
<body id="blue">
<?php }
}
else{?>
<body>
<?php }?>
Note that is written off the cuff and may contain errors.

Depending on how many you have you may want to convert that to a switch statement though TBH.

As above set a cookie to test on subsequent pages and place the meta noindex on the page if the variable is present to stop duplicate content.

Personally, not sure how your code is set up but I would change that to a link huge code reduction then.

Sometime soon I'll do a DOM scripting post and link to it, that way you can remove the onmouseover event by pure magic. :)

Hope it helps and let me know if it fixes it.
Jaz

Key
Blue ~ XHTML
Red ~ PHP
 
You must log in or register to reply here.
Back
Top