Ακίνητα Εικονίδια και αντιστροφή θέσης

Καλησπέρα.

Βρήκα αυτό το θέμα, και θα ήθελα να κάνω κάτι παρόμοι αλλά να είναι σε κατακόρυφη θέση και να αλλάξω τις εικόνες που υπάρχουν για άλλα εικονίδια; Γίνεται;

https://www.thegreeksenergy.com/t46335-topic#316156

Αν γίνεται αυτό θα ήθελα να μάθω πως γίνεται αυτό.

Ο κώδικας που έχει εκεί είναι προφανώς για να γίνεται όλη η διαδικασία του σηκώματος κλπ. Αλλά, πως μπορώ να τα ακινητοποιήσω έτσι ώστε όταν κινείται το mouse προς τα κάτω να κινούνται κι αυτά για να φαίνονται πάντα;

Αν είναι δύσκολο με αυτό τον κώδικα, δεν θα με πείραζε καθόλου να ήταν πάντα φανερά τα εικονίδια. Χωρίς πολλές πολλές φασαρίες!

Ευχαριστώ πολύ για τον χρόνο σας!

Απλά να σας πω ότι τα εικονίδια μπορώ να τα βάλω σε κάποιο πρότυπο. Απλώς δεν ξέρω πως να τα κάνω να είναι ακίνητα και να κινούνται με την κίνηση του mouse προς τα κάτω!

Δεν καταλαβα τι θελεις, ο κωδικος ειναι ετοιμος δεν το εχω κανει εγω μπορεις να τον χρησιμοποιησεις οπως εχει...

Ναι εγώ θέλω κάτι παρόμοιο με αυτό, Που:

Να είναι τα εικονίδια που διαλέξω το ένα κάτω από το άλλο σε μια στήλη και να μενουνε ακίνητα άσχετα αν πηγαίνει κάτω ή πάνω το mouse. Συγκεκριμένα τα θέλω στην αριστερή μεριά. 

Τον κώδικα και τις εικόνες τα βρίσκω να τα βάλω. Πως να τα κρατήσω ακίνητα όμως.. ΑΓΝΩΣΤΟΝ!!!!

Προσπάθησα να βάλω τον κώδικα σε widget και να το τοποθετήσω στην αριστερή στήλη (που δεν φαίνεται) και να γράψω στο css position:fixed; αλλά δεν δουλεύει. Αν το κάνω στο Πορταλ όμως μου δουλεύει κανονικά. Δεν ξέρω τι φταίει.....

Όταν μπορείτε απαντήστε! :kaloooooo:

Από το css του θα το φτιαξεις αυτο που θελεις

Κώδικας:

/*
click handler for SexyBookmarks
Credit: Phong Thai Cao - http://www.JavaScriptBank.com
Please keep this creadit when you use this code
*/
div.sexy-bookmarks {
margin:20px 0 0 0;
clear: both !important;
}
div.sexy-bookmarks-expand {
height: 29px;
overflow: hidden;
}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-caring, .sexy-bookmarks-bg-caring-old, .sexy-bookmarks-bg-love, .sexy-bookmarks-bg-wealth, .sexy-bookmarks-bg-enjoy {
background-image:url('http://www.javascriptbank.com/javascript/article/Integrate_SexyBookmarks_into_your_Personal_page_with_JavaScript/sexy-trans.png') !important;
background-repeat: no-repeat !important;
}
div.sexy-bookmarks-bg-sexy {
padding: 28px 0 0 10px !important;
background-position: left -348px !important;
}
div.sexy-bookmarks-bg-caring {
padding: 26px 0 0 10px !important;
background-position: left 0 !important;
}
div.sexy-bookmarks-bg-caring-old {
padding: 26px 0 0 10px !important;
background-position: left -748px !important;
}
div.sexy-bookmarks-bg-love {
padding: 26px 0 0 10px !important;
background-position: left -1148px !important;
}
div.sexy-bookmarks-bg-wealth {
margin-left: 15px !important;
padding: 35px 0 0 20px !important;
background-position: left -1535px !important;
}
div.sexy-bookmarks-bg-enjoy {
padding: 26px 0 0 10px !important;
background-position: left -1895px !important;
}
div.sexy-bookmarks ul.socials {
width:100% !important;
margin:0 !important;
padding:0 !important;
float: left !important;
}

