tooltip con scelta multipla

[mephjl]

Salve ragazzi,

ho necessità di creare un semplice script con una frase tipo :

il mio cane ..... gli ossi

dove sui puntini dovrebbe apparire un tooltip con la scelta della parola da inserire al loro posto.

per esempio :

beve
mangia
dorme

cliccando quindi su mangia la parola si sostituisce ai puntini.

Ho cercato in rete ma non ho trovato nulla che mi aiutasse anche minimamente, avete dritte da darmi ?
Grazie

[cavicchiandrea]

E dubito che troverai qualcosa troppo particolare, l'unica a mio avviso e che cerchi un tooltip semplice in rete poi ti crei uno script che inserisca nel tooltip le parole a seconda della frase.

[mephjl]

risolto il problema, ho buttato giù 2 righe ed ecco il risultato, un pò spartano, ma efficace, molto efficace :

mi sono rifatto al bubble tooltip, modificando ad hoc il css che sarà

/*---------- bubble tooltip -----------*/
div#container{width: 750px; margin:0 auto}

label.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
	font-weight:bold;
    text-decoration:none;
}
label.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
label.tt:hover{ z-index:25; color: #aaaaff;text-decoration:none;}
label.tt:hover span.tooltip1, 
label.tt:hover span.tooltip2,
label.tt:hover span.tooltip3,
label.tt:hover span.tooltip4,
label.tt:hover span.tooltip5 {
    display:block;
    position:absolute;
    top:0px; left:0;
	padding: 15px 0 0 0;
	width:200px;
	color: #993300;
    text-align: center;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}
label.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url('../images/bubble.gif') no-repeat top;
}
label.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url('../images/bubble_filler.gif') repeat bottom; 
}
label.tt:hover span.bottom {
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url('../images/bubble.gif') no-repeat bottom;
}

#scelta {
	text-decoration:none;
}

#risp1,
#risp2,
#risp3,
#risp4,
#risp5 {
	border:none;
	background-color: transparent;
	text-align:center;
	color:#9E4290;
	font-size:14px;
	font-weight: bold;
	width: 100px;
	margin-bottom: 8px;
}

.ok1,
.ok2,
.ok3,
.ok4,
.ok5 {
	background: url('../images/ok.png') no-repeat bottom;
	width:24px;
	height:24px;
	float:right;
	margin-top:-40px;
	display: none;
}

.no1,
.no2,
.no3,
.no4,
.no5 {
	background: url('../images/no.png') no-repeat bottom;
	width:24px;
	height:24px;
	float:right;
	margin-top:-40px;
	display: none;
}

mentre il codice della pagina sarà

<script type="text/javascript">

function scelto(nome, num){
	
var esatta =  document.getElementById('esatta'+num).value

document.getElementById('risp'+num).value = nome;

if (nome == esatta) {
	document.getElementById('ok'+num).style.display = 'inline';
} else {
	document.getElementById('no'+num).style.display = 'inline';
}
document.getElementById('risp'+num).style.display = 'inline';
document.getElementById('tooltip'+num).style.display = 'none';

}

</script>

<div id="container">
    <h1 id="title">Esercizio</h1>
    

Il mio nome è 
    <label class="tt"><input type="text" name="risp1" id="risp1" readonly="readonly" value=".................." /><input type="hidden" name="esatta1" id="esatta1" value="Mario" />
    <span id="tooltip1" class="tooltip1"><span class="top"></span>
    <span class="middle">Mario</span>
    <span class="middle">Michele</span>
    <span class="middle">Massimo</span>
    <span class="middle">Mauro</span>
    <span class="bottom"></span></span>
    </label>
     Rossi<div id="ok1" class="ok1"></div><div id="no1" class="no1"></div></p>
     
     

Il mio cognome è 
    <label class="tt"><input type="text" name="risp2" id="risp2" readonly="readonly" value=".................." /><input type="hidden" name="esatta2" id="esatta2" value="Rossi" />
    <span id="tooltip2" class="tooltip2"><span class="top"></span>
    <span class="middle">Bianchi</span>
    <span class="middle">Verdi</span>
    <span class="middle">Rossi</span>
    <span class="middle">Verdone</span>
    <span class="bottom"></span></span>
    </label>
     <div id="ok2" class="ok2"></div><div id="no2" class="no2"></div></p>
</div>

è già pronto per 5 domande e cinque risposte.

Si può collegare ad una tabella in un database che contiene le domande con relative risposte e risposta esatta.

Spero servi a qualcuno, grazie a tutti

[cavicchiandrea]

Ti ricodo che gli id devono essere univoci id="scelta" pertanto se ti serve aggiungici un numero id="scelta1", id="scelta2", etc... altrimenti toglilo cosi comè è inutile.

[mephjl]

Originariamente inviato da cavicchiandrea
Ti ricodo che gli id devono essere univoci id="scelta" pertanto se ti serve aggiungici un numero id="scelta1", id="scelta2", etc... altrimenti toglilo cosi comè è inutile.

vero lo avevo lasciato per fare prove con il CSS, infatti nel CSS è dichiarato come ID ma va dichiarato come classe

al posto di

#scelta {
	text-decoration:none;
}

inserire

.scelta {
	text-decoration:none;
}

quindi

id="scelta"

diventa

class="scelta"