Αλλαγή εικόνας on mouse με css

ksavvas10 · 6 Οκτωβρίου 2011

Καλησπέρα σας, θα ήθελα να σας ρωτήσω με ποίον τρόπο μπορώ να ρυθμίσω τον css κώδικα μου σε cms joomla 1.5 ώστε όταν πηγαίνει ο κέρσορας του ποντικιού πάνω απ την εικόνα είτε να εμφανίζει μία άλλη στις ίδιες διαστάσεις είτε να της αλλάζει χρώματα…

Μπορεί κάποιος να με βοηθήσει γράφωντάς μου το κομμάτι αυτό του κώδικα?? Ευχαριστώ εκ των προτέρων

cyclo · 6 Οκτωβρίου 2011

το να αλλάξεις το src attribute μιας εικόνας δεν μπορεί να γίνει με css.

αυτό που μπορείς να κάνεις ειναι να βάλεις ενα onmouseover javascript event το οποίο θα αλλάζει το src.

εναλλακτικά μπορείς να έχεις ενα block element στο οποίο να έχεις ενα fixed width/height

(έστω <div id='#tade'>)

όπου ο css κώδικας που θα χρησιμοποιήσεις να είναι ως εξής:

div#tade { background:url('../images/tade.jpg') }

div#tade:hover { background:url('../images/tade2.jpg') }

ως τόσο, ο internet explorer (ακόμα και ο 9) Δεν υποστηρίζει hover σε οτιδήποτε άλλο εκτός απο <a> elements.

επομένως αν η εικόνα σου είναι και link παράλληλα θα μπορείς να φτιάξεις κάτι τέτοιο, αν όχι... δυστυχώς θα χάσεις το crossbrowsing.

επιμένω ότι ο βέλτιστος τρόπος για να γίνει αυτό σε template το οποίο δεν έχεις δημιουργήσει εσύ είναι με javascript και αυτός είναι και ο λόγος που δεν σε πάω σε css3 με 2 εικόνες τη μία πάνω στην άλλη και opacity με -webkit-transitions

επίσης, καλό θα ήταν να μας έδειχνες και λίγο κώδικα, γιατί το να μιλάμε αόριστα...

αυτό που ζητάς γίνεται με 9 (σκέφτηκα κιόλας) διαφορετικούς τρόπους.

ksavvas10 · 6 Οκτωβρίου 2011

το να αλλάξεις το src attribute μιας εικόνας δεν μπορεί να γίνει με css.

αυτό που μπορείς να κάνεις ειναι να βάλεις ενα onmouseover javascript event το οποίο θα αλλάζει το src.

εναλλακτικά μπορείς να έχεις ενα block element στο οποίο να έχεις ενα fixed width/height

(έστω <div id='#tade'>)

όπου ο css κώδικας που θα χρησιμοποιήσεις να είναι ως εξής:

div#tade { background:url('../images/tade.jpg') }

div#tade:hover { background:url('../images/tade2.jpg') }

ως τόσο, ο internet explorer (ακόμα και ο 9) Δεν υποστηρίζει hover σε οτιδήποτε άλλο εκτός απο <a> elements.

επομένως αν η εικόνα σου είναι και link παράλληλα θα μπορείς να φτιάξεις κάτι τέτοιο, αν όχι... δυστυχώς θα χάσεις το crossbrowsing.

επιμένω ότι ο βέλτιστος τρόπος για να γίνει αυτό σε template το οποίο δεν έχεις δημιουργήσει εσύ είναι με javascript και αυτός είναι και ο λόγος που δεν σε πάω σε css3 με 2 εικόνες τη μία πάνω στην άλλη και opacity με -webkit-transitions

επίσης, καλό θα ήταν να μας έδειχνες και λίγο κώδικα, γιατί το να μιλάμε αόριστα...

αυτό που ζητάς γίνεται με 9 (σκέφτηκα κιόλας) διαφορετικούς τρόπους.

