[GDRCD 5.4] Immagine nel Tooltip

[GDRCD 5.4] Immagine nel Tooltip postato il 09/09/2021 10:45:26 nel forum programmazione, open source e hosting

Premesso che purtroppo siamo senza un programmatore e in attesa di trovarne uno cerchiamo di arrangiarci come possiamo ç_ç

Qualcuno sarebbe così gentile da darci una mano per una questione semplice, come da titolo, vorremo poter far apparire l'immagine della chat, quando si passa sopra al link in mappa. Cioè oltre alla descrizione del luogo, vorremo che apparisse anche una piccola immagine della chat.

Abbiamo provato ad inserire un'immagine nel campo descrizione nella creazione delle chat, ma appare il link e non l'immagine.

Ipotizziamo che si debba intervenire qui: mappaclick.inc.php

/** * Abilitazione tooltip
* @author Blancks
*/
if ($PARAMETERS['mode']['map_tooltip'] == 'ON')
{
if (!empty($row['descrizione']))
{
$descrizione = trim(nl2br(gdrcd_filter('in',$row['descrizione'])));
$descrizione = strtr($descrizione, array("\n\r" => '', "\n" => '', "\r" => '', '"' => '"'));

$fadedesc_link = 'onmouseover="show_desc(event, \''.$descrizione.'\');" onmouseout="hide_desc();"';
}
}

echo '<a href="main.php?', $qstring_link, '" target="_top"', $fadedesc_link,'>', $label_link, '</a>';


echo '</div>';

Grazie!

22/09/2021 12:00:00

Tecnicamente, potresti inserire l'immagine nel tooltip utilizzando il tag <img/> direttamente nella voce Descrizione del luogo scelto, accettando questo campo anche gli HTML, tuttavia ti ritroveresti avere l'immagine non solo nel tooltip su mappa, ma anche nella descrizione del Luogo, quella che vedi quando entri dentro al luogo affianco della chat, e potrebbe sballarti tutte le componenti della pagina.

Il metodo di approccio migliore, quindi, è quello di separare la descrizione del luogo da quella più piccola del tooltip, in modo che i due contenuti possano essere gestiti in modo diverso. Puoi scegliere di creare una nuova colonna nella tabella mappa nominata descrizione_tooltip (o come preferisci) e quindi prevedere che solo questo campo venga effettivamente mostrato nei tooltip e non solo la descrizione. Oppure puoi creare una colonna img_tooltip (anche qui, come preferisci ovviamente) in cui inserisci il link e va a popolare un tag <img> pre-inserito per ogni tooltip, mantenendo le descrizioni allineate e con una sola colonna. Queste sono solo due delle strade che puoi intraprendere.

Ovviamente, dovrai andare a modificare anche la pagina di gestione del luoghi, inserendo le varie opzioni in base alle scelte che hai fatto in merito alla gestione dei testi dei tooltip.

Kasa.

22/09/2021 23:49:17

kasa ha scritto: Tecnicamente, potresti inserire l'immagine nel tooltip utilizzando il tag <img/> direttamente nella voce Descrizione del luogo scelto, accettando questo campo anche gli HTML, tuttavia ti ritroveresti avere l'immagine non solo nel tooltip su mappa, ma anche nella descrizione del Luogo, quella che vedi quando entri dentro al luogo affianco della chat, e potrebbe sballarti tutte le componenti della pagina.

Il metodo di approccio migliore, quindi, è quello di separare la descrizione del luogo da quella più piccola del tooltip, in modo che i due contenuti possano essere gestiti in modo diverso. Puoi scegliere di creare una nuova colonna nella tabella mappa nominata descrizione_tooltip (o come preferisci) e quindi prevedere che solo questo campo venga effettivamente mostrato nei tooltip e non solo la descrizione. Oppure puoi creare una colonna img_tooltip (anche qui, come preferisci ovviamente) in cui inserisci il link e va a popolare un tag <img> pre-inserito per ogni tooltip, mantenendo le descrizioni allineate e con una sola colonna. Queste sono solo due delle strade che puoi intraprendere.

Ovviamente, dovrai andare a modificare anche la pagina di gestione del luoghi, inserendo le varie opzioni in base alle scelte che hai fatto in merito alla gestione dei testi dei tooltip.

Kasa.

Grazie Kasa!
Le tue soluzione sono ottime e non ho problemi ad attuarle.
Solo che adesso mi trovo un po' in difficoltà a fare in modo che nella visualizzazione del tooltip riconosca l'html. Al momento non lo riconosce, qualsiasi tag ci metto, nel tooltip appare il link e non l'immagine.

26/09/2021 11:23:24 e modificato da kasa il 26/09/2021 13:24:59

