αλλη εικόνα στο cursor

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

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

Απάντηση
Άβαταρ μέλους
wwf
Δημοσιεύσεις: 593
Εγγραφή: 16 Οκτ 2005 15:13
Τοποθεσία: THESS
Επικοινωνία:

αλλη εικόνα στο cursor

Δημοσίευση από wwf » 03 Φεβ 2015 10:19

Γεια σας
έχω μια απορία σχετικά με τον αν μπορεί με ενα κλικ να αλλάζει ο κέρσορας του ποντικιού στο site.

έχω κάνει το παρακάτω...

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

<style>

.kersoras-link &#123;
    font-size&#58; 16px;
    text-align&#58; center;
    
&#125;
div.kersoras-link&#58;hover&#123;
   cursor&#58;url&#40;http&#58;//www.resiprocate.org/images/8/81/Symbol-warning-small.png&#41;, progress !important;
&#125;

 
</style>
</head>
<body>




<div class="kersoras-link"><span>Link 1</span></div>

αλλα αυτο που κάνει αυτο ειναι με hover να αλλάζει μονο πανω στο link μπορει να αλλάζει σε ολο το site?
αν ναι πως?

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

αλλη εικόνα στο cursor

Δημοσίευση από alou » 03 Φεβ 2015 11:05

Αυτό που έκανες στο kersoras-link:hover κάντο στο body

body {cursor: url(...

Άβαταρ μέλους
wwf
Δημοσιεύσεις: 593
Εγγραφή: 16 Οκτ 2005 15:13
Τοποθεσία: THESS
Επικοινωνία:

αλλη εικόνα στο cursor

Δημοσίευση από wwf » 03 Φεβ 2015 11:18

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

auto move no-drop col-resize
all-scroll pointer not-allowed row-resize
κλπ κλπ

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

 <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>

<script type='text/javascript'>//<!&#91;CDATA&#91; 
$&#40;window&#41;.load&#40;function&#40;&#41;&#123;
        
        $&#40;".targetClass"&#41;.click&#40;function &#40;&#41; &#123;
            $&#40;'#loaderImage'&#41;.show&#40;&#41;;
            //this is the line i add
            $&#40;'*'&#41;.css&#40;'cursor','move'&#41;;                
        &#125;&#41;;

&#125;&#41;;//&#93;&#93;>  

</script>

    <div style="background&#58; #000000;
	width&#58; 50px;
	height&#58; 54px;
	margin&#58; 100px;
	position&#58; static;
	left&#58; 79px;
	top&#58; 28px;" class="targetClass"></div>

<FORM>
<INPUT TYPE="button" onClick="history.go&#40;0&#41;" VALUE="Restart">
</FORM>

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

αλλη εικόνα στο cursor

Δημοσίευση από alou » 03 Φεβ 2015 11:37

body.cursorImg {cursor:url( .... }

Θα βάλεις ένα κουμί με id="toggleImage" και ένα jQuery fn κάπως έτσι

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

$&#40;'#toggleImage'&#41;.on&#40;'click', function&#40;&#41; &#123;
 $&#40;'body'&#41;.toggleClass&#40;'corsorImg'&#41;;
&#125;



Άβαταρ μέλους
wwf
Δημοσιεύσεις: 593
Εγγραφή: 16 Οκτ 2005 15:13
Τοποθεσία: THESS
Επικοινωνία:

αλλη εικόνα στο cursor

Δημοσίευση από wwf » 03 Φεβ 2015 11:56

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

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

αλλη εικόνα στο cursor

Δημοσίευση από alou » 03 Φεβ 2015 12:43

Δες εδώ, το παράδειγμα είναι με cursor:pointer εσύ θα βάλεις ότι θες

http://jsfiddle.net/andreasloukakis/cgc9g7ad/

Άβαταρ μέλους
wwf
Δημοσιεύσεις: 593
Εγγραφή: 16 Οκτ 2005 15:13
Τοποθεσία: THESS
Επικοινωνία:

αλλη εικόνα στο cursor

Δημοσίευση από wwf » 03 Φεβ 2015 19:00

Πωωω σε ευχαριστώ πολυ
και για τον χρόνο σου....

αν βάλω

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

div.cursorImg &#123;cursor&#58;url&#40;http&#58;//www.resiprocate.org/images/8/81/Symbol-warning-small.png&#41;,url&#40;myBall.cur&#41;,auto;&#125;
θα μπορώ να βάζω και εικόνα σωστά?

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

αλλη εικόνα στο cursor

Δημοσίευση από alou » 03 Φεβ 2015 20:26

ναι οχι ακριβώς έτσι όμως

http://jsfiddle.net/cgc9g7ad/1/

Άβαταρ μέλους
wwf
Δημοσιεύσεις: 593
Εγγραφή: 16 Οκτ 2005 15:13
Τοποθεσία: THESS
Επικοινωνία:

αλλη εικόνα στο cursor

Δημοσίευση από wwf » 17 Φεβ 2015 15:17

να κανω ακομα μια ερώτηση?
γίνετε οταν πατάω κλικ να αλλάζει κ το κουμπί?
δλδ να ειναι ενα κουμπι με εικονα on και ενα me off
κατι σαν αυτο
http://www.designchemical.com/lab/jquer ... _click.htm

http://www.designchemical.com/blog/inde ... ing-click/

Άβαταρ μέλους
wwf
Δημοσιεύσεις: 593
Εγγραφή: 16 Οκτ 2005 15:13
Τοποθεσία: THESS
Επικοινωνία:

αλλη εικόνα στο cursor

Δημοσίευση από wwf » 20 Φεβ 2015 19:15

τελικά οπως κ να το δοκίμασα δεν δουλεύει
καμία πρόταση?

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

αλλη εικόνα στο cursor

Δημοσίευση από alou » 21 Φεβ 2015 09:35

Απλά θα κάνεις αλλαγή σε 2 classes, μία για το κάθε σύμβολο

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

$&#40;'div'&#41;.toggleClass&#40;'startImg'&#41;.toggleClass&#40;'stopImg'&#41;;
έχοντας ορίσει στην κάθε μία την αντίστοιχη εικόνα βέβαια

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

div.startImg &#123;cursor&#58;url&#40;http&#58;//az343058.vo.msecnd.net/icons/go_white.jpg&#41;,auto;&#125;

div.stopImg &#123;cursor&#58;url&#40;http&#58;//findicons.com/files/icons/2015/24x24_free_application/24/stop_sign.png&#41;,auto;&#125;
http://jsfiddle.net/ux8vhq30/

Απάντηση

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

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

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