tooltip su hover immagine

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>

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>

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

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