/    Sign up×
Community /Pin to ProfileBookmark

Buttons with dynamic content / mouseover/selected effect / interpretation

Hey guys,

i hope u can help me with html / js / php.
i dunno if the php section is the right one, so feel free to move it to the js section ?

what i want to do:
2 buttons with mouseover/selected effect. every button got dynamic content out of a db.
if u select one button, the site should check, if it was the right decision and it should change the the button to red or green. after a second click, it should start from the beginning (load new content and so on..)

what is working right now ? :
– loading the dynamic content out of the db.
– mouseover effect for the buttons

well i could make a <form> for the buttons, to test if the right one was clicked, but this i kinda crappy and after assimilating the form i have to go back to my button site (to show a red or green button), which normally only load dynamic content.

so i thought easiest way is to check with js if the right one was clicked, and change in fact of the result, the button image. so i ony need js to check the php variables and change the button color/image.
problem is, i have no clue how to use js. hope u can help. i will appent some code for the buttons.

greets

my buttons, actually only a table with background images (check css)

[code=html]<table>
<tr>
<td id=”que” colspan=”2″>
<?php echo $question; ?>
</td>
</tr>
<tr>
<td id=”ans”>
<?php echo $ans1; ?>
</td>
<td id=”ans”>
<?php echo $ans2; ?>
</td>
</tr>
</table>
[/code]

[CODE]table {
margin-left: auto;
margin-right: auto;
vertical-align: middle;
text-align: center;
}

#ans {
display:block;
background-image:url(‘../img/ans.png’);
width:518px; height:71px;
}

#ans:hover {
background-image:url(‘../img/ans_hover.png’);
}

#que {
display:block;
background-image:url(‘../img/ques.png’);
width:1044px; height:153px;
margin-left: auto;
margin-right: auto;
}[/CODE]

my php files, which loads the content (shouldn’t be interestung)

[code=php]<?php
include ‘dbpointer.php’;
mysql_select_db($Database, $DatabasePointer);

$sql = “SELECT * FROM bla ORDER BY rand() LIMIT 1”;
$qe = mysql_query($sql);
$row = mysql_fetch_object($qe);

$qestion = $row->question;
$ans1 = $row->ans1;
$ans2 = $row->ans2;
?>[/code]

to post a comment
PHP

1 Comments(s)

Copy linkTweet thisAlerts:
@speghettiCodeJan 11.2013 — I think you could use PHP to dynamically insert the JS code you need.

Here's what I would do...

[code=html]
<table>
<tr>
<td id="que" colspan="2">
<?php echo $question; ?>
</td>
</tr>
<tr>
<td id="ans" <?php echo ($ans1_correct?" onclick="this.style.backgroundColor='#0f0';":""); ?>>
<?php echo $ans1; ?>
</td>
<td id="ans" <?php echo ($ans2_correct?" onclick="this.style.backgroundColor='#0f0';":""); ?>>
<?php echo $ans2; ?>
</td>
</tr>
</table>
[/code]
×

Success!

Help @Servrox spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...