mouseover tekst -> foto
Ik ben mijn website weer eens wat aan het uitbreiden, en had het idee om foto's aan namen te hangen.
Nu vraag ik me af het mogelijk is om een bijvoorbeeld een <span> oid (of moet dit altijd een <a href> zijn?), om de naam heen te plaatsen en deze dan bij mouseover een bepaalde foto of tekst te laten weergeven.
Is dit mogelijk?
Zoja, kan iemand mij ergens een voorbeeld hiervan geven of misschien een beetje op weg helpen?
Het gaat vooral om namen waar ik eigenlijk een klein 'popupje' bij wil weergeven...
Nu haal ik deze namen met id op uit een database, en dacht ik zelf om te kijken of het bestand id.jpg bestaat in een foto map en dan deze dus te tonen. Maar hoe kan ik dit nu verwezenlijken met js?
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?
if ( file_exists('avatar/'. $id. '.jpg') {
echo '<span id="'. $id. '">Jan Test</span>'; //hier zou dan de mouseover bij moeten?
}
else {
echo 'Jan Test';
}
?>
if ( file_exists('avatar/'. $id. '.jpg') {
echo '<span id="'. $id. '">Jan Test</span>'; //hier zou dan de mouseover bij moeten?
}
else {
echo 'Jan Test';
}
?>
Zou zoiets dan moeten kunnen?
Nu probeer ik via een ajax call een bepaalde foto te laden, maar hier kom ik helaas nog niet uit.
Dit is wat ik heb:
Code (php)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
$('.tooltip').tooltipster({
content: 'Loading...',
position: 'right',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'POST',
url: 'tooltip.php',
id: $(this).data('id'), //hier probeer ik het data-id mee te sturen
success: function(data) {
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
}
});
</script>
$('.tooltip').tooltipster({
content: 'Loading...',
position: 'right',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'POST',
url: 'tooltip.php',
id: $(this).data('id'), //hier probeer ik het data-id mee te sturen
success: function(data) {
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
}
});
</script>
Verder weet ik niet wat ik precies in mijn tooltip.php moet zetten om de POST af te handelen. (Kan dit gewoon met php?)
Iemand die mij kan helpen?
D B op 09/09/2014 20:01:40:
Verder weet ik niet wat ik precies in mijn tooltip.php moet zetten om de POST af te handelen. (Kan dit gewoon met php?)
Dat laatste kun je natuurlijk gewoon zelf testen ;-)
Waarom wil je bij de mouse-over pas een foto ophalen?
D B op 11/09/2014 23:02:41:
Ik had al wel geprobeerd, maar zonder resultaat.
Geef dan even aan wat je hebt geprobeerd en wat het resultaat is/waar je vast loopt.
D B op 11/09/2014 23:02:41:
Uiteindelijk zou ik via die mouseover met het id, heel veel uit de database kunnen halen...
Je geeft aan dat je bij de mouseover een foto wilt tonen. Nu geef je aan dat je heel veel kunt ophalen uit de database. Wat is je bedoeling/wat wil je bereiken?
Als het je gaat om die foto: ophalen uit de database en opnemen in je code.
Krijg nu echter het idee dat je iets anders wilt; geef dan aan dat je doel/bedoeling is.
Alvast bedankt voor het meedenken.
Zoals in mijn eerste post aangegeven denk ik zelf aan een popupje met een foto/tekst (uit database).
Ik heb bovenstaand javascript, hiermee POST ik (volgens mij) naar tooltip.php. Met het uitlezen in tooltip.php heb ik vanalles geprobeerd, dwz. geprobeerd te werken met $_POST en met een standaard echo.
Maar, ik denk dat mijn probleem vooral in deze regel zit:
Code (php)
1
id: $(this).data('id'), //hier probeer ik het data-id mee te sturen.
Is er een betere manier om dit op te lossen, dan met AJAX? Of is het AJAX gebruik in dit geval wel goed?
Wat bedoel je met popup? Dat is toch de tooltip?
Waarom informatie posten/ophalen (via jquery)?
Ik weet niet waar je jouw voorbeeld hebt weggehaald. Heb in het verleden diverse tooltips gevonden/geprobeerd en daar heb ik nooit via jquery informatie opgehaald uit een database op het moment van de mouseover.
Misschien begrijp ik het AJAX principe verkeerd, maar hiermee kun je toch bij een mouseover iets posten en terugkrijgen, en dat dan in de tooltip laten zien?
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
$('.tooltip').tooltipster({
content: 'Loading...',
position: 'right',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'POST',
url: 'tooltip.php',
data: {id: $(this).data('id')}, //hier probeer ik het data-id mee te sturen
success: function(data) {
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
}
});
</script>
$('.tooltip').tooltipster({
content: 'Loading...',
position: 'right',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'POST',
url: 'tooltip.php',
data: {id: $(this).data('id')}, //hier probeer ik het data-id mee te sturen
success: function(data) {
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
}
});
</script>
Dit is inderdaad wat ik zocht, alvast bedankt voor het meehelpen!
Is het nu mogelijk om bij het resultaat html code te gebruiken? Als ik deze namelijk gewoon echo krijg ik de code zelf in de tooltip te zien.
toevoegen.
Het helpt ook weleens als je de documentatie bij zo'n plugin leest
Heel erg bedankt voor de hulp!