Χρήση javascript σε submit buttons

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

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

Απάντηση
Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Χρήση javascript σε submit buttons

Δημοσίευση από dimos_mitel » 01 Ιουν 2012 14:56

Καλησπέρα σε όλους. Έχω τα παρακάτω submit buttons τα οποία τα χρησιμοποιώ στην πλοήγηση της σελίδας μου. Θέλω όταν πηγαίνω τον κέρσορα πάνω (onmouseover) σε ένα από αυτά να αλλάζει χρώμα και να εμφανίζεται δεξιά του μια μικρή εικόνα στο ύψος του submit button. Πώς θα μπορούσα να το κάνω αυτό; Δώστε μου ένα παράδειγμα σε ένα από αυτά και να το προσαρμόσω και στα υπόλοιπα.

Ευχαριστώ προκαταβολικά! ;)

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

 echo '<input type="submit" name="x" value="Καταχώρηση Φύλλο Αγώνα" class="x"><br><br>
       <input type="submit" name="x" value="Εμφάνιση Φύλλων Αγώνα" class="x"><br><br>
       <input type="submit" name="x" value="Διαχείριση Φύλλων Αγώνα" class="x"><br><br>
       <input type="submit" name="x" value="Διαχείριση Παικτών" class="x"><br /><br />
       <input type="submit" name="x" value="Διαχείριση Ομάδων" class="x"><br /><br />
       <input type="submit" name="x" value="Επεξεργασία των στοιχείων μου" class="x"><br /><br />
       <input type="submit" name="x" value="Αλλαγή Password" class="x"><br /><br />
       <input type="submit" name="x" value="Διαχείριση Διαχειριστών" class="x">';&#125;
[/code]
miteletsis

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

Χρήση javascript σε submit buttons

Δημοσίευση από alou » 01 Ιουν 2012 18:02

Θα βάλεις ένα id στα input σου και θα κάνεις αυτό που θες με css

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

<input id="first" type="submit" name="x" value="Καταχώρηση Φύλλο Αγώνα" class="x">
και στο css

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

input#first, input#second klp klp &#123;padding-right&#58;30px;&#125; //περιθώριο δεξιά, για να έχεις το περιθώριο στο hover να βάλεις την εικόνα που θες
input#first&#58;hover &#123;background&#58;url&#40;'path/eikona.png'&#41; #dadada;&#125; // το πρώτο κομμάτι είναι η εικόνα και το δεύτερο το χρώμα

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Χρήση javascript σε submit buttons

Δημοσίευση από dimos_mitel » 01 Ιουν 2012 23:06

Στο παράδειγμα που μου είπες με css, αντί η εικόνα να εμφανίζεται δεξιά του submit button εμφανίζεται μέσα στο κουμπί αντί του χρώματος! Πάντως υπάρχει λόγος που θέλω να γίνει με javascript καθώς μένει να προσθέσω λίγη javascript στην εργασία μου και την τελειώνω.
miteletsis

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

Χρήση javascript σε submit buttons

Δημοσίευση από alou » 02 Ιουν 2012 11:15

Οκ βάλε όλο το input σε span αφού θες έξω την εικόνα και χρησιμοποίησε τα ίδια css rules στο span

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

<span id="first"><input ... </span>
Και στο css κάνεις πάνω κάτω τα ίδια.

Αν πρέπει οπωσδήποτε να κάνεις κάτι με javascript (γενικά δεν προτιμάς να κάνεις με js αυτά που μπορείς να κάνεις με css), θα το κάνεις κάπως έτσι:

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

function changeBg&#40;&#41;
&#123; document.getElementById&#40;"first"&#41;.style.backgroundImage="url&#40;...&#41;"; &#125;

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

<span id="first"><input onfocus="changeBg" id="first" type="submit" name="x" value="Καταχώρηση Φύλλο Αγώνα" class="x"> </span>
Όμως θα σου πρότεινα να τα κάνεις με css αυτά και σκέψου κάτι άλλο με javascript, π.χ. στο onfocus να βγαίνει σε κάποιο element κάποια οδηγία για τη συμπλήρωση του πεδίου, ας πούμε

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

