tooltip su hover immagine

lucaeffe

Io non riesco a implementarlo.
Ho fatto in questo modo:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>illustrazioni</title>
<link href="gallery_illustrazioni.css" rel="stylesheet" type="text/css" />
<link href="form_footer.css" rel="stylesheet" type="text/css"/>
<link href="backtohome.css" rel="stylesheet" type="text/css"/>
<link href="ImageOverlay.css" rel="stylesheet" type="text/css"/>




<script src="03/jquery.js" type="text/javascript"></script>

<script type="text/javascript" src="jquery.imageoverlay.1.2/jquery.metadata.js"></script>
<script type="text/javascript"  src="jquery.imageoverlay.1.2/jquery.ImageOverlay.js"></script>
<script type="text/javascript" src="jquery.imageoverlay.1.2/jquery.ImageOverlay.min.js"></script>

<script type="text/javascript">
        $("#immaginey").ImageOverlay({ border_color: "#FF8000", image_height: "200px", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000" });
            </script>



</head>

<body>


[...]




<ul id="immagine" class="image-overlay">
<li>
<img src="IMAGE/try-to-get-me.png" />
                <div class="caption">
                    <h3>Tall Overlay</h3>
                    <p>The overlay height is based upon the content it contains</p>
                </div>

        </li>

</ul>

c'è un errore:
$("#immaginey").ImageOverlay
credo dovesse essere
$("#immagine").ImageOverlay

inoltre va rimossa una di queste due istruzioni:
<script type="text/javascript" src="jquery.imageoverlay.1.2/jquery.ImageOverlay.js"></script>
<script type="text/javascript" src="jquery.imageoverlay.1.2/jquery.ImageOverlay.min.js"></script>

in quanto importano la stessa libreria (una in versione compressa, l'altra no)...

questo almeno a prima vista....

lucaeffe

Si immagginey era un errore e l'ho rimosso subito dopo aver postato la risposta.
Ho anche rimosso una delle due librerie.
Comunque non riuscivo a farlo funzionare.
Ora ho cancellato tutto, riscaricato e provo a rifarlo da capo.
Speriamo bene.

lucaeffe

Ho rifatto tutto da capo ma nulla.
e come se non riuscissi a richiamare lo script o qualche link per il corretto funzionamento.
Infatti i testi dentro la classe "caption" rimangono sotto l'immagine ma non si muovono perchè non c'è lo script.

Posto l'intero codice


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>illustrazioni</title>
<link href="gallery_illustrazioni.css" rel="stylesheet" type="text/css" />
<link href="form_footer.css" rel="stylesheet" type="text/css"/>
<link href="backtohome.css" rel="stylesheet" type="text/css"/>
<link href="jquery.imageoverlay.1.2/ImageOverlay.css" rel="stylesheet" type="text/css" />




<script src="03/jquery.js" type="text/javascript"></script>
<script src="jquery.imageoverlay.1.2/jquery.ImageOverlay.min.js" type="text/javascript" ></script>
<script src="jquery.imageoverlay.1.2/jquery.metadata.2.1/jquery.metadata.js" type="text/javascript"></script>
<script type="text/javascript">
$('#gallery').ImageOverlay({
  image_height: '200px',
  image_width: '200px',
  overlay_origin: 'top'
});
</script>

</style>

<!--[if IE]>
<style type="text/css">



#navigation_quick li a:hover
{
    background-image:url(IMAGE/navigation2.png);
    background-repeat:no-repeat;
    margin:5px 25px 0 35px ;
    position:relative;
    outline:none;
}
 {
    position:absolute;
    left:480px;
    top:310px;
    display: block;
    width: 555px;
    height: 93px;
    background:url(IMAGE/navigation2.png) left top no-repeat;

}    
 li.preventivi2 a {
    width:135px;
    background-position:-370px -93px;
    position:absolute;
    margin:-673px 0 0 45px;
    padding:0;
    outline:none;
}

#navigation {
    left:450px;
    top:-390px;


}

#tuonome{
margin:25px 0 0 230px;}


#submit{
margin:-60px 0 0 480px;}
    
#note{
margin:185px 0 0 123px;}

#object{
margin:110px 0 0 230px;}

#mail{
margin:65px 0 0 230px;}


#back {
    left:770px;
    top:-260px;}

 li.who a {
    margin:0 0 0 40px;
}


</style>
<![endif]-->
<style type="text/css">
        #quickly{
        background-image:url(IMAGE/quckly.png);
        background-repeat:no-repeat;
        height:90px;
        width:400px;
        margin:250px 30px 0 0;
        padding:0;
        position:absolute;}
    
    #form{
        margin:0 auto;
        padding:300px 0 100px 0;
        width:950px;
        height:400px;
    }
</style>

</head>

<body>
<div id="header"></div>

<div id="container"> 
      <div id="menu">

        <ul id="back">
            <li class="who"><a href="PORTFOLIO2.html"></a></li></ul>
        
</div>