div.sexy-bookmarks ul.socials {
background:transparent none !important;
border:0 none !important;
outline:0 none !important;
}

div.sexy-bookmarks ul.socials li {
display:inline !important;
float:left !important;
list-style-type:none !important;
margin:0;
height:29px !important;
width:60px !important;
cursor:pointer !important;
padding:0 !important;
background-color:transparent !important;
border:0 none !important;
outline:0 none !important;
clear:none !important;
}

div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after {
content:none !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:60px !important;
height:29px !important;
text-indent: -9999px !important;
background-color:transparent !important;
}

div.sexy-bookmarks ul.socials a:hover, div.sexy-bookmarks ul.socials li:hover {
background-color:transparent !important;
border:0 none !important;
outline:0 none !important;
}

li.sexy-diigo, li.sexy-diigo:hover, li.sexy-digg, li.sexy-digg:hover, li.sexy-reddit, li.sexy-reddit:hover, li.sexy-stumbleupon, li.sexy-stumbleupon:hover, li.sexy-delicious, li.sexy-delicious:hover, li.sexy-yahoobuzz, li.sexy-yahoobuzz:hover, li.sexy-blinklist, li.sexy-blinklist:hover, li.sexy-technorati, li.sexy-technorati:hover, li.sexy-facebook, li.sexy-facebook:hover, li.sexy-twitter, li.sexy-twitter:hover, li.sexy-myspace, li.sexy-myspace:hover, li.sexy-mixx, li.sexy-mixx:hover, li.sexy-scriptstyle, li.sexy-scriptstyle:hover, li.sexy-designfloat, li.sexy-designfloat:hover, li.sexy-mail, li.sexy-mail:hover, li.sexy-comfeed, li.sexy-comfeed:hover, li.sexy-newsvine, li.sexy-newsvine:hover, li.sexy-devmarks, li.sexy-devmarks:hover, li.sexy-linkedin, li.sexy-linkedin:hover, li.sexy-google, li.sexy-google:hover, li.sexy-misterwong, li.sexy-misterwong:hover, li.sexy-izeby, li.sexy-izeby:hover, li.sexy-twittley, li.sexy-twittley:hover, li.sexy-tipd, li.sexy-tipd:hover, li.sexy-pfbuzz, li.sexy-pfbuzz:hover, li.sexy-friendfeed, li.sexy-friendfeed:hover, li.sexy-blogmarks, li.sexy-blogmarks:hover, li.sexy-fwisp, li.sexy-fwisp:hover, li.sexy-designmoo, li.sexy-designmoo:hover, li.sexy-bobrdobr, li.sexy-bobrdobr:hover, li.sexy-yandex, li.sexy-yandex:hover, li.sexy-memoryru, li.sexy-memoryru:hover, li.sexy-100zakladok, li.sexy-100zakladok:hover, li.sexy-moemesto, li.sexy-moemesto:hover, li.sexy-ning, li.sexy-ning:hover, li.sexy-hackernews, li.sexy-hackernews:hover, li.sexy-identica, li.sexy-identica:hover, li.sexy-printfriendly, li.sexy-printfriendly:hover, li.sexy-designbump, li.sexy-designbump:hover, li.sexy-fleck, li.sexy-fleck:hover, li.sexy-netvibes, li.sexy-netvibes:hover, li.sexy-netvouz, li.sexy-netvouz:hover, li.sexy-nujij, li.sexy-nujij:hover, li.sexy-globalgrind, li.sexy-globalgrind:hover, li.sexy-wikio, li.sexy-wikio:hover, li.sexy-xerpi, li.sexy-xerpi:hover, li.sexy-sphinn, li.sexy-sphinn:hover, li.sexy-blogospherenews, li.sexy-blogospherenews:hover, li.sexy-posterous, li.sexy-posterous:hover, li.sexy-techmeme, li.sexy-techmeme:hover, li.sexy-ekudos, li.sexy-ekudos:hover, li.sexy-pingfm, li.sexy-pingfm:hover, li.sexy-tomuse, li.sexy-tomuse:hover {
background:url('http://www.javascriptbank.com/javascript/article/Integrate_SexyBookmarks_into_your_Personal_page_with_JavaScript/sexy-sprite.png') no-repeat !important;
}

