Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Γεια χαρά παιδιά!
Ξεκίνησα να σχεδιάζω μερικά εικονίδια για την πάνω μπάρα και ήθελα να ρωτήσω πως θα μπορούσα να τα κάνω λίγο interactive.

Θέλω όταν περνάει από πάνω ο κέρσορας να αλλάζει το χρώμα τους...
Μπορώ να σχεδιάσω τα ίδια εικονίδια με άλλο φόντο, θα ήταν το ιδανικό έτσι ωστε να αλλάζει μόνο το χρώμα του φόντου τους.

Καλησπέρα @Gunman,
Αν θέλεις να αλλάζουν φόντο οι εικόνες θα πρέπει να έχεις φτιάξει πρώτα και δεύτερες εναλλακτικές με άλλο φόντο και μετά με το CSS μπορούμε να το φτιάξουμε. Αν απλά θέλεις να εφαρμόσεις εφέ στις επιλογές του μενού γίνεται πολύ εύκολα αυτό με CSS.

Ωραία! Φτιάχνω τώρα τα ενναλακτικά εικονίδια για να τα βάλω να εμφανίζονται όταν περνά ο κέρσορας από πάνω.. 
Μήπως μπορείς να μου πεις τον κώδικα?
Ευχαριστώ!

Επείδη μαρέσει να κοιτάω τη λειτουργικότητα σε μια σελίδα και όχι την εμφάνιση καλά είναι να αφαιρέσεις τις εικόνες και να το δουλέψεις με css. Ένας απλός κώδικας hover είναι ο παρακάτω.

Κώδικας:

.mainmenu > img:hover {
    opacity: 0.7;
}

Αν θέλεις να αλλάζει η εικόνα τότε ακόμα χειρότερα γίνεται η δουλεια, διότι όπως είπα παραπάνω κοιτάμε τι λειτουργικότητα, αυτό σημαίνει πως βάζοντας εικόνες τότε μεγαλώνει ο κώδικας του css.

O κώδικας για αλλαγή εικόνας πηγαίνοντας το κέρσορα είναι για παράδειγμα:

Κώδικας:

#i_icon_mini_portal:hover

για την Αρχική, εσυ το έχεις ειδήσεις...

Η απόφαση δική σου...

Αν αφαιρέσω τις εικόνες για να το δουλέψω με CSS πως θα είναι, να έχει γράμματα μόνο??

Ωραίο το hover, και έτσι μου αρέσει.

Για να δοκιμάσω και τις εικόνες τις εναλλακτικές που έφτιαξα είπες είναι:

"Κώδικας:Επιλογή Περιεχομένου

Κώδικας:

#i_icon_mini_portal:hover

για την Αρχική, εσυ το έχεις ειδήσεις..."

το ότι το μετονόμασα σε "Ειδήσεις"¨επιρεάζει κάπου τον κώδικα?

Μπορείς να μου πεις με ποιον τρόπο θα μπορούσα να χρησιμοποιήσω τον κώδικα για να τον δοκιμάσω??
Θα αργεί πολύ το site εννοείς αν δουλέψω με εικόνες?

ευχαριστώ!

Ναι αν το δουλέψεις με εικόνες θα αργεί μελλοντικά, όταν έχεις γεμίσει με διάφορους κώδικες τη σελίδα τότε και η κάθε λεπτομέρεια θα παίζει το ρόλο της. Αν τσεκάρεις για παράδειγμα στη δική μου σελίδα είναι με css...

το ότι το μετονόμασα σε "Ειδήσεις"¨επιρεάζει κάπου τον κώδικα?

οχι

Μπορεις να μου πεις πως χρησιμοποιώ το

Κώδικας:

#i_icon_mini_portal:hover

??


Η διαδικασία να φτιάξεις μπάρα όπως η δική σου με CSS είναι δύσκολη?
Αν τα κάνω css με τα εικονίδια της γραμμής πλοήγησης τί γίνεται για να μην επιβαρύνουν το site? απλά σβήνω τα links για να μην τα φορτώνει?

Πας στο Αρχική σελίδα - Πάνω μέρος της σελίδας & Πλοήγηση



Και στη συνεχεια δοκίμασε ένα γρήγορο μενού που σου έκανα...

Κώδικας:

.mainmenu {
    background: #fbfbfb none repeat scroll 0 0;
    border: 1px solid #777;
    border-radius: 3px;
    box-shadow: 0 0 2px #777;
    font-family: comic sans ms;
    font-size: 16px !important;
    margin: 2px;
    padding: 3px 6px 10px;
}

Κώδικας:

.mainmenu:hover {
    box-shadow: 0 0px 3px inset;
}

Όσο αν θέλεις με εικόνες αφου δοκιμάσεις αυτό που σου έδωσα μου λές αν θέλεις τις εικόνες...

