Εισαγωγή εικόνας μέσω Javascript

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

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

Απάντηση
kosmas
Δημοσιεύσεις: 75
Εγγραφή: 16 Ιουν 2007 17:01

Εισαγωγή εικόνας μέσω Javascript

Δημοσίευση από kosmas » 18 Ιουν 2007 17:36

Γειά σας !

Το πρόβλημα μου αυτή τη φορά είναι ότι θέλω μέσω της onMouseOver να μου εμφανιστεί μία εικόνα σε ένα συγκεκριμένο κελί. Δυστηχώς παρόλο που προσπάθησα αρκετά δεν τα έχω καταφέρει... Σας στέλνω κ το κώδικα (html και script) μήπως και βγάλετε άκρη...

Ευχαριστώ πολύ! :wink:

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

<html>

<head>
 
 <link
 rel="stylesheet"
 href="stylesheet.css"
 type="text/css">

 <SCRIPT LANGUAGE="JAVASCRIPT" src="scripts.js">
 <!--
 //-->
 </SCRIPT>

</head>


<body class="scroll1">

<br> <br> <br>

  <center>
  <table border="1" cellpadding="0" cellspacing="0" style="border-width&#58;0; border-collapse&#58; collapse; " bordercolor="#111111" width="900" id="AutoNumber1">
  <tr>
    <td height="80" width="900" colspan="3" bgcolor="#FFFFFF" style="border-top&#58;medium none #111111; border-left-style&#58;none; border-left-width&#58;medium; border-right-style&#58;none; border-right-width&#58;medium; border-bottom-style&#58;none; border-bottom-width&#58;medium">
    <p align="center"><font face="Britannic Bold" size="5">Εργαστήριο</font></td>
  </tr>
  <tr>
    <td height="25" width="180" bgcolor="#FFFFFF" align="center" style="border-left&#58; medium none #111111; border-top-style&#58; none; border-top-width&#58; medium; border-bottom-style&#58; none; border-bottom-width&#58; medium; border-right-style&#58;none; border-right-width&#58;medium" onMouseover="this.bgColor='#ccff99'" onMouseout="this.bgColor='#FFFFFF'">
    <font size="2">Αρχική Σελίδα</font></td>
    <td height="175" rowspan="7" width="450" bgcolor="#FFFFFF" id="iddeiktis2" style="border-style&#58;none; border-width&#58;medium; ">&nbsp;</td>
    <td height="25" width="270" bgcolor="#CCCC00" style="border-left-style&#58; none; border-left-width&#58; medium; border-right&#58; medium none #111111; border-top-style&#58; none; border-top-width&#58; medium; border-bottom-style&#58; none; border-bottom-width&#58; medium">
    <p align="center"><font size="2">Νέα - Ανακοινώσεις</font></td>
  </tr>
  <tr>
    <td height="25" width="180" bgcolor="#FFFFFF" align="center" style="border-left&#58; medium none #111111; border-bottom-style&#58; none; border-bottom-width&#58; medium; border-top-style&#58;none; border-top-width&#58;medium; border-right-style&#58;none; border-right-width&#58;medium" onMouseover="this.bgColor='#ccff99'" onMouseout="this.bgColor='#FFFFFF'"> <a href="javascript&#58;void&#40;0&#41;" class="link1" onclick="allaxeto&#40;&#41;"> 
    <font size="2">Εργασίες </font> </a> </td>
    <td height="375" rowspan="7" width="270" bgcolor="#FFFFFF" style="border-left-style&#58; none; border-left-width&#58; medium; border-right&#58; medium none #111111; border-bottom&#58; medium none #111111; border-top-style&#58;none; border-top-width&#58;medium">&nbsp;</td>
  </tr>
  <tr>
    <td height="25" width="180" bgcolor="#FFFFFF" align="center" style="border-left&#58; medium none #111111; border-bottom-style&#58; none; border-bottom-width&#58; medium; border-top-style&#58;none; border-top-width&#58;medium; border-right-style&#58;none; border-right-width&#58;medium">&nbsp;</td>
  </tr>
  <tr>
    <td height="25" width="180" bgcolor="#FFFFFF" align="center" style="border-left&#58; medium none #111111; border-bottom-style&#58; none; border-bottom-width&#58; medium; border-top-style&#58;none; border-top-width&#58;medium; border-right-style&#58;none; border-right-width&#58;medium">&nbsp;</td>
  </tr>
  <tr>
    <td height="25" width="180" bgcolor="#FFFFFF" align="center" style="border-left&#58; medium none #111111; border-bottom-style&#58; none; border-bottom-width&#58; medium; border-top-style&#58;none; border-top-width&#58;medium; border-right-style&#58;none; border-right-width&#58;medium">&nbsp;</td>
  </tr>
  <tr>
    <td height="25" width="180" bgcolor="#FFFFFF" align="center" style="border-left&#58; medium none #111111; border-bottom-style&#58; none; border-bottom-width&#58; medium; border-top-style&#58;none; border-top-width&#58;medium; border-right-style&#58;none; border-right-width&#58;medium">&nbsp;</td>
  </tr>
  <tr>
    <td height="25" width="180" bgcolor="#FFFFFF" align="center" style="border-left&#58; medium none #111111; border-bottom-style&#58; none; border-bottom-width&#58; medium; border-top-style&#58;none; border-top-width&#58;medium; border-right-style&#58;none; border-right-width&#58;medium">&nbsp;</td>
  </tr>
  <tr>
    <td height="225" width="180" bgcolor="#FFFFFF" id="iddeiktis" style="border-left&#58; medium none #111111; border-bottom-style&#58; none; border-bottom-width&#58; medium; border-right-style&#58;none; border-right-width&#58;medium; border-top-style&#58;none; border-top-width&#58;medium"> </td>
    <td height="225" width="450" bgcolor="#0099CC" id="iddeiktis1" style="border-left-style&#58; none; border-left-width&#58; medium; border-top-style&#58; none; border-top-width&#58; medium; border-bottom&#58; medium none #111111; border-right-style&#58;none; border-right-width&#58;medium"> </td>
  </tr>