li.sexy-diigo {
background-position:-910px bottom !important;
}
li.sexy-diigo:hover {
background-position:-910px top !important;
}
li.sexy-digg {
background-position:-980px bottom !important;
}
li.sexy-digg:hover {
background-position:-980px top !important;
}
li.sexy-reddit {
background-position:-700px bottom !important;
}
li.sexy-reddit:hover {
background-position:-700px top !important;
}
li.sexy-stumbleupon {
background-position:-630px bottom !important;
}
li.sexy-stumbleupon:hover {
background-position:-630px top !important;
}
li.sexy-delicious {
background-position:-1190px bottom !important;
}
li.sexy-delicious:hover {
background-position:-1190px top !important;
}
li.sexy-yahoobuzz {
background-position:-1120px bottom !important;
}
li.sexy-yahoobuzz:hover {
background-position:-1120px top !important;
}
li.sexy-blinklist {
background-position:-1260px bottom !important;
}
li.sexy-blinklist:hover {
background-position:-1260px top !important;
}
li.sexy-technorati {
background-position:-560px bottom !important;
}
li.sexy-technorati:hover {
background-position:-560px top !important;
}
li.sexy-myspace {
background-position:-770px bottom !important;
}
li.sexy-myspace:hover {
background-position:-770px top !important;
}
li.sexy-twitter {
background-position:-490px bottom !important;
}
li.sexy-twitter:hover {
background-position:-490px top !important;
}
li.sexy-facebook {
background-position:-1330px bottom !important;
}
li.sexy-facebook:hover {
background-position:-1330px top !important;
}
li.sexy-mixx {
background-position:-840px bottom !important;
}
li.sexy-mixx:hover {
background-position:-840px top !important;
}
li.sexy-scriptstyle {
background-position:-280px bottom !important;
}
li.sexy-scriptstyle:hover {
background-position:-280px top !important;
}
li.sexy-designfloat {
background-position:-1050px bottom !important;
}
li.sexy-designfloat:hover {
background-position:-1050px top !important;
}
li.sexy-newsvine {
background-position:left bottom !important;
}
li.sexy-newsvine:hover {
background-position:left top !important;
}
li.sexy-google {
background-position:-210px bottom !important;
}
li.sexy-google:hover {
background-position:-210px top !important;
}
li.sexy-comfeed {
background-position:-420px bottom !important;
}
li.sexy-comfeed:hover {
background-position:-420px top !important;
}
li.sexy-mail {
background-position:-350px bottom !important;
}
li.sexy-mail:hover {
background-position:-350px top !important;
}
li.sexy-devmarks {
background-position:-140px bottom !important;
}
li.sexy-devmarks:hover {
background-position:-140px top !important;
}
li.sexy-linkedin {
background-position:-70px bottom !important;
}
li.sexy-linkedin:hover {
background-position:-70px top !important;
}
li.sexy-misterwong {
background-position:-1400px bottom !important;
}
li.sexy-misterwong:hover {
background-position:-1400px top !important;
}
li.sexy-izeby {
background-position:-1470px bottom !important;
}
li.sexy-izeby:hover {
background-position:-1470px top !important;
}
li.sexy-twittley {
background-position:-1540px bottom !important;
}
li.sexy-twittley:hover {
background-position:-1540px top !important;
}
li.sexy-tipd {
background-position:-1610px bottom !important;
}
li.sexy-tipd:hover {
background-position:-1610px top !important;
}
li.sexy-pfbuzz {
background-position:-1680px bottom !important;
}
li.sexy-pfbuzz:hover {
background-position:-1680px top !important;
}
li.sexy-friendfeed {
background-position:-1750px bottom !important;
}
li.sexy-friendfeed:hover {
background-position:-1750px top !important;
}
li.sexy-blogmarks {
background-position:-1820px bottom !important;
}
li.sexy-blogmarks:hover {
background-position:-1820px top !important;
}
li.sexy-fwisp {
background-position:-1890px bottom !important;
}
li.sexy-fwisp:hover {
background-position:-1890px top !important;
}
li.sexy-designmoo {
background-position:-1960px bottom !important;
}
li.sexy-designmoo:hover {
background-position:-1960px top !important;
}
li.sexy-bobrdobr {
background-position:-2030px bottom !important;
}
li.sexy-bobrdobr:hover {
background-position:-2030px top !important;
}
li.sexy-memoryru {
background-position:-2100px bottom !important;
}
li.sexy-memoryru:hover {
background-position:-2100px top !important;
}
li.sexy-100zakladok {
background-position:-2170px bottom !important;
}
li.sexy-100zakladok:hover {
background-position:-2170px top !important;
}
li.sexy-yandex {
background-position:-2240px bottom !important;
}
li.sexy-yandex:hover {
background-position:-2240px top !important;
}
li.sexy-moemesto {
background-position:-2310px bottom !important;
}
li.sexy-moemesto:hover {
background-position:-2310px top !important;
}
li.sexy-marrows {
background-position:-2380px bottom !important;
}
li.sexy-marrows:hover {
background-position:-2380px top !important;
}
li.sexy-identica {
background-position:-2450px bottom !important;
}
li.sexy-identica:hover {
background-position:-2450px top !important;
}
li.sexy-hackernews {
background-position:-2520px bottom !important;
}
li.sexy-hackernews:hover {
background-position:-2520px top !important;
}
li.sexy-ning {
background-position:-2590px bottom !important;
}
li.sexy-ning:hover {
background-position:-2590px top !important;
}
li.sexy-designbump {
background-position:-2660px bottom !important;
}
li.sexy-designbump:hover {
background-position:-2660px top !important;
}
li.sexy-printfriendly {
background-position:-2730px bottom !important;
}
li.sexy-printfriendly:hover {
background-position:-2730px top !important;
}
li.sexy-fleck{
background-position:-2800px bottom !important;
}
li.sexy-fleck:hover{
background-position:-2800px top !important;
}
li.sexy-netvibes{
background-position:-2870px bottom !important;
}
li.sexy-netvibes:hover{
background-position:-2870px top !important;
}
li.sexy-netvouz{
background-position:-2940px bottom !important;
}
li.sexy-netvouz:hover{
background-position:-2940px top !important;
}
li.sexy-nujij{
background-position:-3010px bottom !important;
}
li.sexy-nujij:hover{
background-position:-3010px top !important;
}
li.sexy-globalgrind{
background-position:-3080px bottom !important;
}
li.sexy-globalgrind:hover{
background-position:-3080px top !important;
}
li.sexy-wikio{
background-position:-3150px bottom !important;
}
li.sexy-wikio:hover{
background-position:-3150px top !important;
}
li.sexy-xerpi{
background-position:-3220px bottom !important;
}
li.sexy-xerpi:hover{
background-position:-3220px top !important;
}
li.sexy-sphinn{
background-position:-3290px bottom !important;
}
li.sexy-sphinn:hover{
background-position:-3290px top !important;
}
li.sexy-blogospherenews{
background-position:-3360px bottom !important;
}
li.sexy-blogospherenews:hover{
background-position:-3360px top !important;
}
li.sexy-posterous{
background-position:-3430px bottom !important;
}
li.sexy-posterous:hover{
background-position:-3430px top !important;
}
li.sexy-techmeme{
background-position:-3500px bottom !important;
}
li.sexy-techmeme:hover{
background-position:-3500px top !important;
}
li.sexy-ekudos{
background-position:-3570px bottom !important;
}
li.sexy-ekudos:hover{
background-position:-3570px top !important;
}
li.sexy-pingfm{
background-position:-3640px bottom !important;
}
li.sexy-pingfm:hover{
background-position:-3640px top !important;
}
li.sexy-tomuse{
background-position:-3710px bottom !important;
}
li.sexy-tomuse:hover {
background-position:-3710px top !important;
}