Αυτή τη στιγμή το pc κολάει απίστευτα, πρέπει να έχει και 2-3 spyware θέλει καθάρισμα, και η σύνδεση επίσης σέρνεται τώρα οπότε δεν μπορώ να καταλάβω διαφορά στην απόκριση οπότε δεν μπορώ να καταλάβω τοιχόν οφέλη.
Το δοκίμασα πάντως.
Αν θες πες μου και πως βάζω τις εικόνες και όταν φορτώσει το css μου με πολλά και διάφορα μπορεί να ανατρέξω στο θέμα και να βάλω στην CSS μπάρα.

παιδιά μππορείτε να μου πείτε πως χρησιμοποιώ στην πράξη το

Κώδικας:

#i_icon_mini_portal:hover

για να αλλάζουν τα εικονίδια της πάνω μπάρας όταν περνάει ο κέρσορας από πάνω τους.

Κώδικας:

#i_icon_mini_portal:hover
{background-image: url("εικονα");
}

Για τα υπόλοιπα θα κάνεις τι ίδιο

i_icon_mini_index

i_icon_mini_register

i_icon_mini_login

Όταν κάνω hover φαίνεται οτι μάλλον αλλάζει η εικόνα (εμφανίζεται άσπρο φόντο στις άκρες της εικόνας, αλλά παραμένει η ίδια.)
Μήπως αλλάζει αλλά την "καπακώνει" η τωρινή photo?

Επίσης για hover στο εικονίδιο του logout και του no message τί γράφω?

Θα πρέπει να σβήσεις τις εικόνες και να τις βάλεις στο css.

Παράδειγμα:

Κώδικας:

img#i_icon_mini_portal {
    background: url("https://c1.staticflickr.com/1/487/18775240060_3da8aeb828_o.png");
}
img#i_icon_mini_portal:hover {
    background: url("https://c1.staticflickr.com/1/554/18957860392_6136798e69_o.png");
}


για την αποσύνδεση τί γράφω?? το logout δεν ποιάνει..

Μήπως είναι i_icon_mini_logout ???

Καλησπέρα @Gunman,

Αν δεν σου πιάνει τον κώδικα όπως στον έδωσε ο Paulos με την ονομασία της εντολής να είναι αυτή που σου υπέδειξε πιο πάνω δοκίμασε να προσθέσεις το στον κώδικα εντός της εντολής. Κάποιες φορές το χρειάζεται αυτό για να τα διαβάζει γιατί υπερισχύουν οι αρχικές ρυθμίσεις.
Δηλαδή:

Κώδικας:

img#i_icon_mini_logout {
  background: url("Image URL HERE") !important;
}
img#i_icon_mini_logout:hover {
  background: url("Image URL HERE") !important;
}

Luffy

Λοιπόν.. έχω εμφάνιση στην πάνω μπάρα μόνο εικόνες (νομίζω είναι οκ αυτό)
Έχω σβήσει μόνο το εικονίδιο της αποσύνδεσης και τα άλλα τα άφησα να τα τραβάει μέσα από το σύστημα όχι το css.
και τέλος πρόσθεσα στο css μόνο αυτό:

Κώδικας:

img#i_icon_mini_logout {
  background: url("https://c1.staticflickr.com/1/317/18938483696_8ff4a61b7a_t.jpg") !important;
}
img#i_icon_mini_logout:hover {
  background: url("https://c1.staticflickr.com/1/453/18888588038_a02f3d195b_t.jpg") !important;
}

αλλά συνεχίζει να μην ποιάνει.. 

Καλησπέρα @Gunman,

Από όσο είδα με βάση τον δικό μου υπολογιστή όλα δουλεύουν κανονικά. Εξακολουθεί να υπάρχει το πρόβλημα;

τα αντικατέστησα με png, αλλά το logout icon ακόμα δεν λειτουργεί, απλά αλλάζει το opacity από την εντολή hover που είχα, αλλά η εικόνα δεν αλλάζει στην καινούργια που του λέω μέσω της εντολής

Κώδικας:

img#i_icon_mini_logout {
  background: url("https://c1.staticflickr.com/1/317/18938483696_f0e395d25d_o.png") !important;
}
img#i_icon_mini_logout:hover {
  background: url("https://c1.staticflickr.com/1/453/18888588038_07b14b1d91_o.png") !important;
}

Ορίστε και όλο το css μου

Κώδικας:

