Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Hover w PHP.
Naczelnik Piotru...
post
Post #1





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 22.07.2013

Ostrzeżenie: (0%)
-----


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?
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
Naczelnik Piotru...
post
Post #2





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 22.07.2013

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 5.10.2025 - 12:34