betsutamashi ha scritto:
Solo che adesso mi trovo un po' in difficoltà a fare in modo che nella visualizzazione del tooltip riconosca l'html. Al momento non lo riconosce, qualsiasi tag ci metto, nel tooltip appare il link e non l'immagine.

Ho simulato su di una versione vanilla di GDRCD#5.5.1 l'inserimento di una immagine nei tooltip preinstallati e non ho avuto problemi. Per caso hai modificato i Tooltip? Se è sì, potresti mettere qui la modifica così provo a riprodurla e a testare?

Kasa.

28/09/2021 09:58:41 e modificato da betsutamashi il 28/09/2021 09:59:17

kasa ha scritto:
Ho simulato su di una versione vanilla di GDRCD#5.5.1 l'inserimento di una immagine nei tooltip preinstallati e non ho avuto problemi. Per caso hai modificato i Tooltip? Se è sì, potresti mettere qui la modifica così provo a riprodurla e a testare?

Kasa.

Non ho modificato il file in realtà, comunque te lo riporto:
tooltip.js

/** * Script per tooltip
* @author Blancks
*/

/** * Gestore del box di descrizione
*/
function show_desc(e, txt)
{
curX = (document.all)? event.clientX + document.body.scrollLeft : e.pageX;
curY = (document.all)? event.clientY + document.body.scrollTop : e.pageY;

set_fade('descriptionLoc', 0);
gdrcd_selector('descriptionLoc').style.display='block';
gdrcd_selector('descriptionLoc').style.left=(parseInt(curX)-parseInt(gdrcd_selector('maincontent').offsetLeft)+tooltip_offsetX)+'px';
gdrcd_selector('descriptionLoc').style.top=(parseInt(curY)-parseInt(gdrcd_selector('maincontent').offsetTop)+tooltip_offsetY)+'px';
gdrcd_selector('descriptionLoc').innerHTML=txt;

start_fade('descriptionLoc', '+');
}


function hide_desc()
{
gdrcd_selector('descriptionLoc').style.display='none';
}

E qui la parte che richiama il tooltip nel file: mappaclick

/** * Abilitazione tooltip
* @author Blancks
*/
if($PARAMETERS['mode']['map_tooltip'] == 'ON') {
echo '<div id="descriptionLoc"></div>';
}

echo '<div class="mappaclick_map" style="background:url(\'themes/', $PARAMETERS['themes']['current_theme'], '/imgs/maps/', $row['immagine'], '\') top left no-repeat; width:', $row['larghezza'], 'px; height:', $row['altezza'], 'px;">';
$echoed_title = true;
$echo_bottom = true;
$vicinato = $row['posizione'];
$self = $row['id_click'];
$mobile = $row['mobile'];
}//if

/*Stampo i link della mappa corrente*/
/** * Bug Fix: i link sono ora posizionati in relazione alla mappa
* Features: link a sottomappe e link immagine
* @author Blancks
*/
echo '<div style="position:absolute; margin:', $row['y_cord'], 'px 0 0 ', $row['x_cord'], 'px;">';

$qstring_link = '';
$label_link = '';

if($row['chat'] == 1) {
$qstring_link = 'dir='.$row['id'];
} elseif($row['id_mappa_collegata'] != 0) {
$qstring_link = 'page=mappaclick&map_id='.$row['id_mappa_collegata'];
} else {
$qstring_link = 'page='.$row['pagina'];
}

if(empty($row['link_immagine'])) {
$label_link = $row['nome'];
} else {
$baseimg_link = 'themes/'.$PARAMETERS['themes']['current_theme'].'/imgs/maps/';

if( ! empty($row['link_immagine_hover'])) {
$switchimg_link = 'onmouseover="this.src=\''.$baseimg_link.$row['link_immagine_hover'].'\';" onmouseout="this.src=\''.$baseimg_link.$row['link_immagine'].'\'"';
} else {
$switchimg_link = '';
}

$label_link = '<img src="'.$baseimg_link.$row['link_immagine'].'" alt="'.$row['nome'].'" '.$switchimg_link.' />';
}

$fadedesc_link = '';

/** * Abilitazione tooltip
* @author Blancks
*/
if($PARAMETERS['mode']['map_tooltip'] == 'ON') {
if( ! empty($row['descrizione'])) {
$descrizione = trim(nl2br(gdrcd_filter('in', $row['descrizione'])));
$descrizione = strtr($descrizione, ["\n\r" => '', "\n" => '', "\r" => '', '"' => '"']);
$fadedesc_link = 'onmouseover="show_desc(event, \''.$descrizione.'\');" onmouseout="hide_desc();"';
}
}
echo '<a href="main.php?', $qstring_link, '" target="_top"', $fadedesc_link, '>', $label_link, '</a>';
echo '</div>';
}//while
if($echo_bottom === true) {
echo '</div>';
$echo_bottom = false;
}//if