a.mainmenu[href="/faq"] {
    display: none;
}
a.mainmenu[href="/groups"] {
    display: none;
}
a.mainmenu[href="/gallery/index.htm"] {
    display: none;
}
a.mainmenu[href="/search"] {
    display: none;
}
#logo-desc > p {
  display: none;
}
.headerbar {
  background: url(https://c1.staticflickr.com/1/407/18909772776_c39eb2783d_o.png) repeat-x !important;
}
.postprofile {
  width: 16% !important;
}
.postbody {
  width: 82% !important;
}
.mainmenu > img:hover {
    opacity: 0.7;
}
#logo img {
    height: 100px;
    width: 650px;
}
.LGlike {
  background: #85c9c7;
  border-radius: 3px;
  box-shadow: 1px 1px 1px #888;
  color: #e8e8e8;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  margin: -80px 0px 0px 1200px !important;
  padding: 5px;
  position: absolute;
  text-shadow: -1px .5px #888;
}
.LGlike:hover {opacity: 0.7;}
 .LGvote { margin: 0 5px;
fotn-size: 6px;}
 .LGnovote {
  filter:Alpha(opacity=50);
  opacity: 0.2;
  cursor: default;
  box-shadow: none;
  text-shadow: none;
 }
.LGnovote:hover {opacity:0.3;}
.postmain {position:relative;}
.LGvote{position:relative;
right:2%;
top:48px;
}
.LGlikecount {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  margin: -74px 0px 0px 1315px!important;
  opacity: .5;
}
img#i_icon_mini_logout {
  background: url("https://c1.staticflickr.com/1/317/18938483696_f0e395d25d_o.png") !important;
}
img#i_icon_mini_logout:hover {
  background: url("https://c1.staticflickr.com/1/453/18888588038_07b14b1d91_o.png") !important;
}

Θα πρέπει να αφαιρέσεις και την εικόνα που έχεις μέσα στπν CP (Πίνακα Ελέγχου).

Αφαίρεσα και την εικόνα του Logout από το CP και απλά σβήνει την εικόνα του logout και δεν δείχνει τίποτα.

@Gunman υπάρχει κάποια νέα πληροφορία σχετικά με αυτό;
Μπορείς να μας περιγράψεις γενικώς το πρόβλημα που παραμένει;

Η κατάσταση παραμένει η ίδια.

Ορίστε το css μου:

Κώδικας:

a.mainmenu[href="/faq"] {
    display: none;
}
a.mainmenu[href="/groups"] {
    display: none;
}
a.mainmenu[href="/gallery/index.htm"] {
    display: none;
}
a.mainmenu[href="/search"] {
    display: none;
}
#logo-desc > p {
  display: none;
}
.headerbar {
  background: url(https://c1.staticflickr.com/1/407/18909772776_c39eb2783d_o.png) repeat-x !important;
}
.postprofile {
  width: 16% !important;
}
.postbody {
  width: 82% !important;
}
.mainmenu > img:hover {
    opacity: 0.7;
}
#logo img {
    height: 100px;
    width: 650px;
}
.LGlike {
  background: #85c9c7;
  border-radius: 3px;
  box-shadow: 1px 1px 1px #888;
  color: #e8e8e8;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  margin: -80px 0px 0px 1000px !important;
  padding: 5px;
  position: absolute;
  text-shadow: -1px .5px #888;
}
.LGlike:hover {opacity: 0.7;}
 .LGvote { margin: 0 5px;
fotn-size: 6px;}
 .LGnovote {
  filter:Alpha(opacity=50);
  opacity: 0.2;
  cursor: default;
  box-shadow: none;
  text-shadow: none;
 }
.LGnovote:hover {opacity:0.3;}
.postmain {position:relative;}
.LGvote{position:relative;
right:2%;
top:48px;
}
.LGlikecount {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  margin: -74px 0px 0px 1115px!important;
  opacity: .5;
}
img#i_icon_mini_logout {
  background: url("https://c1.staticflickr.com/1/317/18938483696_f0e395d25d_o.png") !important;
}
img#i_icon_mini_logout:hover {
  background: url("https://c1.staticflickr.com/1/453/18888588038_07b14b1d91_o.png") !important;
}
.content.clearfix > div a {
    color: #496fe3 !important;
}
.content.clearfix > div a:hover {
    color: #6384e6 !important;
}
.content.clearfix > div a:active{
    color: #b02b27 !important;
}
.content.clearfix > div a:visited {
    color: #f5aa13!important;
}

Αν σβήσω την εικόνα του logout από τα μενού των εικόνων, απλά δεν εμφανίζει καμιά εικόνα για Logout.

Και τι αλλαγή θες να γίνεται στην εικόνα του Logout. Επειδή απ' όσο βλέπω μπορείς να κάνεις τις αλλαγές που θέλεις από τον ΠΔ.

Θέλω όταν κάνω hover να μου εμφανίζει την άλλη εικόνα που έφτιαξα.
Αυτή
https://c1.staticflickr.com/1/453/18888588038_07b14b1d91_o.png