Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: powiekszanie obrazkow po najechaniu myszką
Pozycjonowanie i Optymalizacja > Projektowanie stron > HTML i CSS
sh0tek
Witam.

Szukam rozwiązania, mam do stworzenia coś takiego.
7 obrazków koło siebie, miniaturki, po najechaniu myszką pojawia się na obrazu box z nazwą i obrazek się powiększa, bez klikania w obrazek, klik to odnośnik do podstrony.

Ewentualnie same powiększanie bez tego boxa z nazwą który również się pojawi.

Najchętniej skorzystał bym z css, pytanie czy da się coś takiego zrobić ?
javy mogę użyć w ostateczności wink.gif

ewentualnie jakieś inne koncepcje ? ktoś robił coś podobnego kiedyś ?

pozdro
giker
Nie javy tylko javascriptu - "Java ma się tak do javascriptu jak kot do kotwicy"

Nie wiem dokładnie co chcesz osiągnąć, ale poszukaj jQuery + plugin: albo fisheye menu (mac style menu) albo tooltip box.
sh0tek
java - javascript ;D korzystam z tego tak często że nawet nie wiem biggrin.gif

na podobnej stronie http://derbi-bg.com/ jest coś flashowego biggrin.gif



dzięki za podpowiedź z jquery to może zadziałać


-----


fisheye rozwiązuje mój problem biggrin.gif
giker
http://www.ajaxdaddy.com/demo-interface-fisheye.html fisheye to chyba jednak to czego szukasz.
ap_seo
w cssie tez sie da chociaz bedzie troche kombinowania ale jak najbardziej sie da tongue.gif
Hydrae920
Java a JavaScript mają w stosunku do siebie jedno z nielicznych podobieństw którym jest właśnie nazwa, to dwa różne od siebie języki programowania smile.gif Co do Twojego pytania, jeśli wolisz zrobić to w CSS to śmiało mogę Ci powiedzieć, że jest to do zrobienia.
sh0tek
ten 'temat' jest już rozwiązany smile.gif opanowałem wszystko w css
mitrok
pokaż smile.gif
sh0tek
KOD
/**  OTHERS      **/


.clr {
clear:both;
}

/* thumbnail list */

    ul#thumbs, ul#thumbs li{
        margin:0;
        padding:0;
        list-style:none;
    }
    
    ul#thumbs li{
        float:left;
        margin-right:5px;
        border:1px solid #999;    
        padding:1px;
    }
    ul#thumbs a{
        display:block;
        float:left;
        width:125px;
        height:145px;
        line-height:100px;
        overflow:hidden;
        position:relative;
        z-index:1;        
    }
    ul#thumbs a img{
        float:left;
        position:absolute;
        top:-20px;
        left:-50px;    
    }
    
    /* mouse over */
    
        ul#thumbs a:hover{
            overflow:visible;
            z-index:1000;
            border:none;        
        }
        ul#thumbs a:hover img{
            border:1px solid #999;    
            background:#fff;
            padding:1px;            
        }    
    
    /* // mouse over */

    /* clearing floats */
    
        ul#thumbs:after, li#thumbs:after{
            content:".";
            display:block;
            height:0;
            clear:both;
            visibility:hidden;
            }
        ul#thumbs, li#thumbs{
            display:block;
            }
        /*  \*/
        ul#thumbs, li#thumbs{
            min-height:1%;
            }
        * html ul#thumbs, * html li#thumbs{
            height:1%;
            }    
    
    /* // clearing floats */

/* // thumbnail list */


/* single thumbnail */

    p.thumb{
        float:left;
        margin:.5em 0;
        margin-right:10px;
        border:1px solid #999;    
        padding:1px;
    }
    p.thumb a{
        display:block;
        float:left;
        width:120px;
        height:120px;
        line-height:100px;
        overflow:hidden;
        position:relative;
        z-index:1;    
    }    
    p.thumb a img{
        float:left;
        position:absolute;
        top:-20px;
        left:-50px;    
    }
    
    /* mouse over */
    
        p.thumb a:hover{
            overflow:visible;
            z-index:1000;
            border:none;        
        }
        p.thumb a:hover img{
            border:1px solid #999;    
            background:#fff;
            padding:2px;            
        }    
    
    /* // mouse over */    

/* // single thumbnail */


obrazek jest wyświetlany

<ul id="thumbs">
<li><img src=...></li>
</ul>


Ten css jest za to odpowiedzialny, linka do strony w tej chwili nie moge dac bo czeka na poprawki smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2012 Invision Power Services, Inc.