δηλαδη σε αυτο το σημειο...

Κώδικας:

li.sexy-diigo {
background-position:-910px bottom !important;
}
li.sexy-diigo:hover {
background-position:-910px top !important;
}
li.sexy-digg {
background-position:-980px bottom !important;
}
li.sexy-digg:hover {
background-position:-980px top !important;
}
li.sexy-reddit {
background-position:-700px bottom !important;
}
li.sexy-reddit:hover {
background-position:-700px top !important;
}
li.sexy-stumbleupon {
background-position:-630px bottom !important;
}
li.sexy-stumbleupon:hover {
background-position:-630px top !important;
}
li.sexy-delicious {
background-position:-1190px bottom !important;
}
li.sexy-delicious:hover {
background-position:-1190px top !important;
}
li.sexy-yahoobuzz {
background-position:-1120px bottom !important;
}
li.sexy-yahoobuzz:hover {
background-position:-1120px top !important;
}
li.sexy-blinklist {
background-position:-1260px bottom !important;
}
li.sexy-blinklist:hover {
background-position:-1260px top !important;
}
li.sexy-technorati {
background-position:-560px bottom !important;
}
li.sexy-technorati:hover {
background-position:-560px top !important;
}
li.sexy-myspace {
background-position:-770px bottom !important;
}
li.sexy-myspace:hover {
background-position:-770px top !important;
}
li.sexy-twitter {
background-position:-490px bottom !important;
}
li.sexy-twitter:hover {
background-position:-490px top !important;
}
li.sexy-facebook {
background-position:-1330px bottom !important;
}
li.sexy-facebook:hover {
background-position:-1330px top !important;
}
li.sexy-mixx {
background-position:-840px bottom !important;
}
li.sexy-mixx:hover {
background-position:-840px top !important;
}
li.sexy-scriptstyle {
background-position:-280px bottom !important;
}
li.sexy-scriptstyle:hover {
background-position:-280px top !important;
}
li.sexy-designfloat {
background-position:-1050px bottom !important;
}
li.sexy-designfloat:hover {
background-position:-1050px top !important;
}
li.sexy-newsvine {
background-position:left bottom !important;
}
li.sexy-newsvine:hover {
background-position:left top !important;
}
li.sexy-google {
background-position:-210px bottom !important;
}
li.sexy-google:hover {
background-position:-210px top !important;
}
li.sexy-comfeed {
background-position:-420px bottom !important;
}
li.sexy-comfeed:hover {
background-position:-420px top !important;
}
li.sexy-mail {
background-position:-350px bottom !important;
}
li.sexy-mail:hover {
background-position:-350px top !important;
}
li.sexy-devmarks {
background-position:-140px bottom !important;
}
li.sexy-devmarks:hover {
background-position:-140px top !important;
}
li.sexy-linkedin {
background-position:-70px bottom !important;
}
li.sexy-linkedin:hover {
background-position:-70px top !important;
}
li.sexy-misterwong {
background-position:-1400px bottom !important;
}
li.sexy-misterwong:hover {
background-position:-1400px top !important;
}
li.sexy-izeby {
background-position:-1470px bottom !important;
}
li.sexy-izeby:hover {
background-position:-1470px top !important;
}
li.sexy-twittley {
background-position:-1540px bottom !important;
}
li.sexy-twittley:hover {
background-position:-1540px top !important;
}
li.sexy-tipd {
background-position:-1610px bottom !important;
}
li.sexy-tipd:hover {
background-position:-1610px top !important;
}
li.sexy-pfbuzz {
background-position:-1680px bottom !important;
}
li.sexy-pfbuzz:hover {
background-position:-1680px top !important;
}
li.sexy-friendfeed {
background-position:-1750px bottom !important;
}
li.sexy-friendfeed:hover {
background-position:-1750px top !important;
}
li.sexy-blogmarks {
background-position:-1820px bottom !important;
}
li.sexy-blogmarks:hover {
background-position:-1820px top !important;
}
li.sexy-fwisp {
background-position:-1890px bottom !important;
}
li.sexy-fwisp:hover {
background-position:-1890px top !important;
}
li.sexy-designmoo {
background-position:-1960px bottom !important;
}
li.sexy-designmoo:hover {
background-position:-1960px top !important;
}
li.sexy-bobrdobr {
background-position:-2030px bottom !important;
}
li.sexy-bobrdobr:hover {
background-position:-2030px top !important;
}
li.sexy-memoryru {
background-position:-2100px bottom !important;
}
li.sexy-memoryru:hover {
background-position:-2100px top !important;
}
li.sexy-100zakladok {
background-position:-2170px bottom !important;
}
li.sexy-100zakladok:hover {
background-position:-2170px top !important;
}
li.sexy-yandex {
background-position:-2240px bottom !important;
}
li.sexy-yandex:hover {
background-position:-2240px top !important;
}
li.sexy-moemesto {
background-position:-2310px bottom !important;
}
li.sexy-moemesto:hover {
background-position:-2310px top !important;
}
li.sexy-marrows {
background-position:-2380px bottom !important;
}
li.sexy-marrows:hover {
background-position:-2380px top !important;
}
li.sexy-identica {
background-position:-2450px bottom !important;
}
li.sexy-identica:hover {
background-position:-2450px top !important;
}
li.sexy-hackernews {
background-position:-2520px bottom !important;
}
li.sexy-hackernews:hover {
background-position:-2520px top !important;
}
li.sexy-ning {
background-position:-2590px bottom !important;
}
li.sexy-ning:hover {
background-position:-2590px top !important;
}
li.sexy-designbump {
background-position:-2660px bottom !important;
}
li.sexy-designbump:hover {
background-position:-2660px top !important;
}
li.sexy-printfriendly {
background-position:-2730px bottom !important;
}
li.sexy-printfriendly:hover {
background-position:-2730px top !important;
}
li.sexy-fleck{
background-position:-2800px bottom !important;
}
li.sexy-fleck:hover{
background-position:-2800px top !important;
}
li.sexy-netvibes{
background-position:-2870px bottom !important;
}
li.sexy-netvibes:hover{
background-position:-2870px top !important;
}
li.sexy-netvouz{
background-position:-2940px bottom !important;
}
li.sexy-netvouz:hover{
background-position:-2940px top !important;
}
li.sexy-nujij{
background-position:-3010px bottom !important;
}
li.sexy-nujij:hover{
background-position:-3010px top !important;
}
li.sexy-globalgrind{
background-position:-3080px bottom !important;
}
li.sexy-globalgrind:hover{
background-position:-3080px top !important;
}
li.sexy-wikio{
background-position:-3150px bottom !important;
}
li.sexy-wikio:hover{
background-position:-3150px top !important;
}
li.sexy-xerpi{
background-position:-3220px bottom !important;
}
li.sexy-xerpi:hover{
background-position:-3220px top !important;
}
li.sexy-sphinn{
background-position:-3290px bottom !important;
}
li.sexy-sphinn:hover{
background-position:-3290px top !important;
}
li.sexy-blogospherenews{
background-position:-3360px bottom !important;
}
li.sexy-blogospherenews:hover{
background-position:-3360px top !important;
}
li.sexy-posterous{
background-position:-3430px bottom !important;
}
li.sexy-posterous:hover{
background-position:-3430px top !important;
}
li.sexy-techmeme{
background-position:-3500px bottom !important;
}
li.sexy-techmeme:hover{
background-position:-3500px top !important;
}
li.sexy-ekudos{
background-position:-3570px bottom !important;
}
li.sexy-ekudos:hover{
background-position:-3570px top !important;
}
li.sexy-pingfm{
background-position:-3640px bottom !important;
}
li.sexy-pingfm:hover{
background-position:-3640px top !important;
}
li.sexy-tomuse{
background-position:-3710px bottom !important;
}
li.sexy-tomuse:hover {
background-position:-3710px top !important;
}

