klikbaar image met variabele tekst. [SOLVED]

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Sietsko Bos

Sietsko Bos

15/01/2017 10:00:12
Quote Anchor link
Hoi, 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?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>';



Aangepaste code geplaatst als iemand dit ook wil gebruiken.
Gewijzigd op 15/01/2017 12:27:08 door Sietsko Bos
 
PHP hulp

PHP hulp

18/12/2024 19:04:37
 
Frank Nietbelangrijk

Frank Nietbelangrijk

15/01/2017 12:48:01
Quote Anchor link
Je zou denk ik de image relative moeten maken en de text absolute
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.