Για να καταλάβεις ακριβώς τι θέλω να κάνω, θέλω στο site www.insterea.gr να φτιάξω ένα <banner> το οποίο θα λέει ΚΑΤΑΓΓΕΛΙΕΣ και πηγαίνοντας πάνω το ποντίκι σε αυτό ο χρήστης, να αλλάζει εικόνα.. Ότι κομμάτι κώδικα χρειάζεσαι πές μου να στο στείλω.. Με css3 δεν γίνεται ποιο εύκολα αυτό?? Θέλω κάτι σαν το παράδειγμα slideshow http://css3.gr/examples/css3-transitions-1/example.html

cyclo · 7 Οκτωβρίου 2011

το θέμα δεν είναι αν γίνεται πιο εύκολα η πιο δύσκολα.

το θέμα ειναι τι θέλεις να πετύχεις...

με css3 δεν θα παίζει σε internet explorer 8.

επίσης, με πες μου που ακριβώς θες να μπει το banner να στο φτιάξω εδώ τάκα τάκα:Ρ

(ως τόσο δεν ξέρω κατα πόσο σου είναι εύκολο να πειράξεις το template..

ksavvas10 · 7 Οκτωβρίου 2011

το θέμα δεν είναι αν γίνεται πιο εύκολα η πιο δύσκολα.

το θέμα ειναι τι θέλεις να πετύχεις...

με css3 δεν θα παίζει σε internet explorer 8.

επίσης, με πες μου που ακριβώς θες να μπει το banner να στο φτιάξω εδώ τάκα τάκα:Ρ

(ως τόσο δεν ξέρω κατα πόσο σου είναι εύκολο να πειράξεις το template..

Το banner αυτό θα ήθελα να μπεί κατω απ το banner της google στην αρχική και να έχει πλάτος περίπου 490 p.x..

Στο template εκεί υπάρχει θέση ήδη κ στο αρχείο css έχω πρόσβαση.. Οπότε δεν νομίζω να αντιμετωπίσω πρόβλημα με την δημιουργία του αργότερα..

Το παράδειγμα παραπάνω που σου έδειξα είναι σε css3 και παίζει σε internet explorer 8.

cyclo · 7 Οκτωβρίου 2011

πολύ όμορφα... εγώ έχω την εξής λύση να σου προτείνω...

1) βάζεις το jquery plugin στο website σου. (μπορεί να γίνει είτε στο <head>, είτε λίγο πριν κλείσει το body, ότι θέλεις...

2) δημιουργείς ένα container βλ. παρακάτω το div class='banner-wrapper'

3) προσθέτεις την εικόνα σου μέσα στον container

4) βάζεις το style που σου αρέσει και αγαπάς

5) προσθέτεις στο document.ready τον ακόλουθο jquery κωδικα.

#Αυτή η γραμμή μπαίνει πριν το document ready

><script src="http://code.jquery.com/jquery-latest.js"></script>

#ο παρακάτω κώδικας μπαίνει ακριβώς κάτω απ το google iframe#

><style type='text/css'>
.banner-wrapper { width:490px; margin:0 auto; padding-top:15px; height:/*εδώ βάζεις το height των εικώνων */ } 
.banner-wrapper img { border:0; } 
</style>
<div class='banner-wrapper'> 
 <img src='images/over.gif' alt='banner-alt-image' />
</div>

#ο παραπάνω κώδικας μπαίνει ακριβώς κάτω απ το google iframe#

Επειδή έψαξα και δεν βρήκα document.ready στα js σου, το βάζεις όπως είναι μετά την δήλωση του jquery

#ο παρακάτω κώδικας μπαίνει στο document.ready σου#

>
$(document).ready(function() {
 
 $(function() {
   $(".banner-wrapper img")
       .mouseover(function() { 
           var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
           $(this).attr("src", src);
       })
       .mouseout(function() {
           var src = $(this).attr("src").replace("over.gif", ".gif");
           $(this).attr("src", src);
       });
 });
});

#ο παραπάνω κώδικας μπαίνει στο document.ready σου#

τώρα, έχουν γίνει 2 συμβάσεις...