Παύλο εγώ δεν θέλω να πάρω αυτό που έχει εκεί.. Εγώ θέλω να βάλω 7 εικονίδια, το ένα κατω από το άλλο στην αριστερή μεριά του φόρουμ και όταν παω κατω κατω να μενουν στην θεση τους και να μην πανε πανω. Να είναι ακίνητα. Το που μπορώ να σας το δειξω.. 

Με λίγα και γρήγορα λόγια.
http://prntscr.com/1oijni
Θέλω στα κουτιά της εικόνας, να βάλω εικονίδια και να μενουν εκει και να μην ταραζουνε καθολου..

Δοκιμασε αυτο

Κώδικας:

<script src="http://dsprime.webs.com/Stacker.js"></script>
<div class="stack">
    <img src="http://i67.servimg.com/u/f67/14/87/55/48/stack110.png" alt="stack">
<ul id="stack">
<li><a href="link"><span>Aperture</span><img src="http://i67.servimg.com/u/f67/14/87/55/48/apertu10.png" alt="Aperature"></a></li>
<li><a href="link"><span>All Examples</span><img src="http://i67.servimg.com/u/f67/14/87/55/48/photos10.png" alt="Photoshop"></a></li>
<li><a href="link"><span>Example 3</span><img src="http://i67.servimg.com/u/f67/14/87/55/48/safari10.png" alt="Safari"></a></li>
<li><a href="link"><span>Example 2</span><img src="http://i67.servimg.com/u/f67/14/87/55/48/coda110.png" alt="Coda"></a></li>
<li><a href="link"><span>Example 1</span><img src="http://i67.servimg.com/u/f67/14/87/55/48/finder10.png" alt="Finder"></a></li>
</ul>
</div>

