Αnimation Gif στην κατάσταση "Hover"

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Kopame73
Δημοσιεύσεις: 78
Εγγραφή: 06 Απρ 2007 18:23

Αnimation Gif στην κατάσταση "Hover"

Δημοσίευση από Kopame73 » 28 Μάιος 2016 20:10

Προσπάθησα να βάλω ένα "animation gif" να παίξει σε css στην κατάσταση "hover" αλλά συμβαίνει το εξής:

Να πω πρώτα οτι το animation gif είναι ρυθμισμένο από το "Fireworks" να παίζει μία φορά και όχι να κάνει looping forever ,επίσης το animation περιέχει 4 "stage".

Όταν το mouse περνά πάνω από το κουμπί του μενού την πρώτη φορά το animation παίζει μια φορά και σταματάει, αν το mouse φύγει έξω από το κουμπί και ξαναπεράσει από πάνω του παίζει το τελευταίο stage του animation(δεν υπάρχει κίνηση).Οσες φορές βγει έξω από το κουμπί το mouse και ξαναπεράσει από πάνω του συμβαίνει το ίδιο.

Προσπάθησα να βάλω το ίδιο animation gif σαν "swap image" από τα "Behaviors" του Dreamweaver και βλέπω ότι παίζει κανονικά(μια φορά πάντα) όσες φορές το Mouse περάσει και φύγει από το κουμπί.


Ο κώδικας Css:
.menu_cell_1 {
height: 30px;
width: 100px;
background-color: #FFF;
text-align: center;
background-image: url(image.gif);
}
.menu_cell_1:hover{
height: 30px;
width: 100px;
background-image: url(image_animation.gif);

Υπάρχει κάποια λύση ωστε το "animation gif" να παίζει πάλι όταν απομακρυνθεί και ξαναπεράσει από πάνω του το mouse;

Kopame73
Δημοσιεύσεις: 78
Εγγραφή: 06 Απρ 2007 18:23

Αnimation Gif στην κατάσταση "Hover"

Δημοσίευση από Kopame73 » 28 Μάιος 2016 20:11

Δεν ξέρω αν σας έδωσα να καταλάβετε

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Αnimation Gif στην κατάσταση "Hover"

Δημοσίευση από sibas » 30 Μάιος 2016 08:34

πρέπει να το κάνεις με js
πχ με jquery

Κώδικας: Επιλογή όλων

$(function() {
    $('.menu_cell_1').hover(function() {
      $(this).attr('src','http://fullpath/image_animation.gif');
    },function() {
      $(this).attr('src','http://fullpath/image.gif');
    }
});

Kopame73
Δημοσιεύσεις: 78
Εγγραφή: 06 Απρ 2007 18:23

Αnimation Gif στην κατάσταση "Hover"

Δημοσίευση από Kopame73 » 30 Μάιος 2016 10:35

Ευχαριστώ

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες