Hover w PHP. Opcje

[Naczelnik Piotru...]

Witam. Chcę zastosować hover w php, a konkretnie po najechaniu na tekst ma pojawić się generowany obrazek ze zmienną. To znaczy, jest np. tekst SIEMA i gdy najedziemy na niego pojawi nam się obrazek którego ściezka to xxx/$zmienna/banner.png jak mogę osiągnąć taki efekt?

[usb2.0]

moze by tak jednak uzyc javascript?

[nospor]

PHP tu nie ma nic do gadania. Przenosze.

Szukaj w google pod haslem TOOLTIP - pelno tego

[Naczelnik Piotru...]

Dobra, udało mi się wymęczyć, że się pokazuje na stronie i zmienne też działają, aczkolwiek jak najeżdzam to tooltip w ogóle nie wyskakuje, a gdy korzystam w testwoej stronie xx.php gdzie mam tylko linki i zdjecia to jak najeżdzam to pokazuje. Kod zastosowania:

Kod

<li><a href='http://xxx.pl/obrazek.png' class='preview'>$zmienna</li></a>

Ten post edytował Naczelnik Piotruś 22.07.2013, 19:21:16

[nospor]

No ale pokaz caly kod, pokaz jak podpinas tooltip. No skad mamy wiedziec co jest zle bez kodu??

[Naczelnik Piotru...]

Kod

if($rek["p_player"]!='0'){$output .= "<td style='white-space:nowrap; text-align:center'>
                    <li><a href='http://xxx/image.png' class='preview'>$zmienna</li></a>

        </td>";}

tak wygląda kod wyświetlania

a tak wygląda css:

Kod

pre{
    display:block;
    font:100% "Courier New", Courier, monospace;
    padding:10px;
    border:1px solid #bae2f0;
    background:#e3f4f9;    
    margin:.5em 0;
    overflow:auto;
    width:800px;
}

img{border:none;}
ul,li{
    margin:0;
    padding:0;
}
li{
    list-style:none;
    float:left;
    display:inline;
    margin-right:10px;
}



/*  */

#preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    }

Ten post edytował Naczelnik Piotruś 22.07.2013, 20:10:38

[nospor]

No dobra, a gdzie to kod podpinajacy tooltip?

[Naczelnik Piotru...]

To znaczy? Znalazłem tutorial na jakimś forum, że jak to pododaje, wrzuce ten skrypt js:

Kod

/*
* Image 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/easiest-tooltip-and-image-preview-using-jquery
*
*/

this.imagePreview = function(){    
    /* CONFIG */
        
        xOffset = 10;
        yOffset = 30;
        
        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result
        
    /* END CONFIG */
    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    });    
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });            
};


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

i zastosuje klase "preview" to zadziała i faktycznie na dowolnej stronie testowej działa.

[nospor]

No i ten wlasnie skrypt js masz jeszcze dorzucic na strone ze zmiennymi, tam gdzie chcesz miec ten tooltip...

[Naczelnik Piotru...]

Załączyłem to w admin.php który jest includowany do tego pliku, nie działało. Usunąłem z tamtego admin.php i dodałem do tego pliku w ten sposób:

Kod

$output .= "<script src='main.js' type='text/javascript'></script>";

i tez nic, ciągle jedyne co się dzieje to to, ze w dolnym lewym rogu widze adres obrazka a jak klikne w odnośnik to mnie przekieruje, a po najechaniu nic. Dodam, że mam tooltipa tekstowego takiego;

Kod

if($rek["p_status"]!='0'){$output .= "<td style='white-space:nowrap; text-align:center' data-tooltip='nazwa'>
          tekst
          </td>";}

i to działa, ale czy mogę tutaj wkleić obrazek? I jak mogę to jak żeby działał.

Ten post edytował Naczelnik Piotruś 22.07.2013, 21:42:59