klikbaar image met variabele tekst. [SOLVED]
Sietsko Bos
15/01/2017 10:00:12Hoi, wie kan me helpen:
Ik heb een image nodig met een tekst (daar het om 1400 images gaat, beetje veel om dat handmatig te doen).
Ik dacht aan een div met daarin de tekst en dan nog een div met daarin een transparante image.
Ik heb dit nodig om 2 woorden te kunnen selecteren (die bij elkaar horen) uit een rij van 3 of 5 woorden.
Daarna klik je op een verzendknop.
Voor het selecteren van de 2 images gebruik ik jquery.
Even een voorbeeld:
de woorden: bal, kast, stal, wind, sneeuw
Deze woorden moeten dus een image button worden (img) die ik dan als checkbox kan selecteren / deselecteren.
In het voorbeeld zouje dan bal en stal moeten selecteren.
Hopelijk is het zo duidelijk.
Sietsko
UPDATE:
IK heb nu dit maar dan staat de text niet bovenop het image?
Aangepaste code geplaatst als iemand dit ook wil gebruiken.
Ik heb een image nodig met een tekst (daar het om 1400 images gaat, beetje veel om dat handmatig te doen).
Ik dacht aan een div met daarin de tekst en dan nog een div met daarin een transparante image.
Ik heb dit nodig om 2 woorden te kunnen selecteren (die bij elkaar horen) uit een rij van 3 of 5 woorden.
Daarna klik je op een verzendknop.
Voor het selecteren van de 2 images gebruik ik jquery.
Even een voorbeeld:
de woorden: bal, kast, stal, wind, sneeuw
Deze woorden moeten dus een image button worden (img) die ik dan als checkbox kan selecteren / deselecteren.
In het voorbeeld zouje dan bal en stal moeten selecteren.
Hopelijk is het zo duidelijk.
Sietsko
UPDATE:
IK heb nu dit maar dan staat de text niet bovenop het image?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.button_container {
position:relative;
width: 120px;
height: 3px;
}
.button_image {
position:absolute;
left:0;
top:0;
}
.button_text {
font-size:24px;
text-align: center;
}
echo '<div class="button_container">';
echo '<img class="button_image" src="img/allegroepen/trans_button.png" height="30"/>';
echo '<input type="checkbox" name="antwoord_user[]" value="'.$antwoorden['image'].'" style="display:none"/></div>';
echo '<div class="button_text">'.$antwoorden['image'].'</div>';
echo '</div>';
position:relative;
width: 120px;
height: 3px;
}
.button_image {
position:absolute;
left:0;
top:0;
}
.button_text {
font-size:24px;
text-align: center;
}
echo '<div class="button_container">';
echo '<img class="button_image" src="img/allegroepen/trans_button.png" height="30"/>';
echo '<input type="checkbox" name="antwoord_user[]" value="'.$antwoorden['image'].'" style="display:none"/></div>';
echo '<div class="button_text">'.$antwoorden['image'].'</div>';
echo '</div>';
Aangepaste code geplaatst als iemand dit ook wil gebruiken.
Gewijzigd op 15/01/2017 12:27:08 door Sietsko Bos