[Solved]Replace IMG with Button

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

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

Απάντηση
LLeonidas
Δημοσιεύσεις: 433
Εγγραφή: 22 Ιαν 2010 14:52

[Solved]Replace IMG with Button

Δημοσίευση από LLeonidas » 10 Αύγ 2011 19:37

Έχω δεκατρείς εικόνες στη σειρά και θέλω να βάλω από κάτω τους ένα κουμπάκι που όταν το πατάς να κάνει Replace την εικόνα που βρίσκετε από πάνω του με μια άλλη .

Υπάρχει κάποιος έτοιμος κώδικας ??
Συνημμένα
a.png
κάπως έτσι να φαίνεται
Τελευταία επεξεργασία από το μέλος LLeonidas την 11 Αύγ 2011 02:12, έχει επεξεργασθεί 1 φορά συνολικά.
:(

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

[Solved]Replace IMG with Button

Δημοσίευση από gvre » 10 Αύγ 2011 20:33

Δε νομίζω να υπάρχει κάτι έτοιμο αλλά δεν είναι δύσκολο να το φτιάξεις. Θα χρειαστεί να παίξεις με CSS Positioning και z-index.

LLeonidas
Δημοσιεύσεις: 433
Εγγραφή: 22 Ιαν 2010 14:52

[Solved]Replace IMG with Button

Δημοσίευση από LLeonidas » 10 Αύγ 2011 22:57

Βασικά εμενα δεν με νοιάζει η στοιχίσει το java script θέλω , είχα ψάξει στο google αλλα βρίσκω μονο skript που κάνει hide / show .

Ψάχνω δηλαδή ένα script που με το click να αλλάζει την εικόνα από A σε B .
:(

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

[Solved]Replace IMG with Button

Δημοσίευση από Christianago » 10 Αύγ 2011 23:11

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

$("#TO ID THS EIKONAS").attr({ src: "/images/NEA EIKONA" });

LLeonidas
Δημοσιεύσεις: 433
Εγγραφή: 22 Ιαν 2010 14:52

[Solved]Replace IMG with Button

Δημοσίευση από LLeonidas » 11 Αύγ 2011 02:09

Για την ιστορία και μονο το έκανα έτσι :

<head>

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

<script type="text/javascript" src="http&#58;//www.w3schools.com/jquery/jquery.js"></script>
<script type="text/javascript">

$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
$&#40;"#img1"&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img1"&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;
$&#40;"#img2"&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img2"&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;
$&#40;"#img3"&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img3"&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;
$&#40;"#img4"&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img4"&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;
$&#40;"#img5"&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img5"&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;
$&#40;"#img6"&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img6"&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;
$&#40;"#img7"&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img7"&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;
$&#40;"#img8"&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img8"&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;
$&#40;"#img9"&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img9"&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;
$&#40;"#img10"&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img10"&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;
$&#40;"#img11"&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img11"&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;
$&#40;"#img12"&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img12"&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;
$&#40;"#img13"&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img13"&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;
&#125;&#41;;

</script>
</head>

<body>

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

<span class="red">&#9829;</span> 
<img id="img1" class="red" src="/playing_cards/001/Harts/A.png" alt="Cheating" width="75" height="107" align="middle" border="1" />
<img id="img2" class="red" src="/playing_cards/001/Harts/2.png" alt="Cheating" width="75" height="107" align="middle" border="1" />
<img id="img3" class="red" src="/playing_cards/001/Harts/3.png" alt="Cheating" width="75" height="107" align="middle" border="1" />
<img id="img4" class="red" src="/playing_cards/001/Harts/4.png" alt="Cheating" width="75" height="107" align="middle" border="1" />
<img id="img5" class="red" src="/playing_cards/001/Harts/5.png" alt="Cheating" width="75" height="107" align="middle" border="1" />
<img id="img6" class="red" src="/playing_cards/001/Harts/6.png" alt="Cheating" width="75" height="107" align="middle" border="1" />
<img id="img7" class="red" src="/playing_cards/001/Harts/7.png" alt="Cheating" width="75" height="107" align="middle" border="1" />
<img id="img8" class="red" src="/playing_cards/001/Harts/8.png" alt="Cheating" width="75" height="107" align="middle" border="1" />
<img id="img9" class="red" src="/playing_cards/001/Harts/9.png" alt="Cheating" width="75" height="107" align="middle" border="1" />
<img id="img10" class="red" src="/playing_cards/001/Harts/10.png" alt="Cheating" width="75" height="107" align="middle" border="1" />
<img id="img11" class="red" src="/playing_cards/001/Harts/J.png" alt="Cheating" width="75" height="107" align="middle" border="1" />
<img id="img12" class="red" src="/playing_cards/001/Harts/Q.png" alt="Cheating" width="75" height="107" align="middle" border="1" />
<img id="img13" class="red" src="/playing_cards/001/Harts/K.png" alt="Cheating" width="75" height="107" align="middle" border="1" />
</body>

Ευχαριστώ :)
:(

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

[Solved]Replace IMG with Button

Δημοσίευση από Christianago » 11 Αύγ 2011 02:15

ή καλυτερα:

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

for &#40;var i = 0; i < 14; i++&#41;
$&#40;"#img" + i&#41;.click&#40;function&#40;&#41;&#123; $&#40;"#img" + i&#41;.attr&#40;&#123; src&#58; "/playing_cards/001/back-red.png" &#125;&#41;; &#125;&#41;;

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

[Solved]Replace IMG with Button

Δημοσίευση από gvre » 11 Αύγ 2011 10:59

LLeonidas έγραψε:Βασικά εμενα δεν με νοιάζει η στοιχίσει το java script θέλω , είχα ψάξει στο google αλλα βρίσκω μονο skript που κάνει hide / show .

Ψάχνω δηλαδή ένα script που με το click να αλλάζει την εικόνα από A σε B .
Μπορείς αλλάζοντας μόνο το z-index ή και το left της κόκκινης κάρτας να την τοποθετήσεις πάνω από την κάρτα που θέλεις να κρύψεις (αν θα αλλάξεις μόνο το 1 ή και τα 2 εξαρτάται από την υλοποίηση που θα κάνεις) .

Απάντηση

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

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

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