πρώτον τα fixed width/heights

και δεύτερον η ονοματοδοσία των εικόνων να είναι Image.gif && Imageover.gif αντίστοιχα. αν θέλεις νομίζω είναι εύκολο να αλλάξεις ονόματα και επεκτάσεις.

ότι δεν καταλαβαίνεις, εδώ είμαστε και ρωτάς=)

Το banner αυτό θα ήθελα να μπεί κατω απ το banner της google στην αρχική και να έχει πλάτος περίπου 490 p.x..

Στο template εκεί υπάρχει θέση ήδη κ στο αρχείο css έχω πρόσβαση.. Οπότε δεν νομίζω να αντιμετωπίσω πρόβλημα με την δημιουργία του αργότερα..

Το παράδειγμα παραπάνω που σου έδειξα είναι σε css3 και παίζει σε internet explorer 8.

όσο για το παράδειγμα που μου έδειξες, περιλαμβάνει το -webkit-transition: left 2s ease;

το οποίο παίζει μονο σε webkit based browsers (safari, chrome, komodo dragon κτλ.)

δες το λίγο σε chrome να δεις πόσο όμορφο είναι το εφέ, και μετά δες το και σε οποιονδήποτε firefox/ie θέλεις και θα καταλάβεις τη διαφορά και τι εννοώ ότι ΔΕΝ ΠΑΙΖΕΙ:Ρ

ksavvas10 · 7 Οκτωβρίου 2011

Ευχαριστώ πολύ..

Δεν νομίζω να αντιμετωπίσω πρόβλημα. Θα φτιάξω και τα banner για να το δοκιμάσω και αν έχω πρόβλημα θα σε ρωτήσω!

cyclo · 7 Οκτωβρίου 2011

Ευχαριστώ πολύ..

Δεν νομίζω να αντιμετωπίσω πρόβλημα. Θα φτιάξω και τα banner για να το δοκιμάσω και αν έχω πρόβλημα θα σε ρωτήσω!

κάνε πάντως ένα κόπο να δεις πως παίζει σε chrome το effect που μου έδειξες.

και αν σου αρέσει μπορούμε να βάλουμε αυτό καλύτερα.

στο κάτω κάτω ο κανόνας λέει ότι μπορείς να κάνεις με css, το κάνεις με css. τα υπόλοιπα javascript.

Επίσης... κάτι που ξέχασα να σου πω. υπάρχει περίπτωση να δημιουργηθεί conflict μιας και απ ότι είδα στο site το jquery plugin υπάρχει και το διαχειρίζεται το joomla. αν δεν σου δουλέψει, θα πάμε στην css λύση (την οποία θα κάτσω να σου φτιάξω τώρα :Ρ)

Ευχαριστώ πολύ..

Δεν νομίζω να αντιμετωπίσω πρόβλημα. Θα φτιάξω και τα banner για να το δοκιμάσω και αν έχω πρόβλημα θα σε ρωτήσω!

>
<style type="text/css">
#banner-wrapper {
               width: 500px;
               height:45px;
               margin-top:15px;
               /* height: oso hieight 8es*/
               position: relative;
               overflow: hidden;
           }
#banner-wrapper  ul  { 
               width: 1000px;
               position: absolute; 
               left: 0;
               top: 0;
               list-style: none; padding: 0; margin: 0;

               -webkit-transition: left 2s ease; //Webkit support
               -moz-transition: left 2s ease; //firefox support
               -khtml-transition: left 2s ease;
               -ms-transition: left 2s ease;
               -o-transition: left 2s ease;

           }
           #banner-wrapper ul li  {
               float: left;
               width:468px;
           }
           #banner-wrapper ul li  {
                /*background-color:black;*/
           }
           #banner-wrapper ul li+li  {
                /*background-color:red;*/
           }
           #banner-wrapper ul:hover {
               left: -500px;
           }
#banner-wrapper ul li img { width: 500px; display:block; height: /*oso hieight 8es*/}
</style>