<style>
.stack { position: fixed; bottom: 15px; right: 20px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
    display:block;
    height: 14px;
    position:absolute;
    top: 17px;
    right:60px;
    line-height: 14px;
    border: 0;
    background-color:#000;
    padding: 3px 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    color: #fcfcfc;
    text-align: center;
    text-shadow: #000 1px 1px 1px;
    opacity: .85;
    filter: alpha(opacity = 85);
}
 
/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }
</style>

Παύλο αυτό είναι Τ-Ε-Λ-Ε-Ι-Ο... Μπορεί να μπει όμως στην άλλη γωνία και να αλλάξω εικονίδια;

Φυσικαι και μπορεις...

οπου

Κώδικας:

<img src="http://i67.servimg.com/u/f67/14/87/55/48/apertu10.png" alt="Aperature"></a>

και οσο για το αλλο θα αλλαξεις το css σε..

Κώδικας:

.stack { position: fixed; bottom: 15px; left: 20px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
    display:block;
    height: 14px;
    position:absolute;
    top: 17px;
    left:60px;
    line-height: 14px;
    border: 0;
    background-color:#000;
    padding: 3px 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    color: #fcfcfc;
    text-align: center;
    text-shadow: #000 1px 1px 1px;
    opacity: .85;
    filter: alpha(opacity = 85);
}
 