</table></center>

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

function allaxeto&#40;&#41; 
&#123; 
var MyElement = document.getElementById&#40;"iddeiktis"&#41;; 
MyElement.innerHTML = "<p> <ul> <li> <div onclick=allaxeto2&#40;&#41;> <font size=2> Φυσικοί Δομικοί </font> <br> <font size=2> Λίθοι </font> </div> <br> <li> <font size=2> Εμβιομηχανική </font> </ul> </p> ";                        
return true; 
&#125; 




function allaxeto2&#40;&#41; 
&#123; 
var MyElement1 = document.getElementById&#40;"iddeiktis1"&#41;; 
MyElement1.innerHTML = "<p> <ul> <li> <div onMouseOver=allaxeto3&#40;&#41;> <font size=2> Η Επίδραση των Ραβδώσεων στη Μηχανική Συμπεριφορά των Αρχαίων Κιόνων. </font> </div> <li> <font size=2> Κάμψη Θραυσμένων Επιστυλίων Συγκολλημένων με Ράβδους Τιτανίου. Αριθμητική Ανάλυση με Πεπερασμένα Στοιχεία. </font> </ul> </p> ";                         
return true; 
&#125; 




function allaxeto3&#40;&#41; 
&#123; 
var MyElement2 = document.getElementById&#40;"iddeiktis2"&#41;; 
MyElement2.innerHTML="";  &#91;b&#93;//Εδώ θέλω να βάλω <img src="...."> αλλά δεν το πετυχαίνω                       &#91;/b&#93;return true; 
&#125; 

Άβαταρ μέλους
ALKIVIADES
Honorary Member
Δημοσιεύσεις: 1322
Εγγραφή: 07 Απρ 2005 03:39

Εισαγωγή εικόνας μέσω Javascript

Δημοσίευση από ALKIVIADES » 18 Ιουν 2007 20:39

δες αυτό,
http://forums.devshed.com/web-design-he ... 21876.html

και ένα πιο πολύπλοκο,
http://www.dynamicdrive.com/dynamicinde ... ooltip.htm

βέβαια 2 συμβουλές :fireman: :oops: ,

# διάβασε και κανένα tutorial, απλά ψάξε με τις μηχ. αναζήτησης

# χτίζεις κάτι σαν μενού.. με js όμως (θα είναι και "βαριά") κάποιος που ο browser του δεν υποστηρίζει js, ή την έχει off δεν θα βλέπει τη σελίδα σου εν 100% λειτουργία.. , άρα θα νευριάζει και θα την κάνει πάραυτα για αλλού οπότε χτίζεις με css π.χ ή κάνεις ένα mix css-js αν δεν την παλεύεις πάραυτα .
Εικόνα

kosmas
Δημοσιεύσεις: 75
Εγγραφή: 16 Ιουν 2007 17:01

Εισαγωγή εικόνας μέσω Javascript

Δημοσίευση από kosmas » 18 Ιουν 2007 20:56

Ok ευχαριστώ ! :lol:

Έχεις να μου προτείνεις κάποιο καλό tutorial για java script και css ? Αν γίνεται να περιέχει κάτι παραπάνω από τα βασικά.

Άβαταρ μέλους
ALKIVIADES
Honorary Member
Δημοσιεύσεις: 1322
Εγγραφή: 07 Απρ 2005 03:39

Εισαγωγή εικόνας μέσω Javascript

Δημοσίευση από ALKIVIADES » 18 Ιουν 2007 21:02

1) ο καθένας μαθαίνει διαφορετικά, μόνο εσύ ξέρεις ποίος είναι ο καλύτερος τρόπος για εσένα και θα πρέπει να το βρείς :P

2) δεν πρόκειται να μάθεις έτσι ..δοκίμασε το και θα δείς πως αν πιστέψεις πως με κάποιο tut θα μάθεις js αργά ή μη αργά θε να απογοητευτείς, οι λόγοι πολλοί και διάφοροι.. ο δάσκαλος skeftomilos τα λέει καλά :oops:

..για να μην απογοητευτείς στα λέω αυτά, σε στύλ Κοέλιο :P, έτσι :wink:

αλλά αν θές κάτι σε μαζεμένο π.χ δές (javascript)..αυτό

..για css, "διάβασε" ξεχωριστά.. ένα ένα και μετά προσπαθείς να τα ενώσεις π.χ δές του freestuff :oops:
Εικόνα

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Εισαγωγή εικόνας μέσω Javascript

Δημοσίευση από cherouvim » 18 Ιουν 2007 21:15

@kosmas
Το άρθρο για javascript και η μετάφρασή του:
http://simon.incutio.com/slides/2006/et ... notes.html
http://www.freestuff.gr/forums/viewtopic.php?t=21175

Για html/css:
http://www.htmldog.com/

Απάντηση

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

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

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