<span id="firstInstr"></span><br />
<span id="first"><input onfocus="showInstructions" id="first" type="submit" name="x" value="Καταχώρηση Φύλλο Αγώνα" class="x"> </span>

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

function showInstructions&#40;&#41;
&#123; appendText&#40;document.getElementById&#40;'firstInstr'&#41;,'Sto fyllo agwna kante auto'&#41;;  &#125;

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Χρήση javascript σε submit buttons

Δημοσίευση από dimos_mitel » 02 Ιουν 2012 16:06

Θα προσπαθήσω να το κάνω έτσι και θα σου πω τα αποτελέσματα.. ευχαριστω! ;)
miteletsis

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Χρήση javascript σε submit buttons

Δημοσίευση από dimos_mitel » 09 Ιουν 2012 21:37

Καλησπέρα και πάλι, αυτό το θέμα το είχα αφήσει λίγο καιρό. Λοιπόν, έχω καταφέρει να αλλάζει χρώμα το text του button αλλά θέλω η εικόνα να εμφανίζεται ακριβώς δεξιά του και όχι από πάνω του όπως γίνεται με το span. Πώς μπορώ η εικόνα μου να εμφανίζεται στα δεξιά του button και όχι από πάνω του;

Συνάρτηση:

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

<script language="javascript" type="text/javascript">
function changeFontColor&#40;newFontColor, elementId&#41;
&#123;

document.getElementById&#40;elementId&#41;.style.color = newFontColor;
document.getElementById&#40;elementId&#41;.style.backgroundImage="url&#40;images/04.jpg&#41;";

&#125;


  </script> 
και ένα button ενδεικτικά:

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

<span id="id1"><br /><br /><input type="submit" name="x" value="Καταχώρηση Φύλλο Αγώνα" class="x" id="id1" onmouseover="changeFontColor&#40;'red', 'id1'&#41;;" onmouseout="changeFontColor&#40;'yellow', 'id1'&#41;;" onmouseout="normalImg&#40;this&#41;;"  
"></span>
[/code]
miteletsis

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

Χρήση javascript σε submit buttons

Δημοσίευση από Christianago » 10 Ιουν 2012 00:33

Χωρις να καταλαβαινω απολυτα τι θες, εννοεις κατι τετοιο;

JS

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

<script type="text/javascript" src="http&#58;//code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">

function changeFontColor&#40;newFontColor, elementId&#41;&#123;
document.getElementById&#40;elementId&#41;.style.color = newFontColor;
&#125;

function toggleImage&#40;what&#41;&#123;
    
if &#40;what == 'over'&#41;
$&#40;'#img1'&#41;.attr&#40;"src","imageURL"&#41;;
else $&#40;'#img1'&#41;.attr&#40;"src",""&#41;;
&#125;
HTML

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

<input type="submit" name="x" value="Καταχώρηση Φύλλο Αγώνα" class="x" id="sub1"
onmouseover="changeFontColor&#40;'red', 'sub1'&#41;; toggleImage&#40;'over'&#41;" onmouseout="changeFontColor&#40;'yellow', 'sub1'&#41;; toggleImage&#40;'out'&#41;" />
<img id="img1" height="50px" width="50px" />

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Χρήση javascript σε submit buttons

Δημοσίευση από dimos_mitel » 10 Ιουν 2012 10:35

Ναι δουλεύει!, απλά δεν είναι ακριβώς δίπλα και είναι λίγο ποιο πάνω από το button. Επίσης ένα άλλο κακό είναι ότι όταν δεν έχω τον δείκτη του ποντικιού πάνω στο button εμφανίζεται πάλι το τετραγωνάκι της εικόνας που δείχνει ότι δεν βρέθηκε.
miteletsis

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

Χρήση javascript σε submit buttons

Δημοσίευση από Christianago » 10 Ιουν 2012 10:40