/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *left:5px; }

Παύλο, αν τα πάρω στην άλλη γωνία, τότε το πλαίσιο με το κείμενο δεν αλλάζει μεριά. Μπορώ να το σβήσω τελείωσε και να μείνει με tipsy?

Παύλο, τα βρήκα και έκανα αυτό που ήθελα. Τώρα, μια μικρή βοήθεια θέλω.

Έχω αφήσει αυτό:

Κώδικας:

<script src="http://dsprime.webs.com/Stacker.js"></script>
<div class="stack">
  <a href="http://tostekimas.forumgreek.com/forum"><img src="https://cdn1.iconfinder.com/data/icons/gnomeicontheme/24x24/actions/redhat-home.png" alt="Forum"></a><br></br>
<a href="http://tostekimas.forumgreek.com"><img src="https://cdn2.iconfinder.com/data/icons/snipicons/500/globe-24.png" alt="Portal"></a><br></br>
<a href="http://tostekimas.forumgreek.com/contact"><img src="https://cdn1.iconfinder.com/data/icons/humano2/24x24/apps/preferences-contact-list.png" alt="Contact"></a><br></br>
<a href="http://tostekimas.forumgreek.com/?pid=2"><img src="https://cdn1.iconfinder.com/data/icons/ie_Financial_set/24/09.png" alt="Store"></a><br></br>
<a href="http://tostekimas.forumgreek.com/calendar"><img src="https://cdn2.iconfinder.com/data/icons/snipicons/5000/calendar-24.png" alt="Calendar"></a><br></br>
<a href="http://tostekimas.forumgreek.com/faq"><img src="https://cdn1.iconfinder.com/data/icons/oxygen/22x22/actions/help-contents.png" alt="FAQ"></a><br></br>
  <a href="http://tostekimas.forumgreek.com/memberlist"><img src="https://cdn1.iconfinder.com/data/icons/humano2/24x24/apps/config-users.png" alt="Members"></a><br></br>