<div id='banner-wrapper'>
<ul>
<li> <img src='YourFirstImage' alt='Description of first image' /></li>
<li> <img src='YourSecondImage' alt='Description of Second image' /></li>
</ul>
</div>

τώρα που το σκέφτομαι αυτή η λύση είναι καλύτερη. απλά δεν λειτουργεί σε internet explorer 6,7 μιας και ο selector ul:hover δεν υπάρχει εκεί=)

ksavvas10 · 7 Οκτωβρίου 2011

Δυστυχώς σε chrome όντως δεν εμφανίζεται καλά αυτό το effect…

Με την τελευταία λύση δεν θα έχω πρόβλημα σε chrome??

cyclo · 7 Οκτωβρίου 2011

Δυστυχώς σε chrome όντως δεν εμφανίζεται καλά αυτό το effect…

Με την τελευταία λύση δεν θα έχω πρόβλημα σε chrome??

ο κώδικας απ στο post #8 είναι css3 κώδικας κομμένος και ραμμένος στα μέτρα της σελίδας σου. τον παίρνεις, τον κάνεις copy paste εκεί που θες. και δουλεύει, με υποστήριξη στους modern browsers.

απλά προσοχή στο width του li. πρέπει ο container να χωράει ακριβώς 2 li των 500px

αυτή τη στιγμή στα έχω κόψει 500px τα li +1000px ο container, ρύθμισέ τα όπως νομίζεις. έκανα δοκιμές πάνω στο site σου και παίζει κανονικά.

ksavvas10 · 7 Οκτωβρίου 2011

ο κώδικας απ στο post #8 είναι css3 κώδικας κομμένος και ραμμένος στα μέτρα της σελίδας σου. τον παίρνεις, τον κάνεις copy paste εκεί που θες. και δουλεύει, με υποστήριξη στους modern browsers.

απλά προσοχή στο width του li. πρέπει ο container να χωράει ακριβώς 2 li των 500px

αυτή τη στιγμή στα έχω κόψει 500px τα li +1000px ο container, ρύθμισέ τα όπως νομίζεις. έκανα δοκιμές πάνω στο site σου και παίζει κανονικά.

Ok ευχαριστώ πολύ.. θα τα δοκιμάσω..

cyclo · 7 Οκτωβρίου 2011

#banner

http://www.esolutions.gr/FreeHosting/first.png

#mouseover

http://www.esolutions.gr/FreeHosting/second.png

#transition

http://www.esolutions.gr/FreeHosting/transition.png

ελπίζω να βοήθησα.

ksavvas10 · 7 Οκτωβρίου 2011

#banner

http://www.esolutions.gr/FreeHosting/first.png

#mouseover

http://www.esolutions.gr/FreeHosting/second.png

#transition

http://www.esolutions.gr/FreeHosting/transition.png

ελπίζω να βοήθησα.

Δεν γίνεται σε chrome να εμφανίζεται το effect όπως σε Mozilla?? Δηλ. να μην περνάει καθόλου απ την κατάσταση transition??

Δοκίμασα κ με τον πρώτο τρόπο γράφοντας σε ένα php module το παρακάτω αλλα δεν δούλεψε..

><script src="http://code.jquery.com/jquery-latest.js">
$(document).ready(function() {
 
 $(function() {
   $(".banner-wrapper img")
       .mouseover(function() { 
           var src = $(this).attr("src").match(/[^\.]+/) + "http://www.insterea.gr/images/imageover.gif";
           $(this).attr("src", src);
       })
       .mouseout(function() {
           var src = $(this).attr("src").replace("http://www.insterea.gr/images/imageover.gif", "http://www.insterea.gr/images/image.gif");
           $(this).attr("src", src);
       });
 });
});
</script>
<style type='text/css'>
.banner-wrapper { width:400px; margin:0 auto; padding-top:15px; height: 300px; } 
.banner-wrapper img { border:0; } 
</style>
<div class='banner-wrapper'> 
 <img src='http://www.insterea.gr/images/imageover.gif' alt='banner-alt-image' />
</div>

Τι γίνετε λαθος??

