Pozycjonowanie i Optymalizacja > powiekszanie obrazkow po najechaniu myszką

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: powiekszanie obrazkow po najechaniu myszką

Pozycjonowanie i Optymalizacja > Projektowanie stron > HTML i CSS

sh0tek

8.03.10 - 13:55

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

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

pozdro

giker

8.03.10 - 13:57

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

8.03.10 - 14:01

java - javascript ;D korzystam z tego tak często że nawet nie wiem

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

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

-----

fisheye rozwiązuje mój problem

giker

8.03.10 - 14:04

http://www.ajaxdaddy.com/demo-interface-fisheye.html fisheye to chyba jednak to czego szukasz.

ap_seo

8.03.10 - 18:54

w cssie tez sie da chociaz bedzie troche kombinowania ale jak najbardziej sie da

Hydrae920

25.03.10 - 20:22

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

Co do Twojego pytania, jeśli wolisz zrobić to w CSS to śmiało mogę Ci powiedzieć, że jest to do zrobienia.

sh0tek

26.03.10 - 08:55

ten 'temat' jest już rozwiązany

opanowałem wszystko w css

mitrok

27.03.10 - 11:24

pokaż

sh0tek

27.03.10 - 17:22

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

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.