didascalia immagine

**primi_passi** · 29-06-2009, 19:12

salve vorrei sapere se ce una funzione che cliccando o passando con mouse su una immagine mostra la descrizione, che può essere lunga anhe una 10 di rghe

garzie

**NicManzana** · 29-06-2009, 19:20

Ciao
se non vuoi diventare "matto", potresti prendere in considerazione di usare i tooltip con jQuery.
I tooltip fanno proprio quello che chiedi tu.

Ti lascio un link dove trovi tanti esempi... vedrai che sono facilissimi da usare.. ti basta implementare la libreria di jQuery e quella del plugin et voilà...

http://www.webdesignbooth.com/15-jqu...endly-tooltip/

fammi sapere

**primi_passi** · 30-06-2009, 13:53

se per cortesia mi faresti un esempio nella pagina che ti psoto in quanto non mi riesce.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>




<head>
    <title>Tenua</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Author" content=" - w.it" />
    <meta name="keywords" content=" " />
    <meta name="description" content="" />
    <meta name="Copyright" content="Copyright (c) Your copyright here 2009" />

    <link rel="stylesheet" type="text/css" href="stili/grapes.css" />
    <link rel="stylesheet" type="text/css" href="stili/style_gallery.css" />
    
    <script type="text/javascript">
<!--
 <!--
function mmenu(mID) {
	var menu = document.getElementById(mID);
	var display = menu.style.display;
	menu.style.display = (display == "block") ? "none" : "block";
	
}

window.onload = function() {
	var uls = document.getElementsByTagName("ul");
	for (i=0;i<uls.length;i++) {
		if(uls[i].className=="submenu")uls[i].style.display = "none";
	}
}
//-->
</script>
</head>
   


<body>
<div id="container">
    <div id="hdr">
        <p align="center">
                [img]images/bottiglie_in_fila.jpg[/img]
        </p>
        <h1><marquee width="560" scrollamount="1" direction="up" align="middle" height="100" >
                  <font color="black" size="4" style="font-style:italic; font-family:Calibri"> La tenuta "PIETRA PINTA" vi aspetta..</font>
            </marquee>
        </h1>
        <p id="tagline"></p>
    </div>

    <div id="lftcol">
        <ul id="nav">
    <li class="menu"><font face="Tahoma" size="1" color="yellow">HOME </font>
            <li class="menu"><font face="Tahoma" size="1" color="yellow">AZIENDA </font>
            <li class="menu"><font face="Tahoma" size="1" color="yellow">TERRITORIO </font>
            <li class="menu"><font face="Tahoma" size="1" color="yellow">AGRITURISMO </font>
            <li class="menu"><font face="Tahoma" size="1" color="yellow">PRODOTTI
	        <ul class="submenu" id="submenu-1">
		[*]VINI ROSS
		[*]VINI Bianchi
		[*]<a href="Olio_Extra_Vergine_di_Oliva.html</a>
		[*]Sott'olio
		[*]creme
		[/list]
	    
   
<li class="menu"><font face="Tahoma" size="1" color="yellow">CANTINA
	<ul class="submenu" id="submenu-2">
		[*]Vitigni
		[*]Vite
	[/list]

<li class="menu"><font face="Tahoma" size="1" color="yellow">FRANTOIO</font>
 	<li class="menu"><font face="Tahoma" size="1" color="yellow">GALLERIA</font>
            <li class="menu"><font face="Tahoma" size="1" color="yellow">DOVE SIAMO</font>
            <li class="menu"><font face="Tahoma" size="1" color="yellow">CONTATTI</font>
	[/list]
[/list]
     




        <div id="quote">
         

Ta
Ve
k)
T
i</p>
        </div>
        








<!--
        <h3>Agriturismo</h3>
        <ul>[*]<font color=""></font>TERRITORIO[*]AZIENDA[*]CANTINA[*]FRANTOIO[*]PRODOTTI[/list]
-->
    </div>

    <div id="rgtcol">
       

        <h2 style="margin:0px; padding:0px; text-align:left">Prodotti - Vini</h2>
        <hr />
        

        <table width="100%">
	<div class="gallerycontainer">
	      <h2 style="margin:0px; padding:0px; text-align:left">Merlot</h2>
	      

	      [img]images/PdfSm.gif[/img] scheda techica </FONT> 

		

		<a class="thumbnail" href="images/prodotto_falanghina.jpg" target="_parent">
		[img]images/prodotto_falanghina.jpg[/img]
		  <span>[img]images/prodotto_falanghina.jpg[/img]
Colore rosso rubino vivace, 
		  </span></a>
		
		
</div>
	</div>
    



        




        




        

<span></span><span></span><span></span><span></span><span></span></p>
        
















        
















        
        </div>

    <div id="bttmbar">Informativa sulla Privacy Scrivi al webmaster</div>
</div>
</body>
</html>

la modifca andrebbe fatta a questo punto:

codice:

<div class="gallerycontainer">
	      <h2 style="margin:0px; padding:0px; text-align:left">Merlot</h2>
	      

	      [img]images/PdfSm.gif[/img] scheda techica </FONT> 

		

		<a class="thumbnail" href="images/prodotto_falanghina.jpg" target="_parent">
		[img]images/prodotto_falanghina.jpg[/img]
		  <span>[img]images/prodotto_falanghina.jpg[/img]
Colore rosso rubino vivace, 
		  </span></a>
		
		
</div>

**NicManzana** · 30-06-2009, 14:35

ma la pagina che ti ho scritto l'hai visitata?..
perchè in quella pagina c'è una lista di tooltips.. dovresti sceglierne uno , poi nel caso vediamo come usarlo... vedendo il tuo codice non hai nemmeno incluso le librerie

Prova a dare un'occhiata al link, scegli un plugin (tooltip) e poi se con la loro guida non riesci torna qui e posta il problema ..

buon lavoro

Discussione: didascalia immagine

Strumenti discussione

Ricerca discussione

Visualizza

didascalia immagine

Permessi di invio