Select con preview tooltip image

[newbobotime]

Ciao Raga,
Stò impazzendo, avevo trovato da qualche parte uno script ( che ovviamente non trovo più )
che permetteva la visualizzazione dell'anteprima di una miniatura della foto agendo sulle <option> tramite una <select>

In pratica scorrendo sulle option faceva visualizzare un tooltip sulla destra,
qualcuno può aiutarmi ?

.


10ks

[newbobotime]

nessuno ?

[br1]

Originariamente inviato da newbobotime
nessuno ?

Calma e gesso

[TrueLies]

beh ma sarebbe facilmente implementabile.

Nelle option metti come value l'indirizzo della immagine
<option value="http://www.nonso.com/iimmagine.jpg">immagine x</option>

nel tag select metti un evento onchange che richiama una qualche funzione diciamo foo
onchange="foo(this.options[this.selectedIndex].value);"

a quel punto quello che foo dovrebbe fare è, in pseudocodice:

function foo(value){
1) fare comparire con display=block un layer accanto al menu dapprima nascosto (display:none)
il layer potrebbe essere direttamente un tag img
2) assegni al img come src il value
3) se ci fossero problemi di size, nella img metti un event onload che lo resetta in width e height a quella della immagine (scalata, se preferisci, il che si fa con una semplice proporzione - ma intanto basterebbe averla caricata)
}

se conosci un minimo di javascriopt, la procedura è banale.

[TrueLies]

<div style="border:#000000 1px solid; padding:10px; width:500px; height:200px;">
[img][/img]
<select onchange="foo(this.options[this.selectedIndex].value);" size="3">
<option value="http://forum.html.it/forum/images/avatars/tao2.gif">Immagine 1</option>
<option value="http://utenti.html.it/common/img/logo_forum.gif">Immagine 2</option>
<option value="http://affaritaliani.libero.it/static/upll/sofi/sofia-vergara-051.jpg">Immagine 3</option>
</select>
</div>

<script>
function foo(href){
var i=document.getElementById('miniatura');
i.src=href;
}

function foo2(i){
i.style.display='block';
if(i.height>200){
i.height=200;
i.width=((i.width*200)/i.height);
};
}
</script>

c'è solo da riadattare il layout alle tue esigenze, ma per quello basta il css e semmai alterare ilvalore 200 in foo2()

[TrueLies]

senti usa questo:

<div style="border:#000000 1px solid; padding:10px; width:500px; height:200px;">
<div id="miniatura" style="width:300px; float:right;">[img][/img]</div>
<select onchange="foo(this.options[this.selectedIndex].value);" size="3">
<option value="http://forum.html.it/forum/images/avatars/tao2.gif">Immagine 1</option>
<option value="http://utenti.html.it/common/img/logo_forum.gif">Immagine 2</option>
<option value="http://affaritaliani.libero.it/static/upll/sofi/sofia-vergara-051.jpg">Immagine 3</option>
</select>
</div>

<script>
function foo(href){
document.getElementById('miniatura').removeChild(document.getElementById('miniatura').getElementsByTagName('IMG')[0]);
var i=document.createElement('IMG');
document.getElementById('miniatura').appendChild(i);
i.src=href; i.style.display=(document.all)?'block':'none'; i.onload=function(){foo2(this);}
}

function foo2(i){
i.style.display='block';
var h=i.height; var w=i.width;
if(!document.all)i.style.display='none';
if(h>200){
i.style.height='200px';
i.style.width=(w*200/h)+'px';
}
i.style.display='block';
}
</script>

a parte che almeno non conserva l'ultimo dimensionamento... ma poi ovvia ad un problema con IE che non legge le dimensioni delle immagini se il display è none, e di FF che mostra le immagini flashanti quando le ridimensiona se il display NON è settato a none. Gioie dei browser.

[newbobotime]

Bello mi piace !
Scusa mi sono dimenticato di spiegare che la select viene popolata da db in php e passa i valori per l'INSERT quindi non posso indicare i path nel value, come posso fare ?



.

[TrueLies]

e gli dai il value nel tuo php

[newbobotime]

Ciao TrueLies,
nelle value delle option carico i dati dalla tabella MySQL, in realtà devo caricare più valori che poi vado ad esplodere prima della query di INSERT.

ti faccio un'altra domanda, non è possibile applicare un comando onmouseover in una option e fare visualizzare un tooltip ?

Ricordo bene di avere visto una select cosi, in sostanza aprendo la tendina scorrendo sulle option si vedeva la relativa immagine sulla destra.

Hai qualche idea ? Ovviamente senza impegnare il campo value

Ho trovato e utilizzo, questo fantastico script per i miei tooltip, non è che si può aplicare anche alle option ?

Scusa la mia ignoranza js /ajax

/*
 * Url preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easies...w-using-jquery
 *
 */
 
this.screenshotPreview = function(){	
	/* CONFIG */
		
		xOffset = 10;
		yOffset = -230;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("a.screenshot").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "
" + this.t : "";
		$("body").append("<p id='screenshot'>[img]"+ this.rel +"[/img]"+ c +"</p>");								 
		$("#screenshot")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#screenshot").remove();
    });	
	$("a.screenshot").mousemove(function(e){
		$("#screenshot")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};


// starting the script on page load
$(document).ready(function(){
	screenshotPreview();
});

[newbobotime]

Perdonate l'impazienza,
immagino quindi che non sia possibile associare un tooltip con all'interno una immagine
al tag <option> di una <select>

Giusto ?



.