<ul id="gallery" class="caption">
<li>
<img alt="try" src="IMAGE/tavola-surf.png" />
<div class="caption">
    <h3>Tall Overlay</h3>
                    <p>The overlay height is based upon the content it contains</p>
                </div>

</li>
</ul>


    
    








</div>  


  <div id="quickly"><a name="p5"></a></div>
  
  <div id="form">
<div id="modulo"><form id="contact" method="post" action="../invio.php">
  
  <fieldset>
          <ol>
            <li>
                <label for="tuonome"><abbr title="campo obbligatorio"></abbr></label>
                <input type="text" name="tuonome" id="tuonome" tabindex="1" /> 
                </li>
                <li>
                        <label for="yourmail"><abbr title="campo obbligatorio"></abbr></label>
                        <input type="text" name="mail" id="mail" tabindex="2" />
                    </li>
                    <li>
                        <label for="object"><abbr title="campo obbligatorio"></abbr></label>
                        <input type="text" name="object" id="object" tabindex="3" />
                    </li>
                                           <li>
                        <label for="note"><abbr title="campo obbligatorio"></abbr></label>
                        <input type="text" name="note" id="note" tabindex="4" />
                    </li>
                                        <li>
                    <input src="preventivo/button_submit_blue.png" id="submit" type="image" tabindex="5">
                    </li>
                </ol>          
  </fieldset>
  
 </form>
  </div>

</div></div>
<div id="footer">

 <ul class="social"> 
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul> 
  
  
 <div id="quick">
<ul id="navigation_quick">
            <li class="illustrazioni"><a href="gallery_illustrazioni.html"></a></li>
            <li class="web"><a href="web_design.html"></a></li>
            <li class="advertising"><a href="logo.html"</a></li>
            <li class="preventivi"><a href="form.html"></a></li>
            <li class="preventivi2"><a href="form.html"></a></li>
            <li class="sito"><a href="pdf/L'importanza sito.pdf"></a></li>
            <li class="curriculum"><a href="pdf/CURRICULUM.pdf"></a></li>
</ul>


</div>

</div>
</body>
</html>

spostato in fondo (prima della chiusura del tag </body>:

e corretto:
<ul id="gallery" class="caption">
in
<ul id="gallery" class="image-overlay">

l'ho provato e così funziona!

lucaeffe

Per me nulla invece.
L'ho rifatto su una pagina HTML nuova riprndendo i codici con FireBug e usando le stesse immagini.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento senza titolo</title>
<link href="jquery.imageoverlay.1.2/ImageOverlay.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery.imageoverlay.1.2/jquery.js"></script>

<script type="text/javascript" src="jquery.imageoverlay.1.2/jquery.metadata.2.1/jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.imageoverlay.1.2/jquery.ImageOverlay.js"></script>

</head>

<body>
<ul id="#" class="image-overlay">
<li>
<a href="#" style="border-color: rgb(255, 128, 0); width: 200px; height: 200px;">
                <img src="jquery.imageoverlay.1.2/testImages/firefox-512-200x200.png" alt="firefox" title="">
                
                <div class="caption" style="top: -44px; background-color: rgb(97, 11, 56); color: rgb(255, 128, 0);">
                    <h3>Get Firefox</h3>
                </div>
            </a>

</li>
</ul>

<script type="text/javascript">
$("#").ImageOverlay({ border_color: "#FF8000", image_height: "200px", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000" }); 

</script>
</body>
</html>

id="#" non va bene...

metti id="nomequalsiasi"

e nello script:

$("#nomequalsiasi").ImageOverlay

per il resto è ok...

lucaeffe

Credo che comunque non dipenda da quello perchè avevo gia provato a correggerlo ma non funziona ugualmente.
Ho provato anche a riscaricare l'ultima versione della libreria jquery ma niente.
Che disperazione!:x

Mi spiace...
io ho semplicemente copiato l'ultimo file che hai postato nella stessa directory della cartella scaricata (jquery.imageoverlay.1.2).
Aggiunto jquery.js all'interno della cartella perchè ho visto che lo linkavi da lì (v.1.4.2).
Correggendo il problema che ti ho segnalato funziona.

ubamongi

Comunque se vedi su questo link c'è di tutto devi solo adattarlo alle tue esigenze: .allwebfree.it/script_index.php?numscri=1&tipscri=3
CIAO

lucaeffe

Ma se si volsse mettere un immagine al posto del rettangolo?
Non mi spiego perchè caricando un immagine in .png

   
<ul id="secondGallery" class="image-overlay">
        <li><a href="#">
        <img src="IMAGE/tavola-surf.png">
                <div class="caption">
                <h3><img src="IMAGE/TESTO.png" width="647" height="336"></h3>
                </div>
            </a>
        </li>

Il plugin ne legge solo il testo e non lo sfondo colorato.
Nel mio caso avrei voluto dare al rettangolo un ombra ma sembra che non legga proprio lo sfondo.
Infatti togliendo lo sfondo al .png questi rimane comunque nero