<a href="http://tostekimas.forumgreek.com/profile?mode=editprofile"><img src="https://cdn1.iconfinder.com/data/icons/humano2/24x24/emblems/emblem-people.png" alt="Profile"></a><br></br>
<a href="http://tostekimas.forumgreek.com/privmsg?folder=inbox"><img src="https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/contact-24.png" alt="Inbox"></a><br></br>
</div>
<style>
.stack { position: fixed; bottom: 100px; left: 20px; }
</style>

Πως μπορώ να το τροποποιήσω έτσι ώστε όταν το ποντίκι πάει πάνω στο εικονίδιο να βγαίνει tipsy και να του λέει τι είναι το καθετί;

Σόρρυ για την ταλαιπωρία.

Είναι οκ. Λύθηκε το πρόβλημά μου. Τώρα το μενού που ήθελα να κάνω έγινε και η εμφάνιση του είναι έτσι:

Ορίστε το link να το δείτε καθαρά:

https://i.servimg.com/u/f72/18/08/45/79/7pa67w11.png

Αχ.. σόρρυ για τα πολλαπλα ποστς.. Ορίστε το screenshot που το δείχνει καθαρά: 
http://prntscr.com/1ok2w9

Απολογούμαι για τα πολλαπλά ποστς.

Tελικά βρήκα πως να το βάλω να βγαίνει σαν tipsy! Ευχαριστώ πολύ πάντως! Η βοήθειά σας ως συνήθως είναι ανεκτίμητη! Να είστε καλά..

Μπορείτε να το κλειδώσετε αν θέλετε!