Μπορεις να καθορισεις το υψος της εικονας ωστε οταν εμφανιζεται/εξαφανιζεται να μην υπαρχει καμια μετατοπιση
του κουμπιου ή/και αντι να εχεις το τετραγωνάκι της εικόνας που δείχνει ότι δεν βρέθηκε να εχεις απο την αρχη μια κενη ασπρη εικονα
ή ο,τι χρωμα ειναι το background της σελιδας σου και απλα να κανεις hide/show στο img.

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Χρήση javascript σε submit buttons

Δημοσίευση από dimos_mitel » 10 Ιουν 2012 11:30

Ψάχνω αυτά που μου είπες, δοκίμασα να βάλω μέχρι και paddding αλλά τίποτα. Δεν έχω καταφέρει να βάλω την εικόνα ακριβώς δίπλα από το button. Κάθε φορά που μεταβαίνω σε μια άλλη σελίδα αλλάζει θέση και η εικόνα καθώς δεν είναι σταθερή.
miteletsis

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

Χρήση javascript σε submit buttons

Δημοσίευση από Christianago » 10 Ιουν 2012 11:43

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

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

<table><tr><td>
<input type="submit" name="x" value="Καταχώρηση Φύλλο Αγώνα" class="x" id="sub1"
onmouseover="changeFontColor&#40;'red', 'sub1'&#41;; toggleImage&#40;'over'&#41;" onmouseout="changeFontColor&#40;'yellow', 'sub1'&#41;; toggleImage&#40;'out'&#41;" /></td>
<td><img id="img1" height="50px" width="50px"  /></td></tr></table>
Θελεις να ειναι κολλητα το submit με την εικονα;

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Χρήση javascript σε submit buttons

Δημοσίευση από dimos_mitel » 10 Ιουν 2012 11:47

Ναι, έχω 6 submit button σαν Navigation bar και θέλω όταν πηγαίνω τον δείκτη του ποντικιού στο καθένα από αυτά να εμφανίζεται δεξιά του και μια εικόνα ταυτόχρονα με την αλλαγή χρώματος.
miteletsis

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Χρήση javascript σε submit buttons

Δημοσίευση από dimos_mitel » 10 Ιουν 2012 11:53

Με table είναι πολύ καλύτερα τα πράγματα! Κάπως έτσι θα κινηθώ. Απλά τώρα το τελευταίο που με μπερδεύει είναι πως δεν θα εμφανίζεται η εικόνα που δειχνει ότι δεν βρέθηκε εικόνα, μου εξήγησες αλλά δεν μπόρεσα να το κάνω. Πώς θα πω αντί να μου εμφανίσει αυτή την εικόνα να μου εμφανίσει το background-color που υπάρχει στο κομμάτι που βρίσκονται το navigation bar.
miteletsis

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

Χρήση javascript σε submit buttons

Δημοσίευση από Christianago » 10 Ιουν 2012 12:05

Μεσα στο φακελο με τις εικονες σου, φτιαξε μια εικονα με χρωμα ιδιο με το χρωμα του background της σελιδας σου.

HTML

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

<table><tr><td>
<input type="submit" name="x" value="Καταχώρηση Φύλλο Αγώνα" class="x" id="sub1"
onmouseover="changeFontColor&#40;'red', 'sub1'&#41;; toggleImage&#40;'over'&#41;" onmouseout="changeFontColor&#40;'yellow', 'sub1'&#41;; toggleImage&#40;'out'&#41;" /></td>
<td><img id="img1" height="50px" width="50px" src="empty.png" /></td></tr></table>
JS

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

<script type="text/javascript" src="http&#58;//code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">

function changeFontColor&#40;newFontColor, elementId&#41;&#123;
document.getElementById&#40;elementId&#41;.style.color = newFontColor;
&#125;

function toggleImage&#40;what&#41;&#123;
    
if &#40;what == 'over'&#41;
$&#40;'#img1'&#41;.attr&#40;"src","yourIMAGEURL"&#41;;
else $&#40;'#img1'&#41;.attr&#40;"src","empty.png"&#41;;
&#125;

</script> 

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Χρήση javascript σε submit buttons

Δημοσίευση από dimos_mitel » 10 Ιουν 2012 12:13

Οκ! Με έσωσες πάλι! Σε ευχαριστώ πολύ ;) Καλή συνέχεια
miteletsis

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

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

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