cyclo · 7 Οκτωβρίου 2011

τα πάντα γίνονται:Ρ

ο κώδικας του μετατρέπεται ως εξής:

><style type="text/css">
#banner-wrapper {
               width: 500px;
               height:45px;
               margin-top:15px;
               /* height: oso hieight 8es*/
               position: relative;
               overflow: hidden;
           }
#banner-wrapper  ul  { 
               width: 1000px;
               position: absolute; 
               left: 0;
               top: 0;
               list-style: none; padding: 0; margin: 0;
           }
           #banner-wrapper ul li  {
               float: left;
               width:468px;
           }
           #banner-wrapper ul:hover {
               left: -500px;
           }
#banner-wrapper ul li img { width: 500px; display:block; height: /*oso hieight 8es*/}
</style>

<div id='banner-wrapper'>
<ul>
<li> <img src='YourFirstImage' alt='Description of first image' /></li>
<li> <img src='YourSecondImage' alt='Description of Second image' /></li>
</ul>
</div>

επίσης πρέπει να κάτσεις να ρυθμίσεις τα widths/heights έτσι;

απλά τώρα τι συμβαίνει; όλα αυτά καλύτερα είναι να έχεις κάποιες βασικές γνώσεις. με το να βρήσκεις κομμάτια κώδικα στο internet ή να σου postarw εγώ 2 σαχλαμπούχλες και εσύ να τις ανεβάζεις στο site δεν γίνεται δουλειά έτσι. αν ασχολείσαι για hobby ή να για να περνάς την ώρα σου πάσο, αλλά επαγγελματική δουλειά δεν πρόκειται να κάνεις.

προσωπικά για να βάλω εγώ κάτι τέτοιο σε site απο πελάτη μου, μπορεί να χρειαστώ 2 μέρες δουλειάς.

τέλος πάντων. αυτή είναι η ταπεινή μου άποψη.

ksavvas10 · 8 Οκτωβρίου 2011

επίσης πρέπει να κάτσεις να ρυθμίσεις τα widths/heights έτσι;

απλά τώρα τι συμβαίνει; όλα αυτά καλύτερα είναι να έχεις κάποιες βασικές γνώσεις. με το να βρήσκεις κομμάτια κώδικα στο internet ή να σου postarw εγώ 2 σαχλαμπούχλες και εσύ να τις ανεβάζεις στο site δεν γίνεται δουλειά έτσι. αν ασχολείσαι για hobby ή να για να περνάς την ώρα σου πάσο, αλλά επαγγελματική δουλειά δεν πρόκειται να κάνεις.

προσωπικά για να βάλω εγώ κάτι τέτοιο σε site απο πελάτη μου, μπορεί να χρειαστώ 2 μέρες δουλειάς.

τέλος πάντων. αυτή είναι η ταπεινή μου άποψη.

Για να καταλάβεις,

Πριν λίγο καιρό τελείωσα ένα πανεπιστήμιο πληροφορικής αλλά δεν είχαμε δει καθόλου ούτε javascript ούτε css3 ουτε καν php.. Μόνο λίγο από hxtml και κάτι πολύ απλά γενικά… Γενικά και αυτά που ξέρω από μόνος μου εντελώς έχω ασχοληθεί.. Αλλά αν δεν κάνεις κάτι επαγγελματικά για να ασχολείσαι συνέχεια και σοβαρά με αυτό δεν το μαθαίνεις ποτέ… Τεσ-πα, ευχαριστώ για τις πληροφορίες.. Το έχω δοκιμάσει σε αρχεία στο pc μου και μόλις έχω έτοιμα τα banner θα τα βάλω στο site!

Σύνδεση

Αλλαγή εικόνας on mouse με css

Προτεινόμενες αναρτήσεις

ksavvas10

cyclo

ksavvas10

cyclo

ksavvas10

cyclo

ksavvas10

cyclo

ksavvas10

cyclo

ksavvas10

cyclo

ksavvas10

cyclo

ksavvas10

Αρχειοθετημένο

Σύνδεση