πως εμφανίζω png μέσα σε html σελίδα?

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

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

Απάντηση
g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από g_p » 04 Σεπ 2010 17:49

παιδιά γεια σας,

θελω να εμφανίσω μία εικόνα png μέσα σε html σελίδα.
Ανέβασα την εικόνα αυτή η οποία δεν έχει ίσια borders αλλά σχεδιασμένα
με το χέρι.(test.png)
Πώς γίνεται η εικόνα αυτή να εμφανίζεται σαν png και να είναι κομμένη
στις μη-ίσιες γραμμές??

υπάρχουν τίποτα tutorials για εμφάνιση png σε html σελίδα??

ευχαριστώ
Συνημμένα
test.PNG
αρχειο png
test.PNG (3.26 KiB) Προβλήθηκε 2435 φορές

Άβαταρ μέλους
inBlogger
Δημοσιεύσεις: 576
Εγγραφή: 18 Απρ 2009 01:55
Τοποθεσία: Αθήνα.
Επικοινωνία:

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από inBlogger » 04 Σεπ 2010 18:33

για να εμφανίσεις μια εικόνα σε μια html σελίδα αρκεί να γράψεις <img src="/*Το λινκ της εικόνας*/" />
Παράδειγμα: <img src="http://url.com/image.png" />
&#8226; inBlog.gr - Ενημερωτικό blog για SEO, Marketing, Social Media κ.α. ;-)
&#8226; w24.gr Forum - Ελληνική κοινότητα για Webmasters, SEO, internet marketing και affiliate marketers.(απο το 2009!)
&#8226;Travel Blog

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από korgr » 04 Σεπ 2010 19:31

Μπερδευεις τα png με τα transparent png
Δεν σημαινει πως καθε png εχει και διαφανο background.
Πρεπει με καποιο προγραμμα επεξεργασιας γραφικων (πχ photoshop), να αφαιρεσεις το λευκο background εξω απο το περιγραμμα σου και να το σωσεις σαν png μαρκαροντας το "transparency".

Μετα το εισαγεις σε html οπως καθε αλλο image με <img> tag

Άβαταρ μέλους
inBlogger
Δημοσιεύσεις: 576
Εγγραφή: 18 Απρ 2009 01:55
Τοποθεσία: Αθήνα.
Επικοινωνία:

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από inBlogger » 04 Σεπ 2010 19:36

korgr έγραψε:Μπερδευεις τα png με τα transparent png
Δεν σημαινει πως καθε png εχει και διαφανο background.
Πρεπει με καποιο προγραμμα επεξεργασιας γραφικων (πχ photoshop), να αφαιρεσεις το λευκο background εξω απο το περιγραμμα σου και να το σωσεις σαν png μαρκαροντας το "transparency".

Μετα το εισαγεις σε html οπως καθε αλλο image με <img> tag
Ωχ, αυτό εννούσε; Δεν το κατάλαβα γιαυτό απάντησα άκυρα τότε στο δευτερο ποστ, συγγνώμη..
&#8226; inBlog.gr - Ενημερωτικό blog για SEO, Marketing, Social Media κ.α. ;-)
&#8226; w24.gr Forum - Ελληνική κοινότητα για Webmasters, SEO, internet marketing και affiliate marketers.(απο το 2009!)
&#8226;Travel Blog

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από g_p » 04 Σεπ 2010 21:56

Ευχαριστώ για τις απαντήσεις σας,

αυτά τα png που έχω είναι αποθηκευμένα μεσω photoshop.
Τι γίνεται όταν έχουμε π.χ. ένα ανθρωπάκι για εικόνα και θέλουμε όταν κάνουμε κλικ σε ένα κουμπί να εμφανίζεται πάνω στη σελίδα με display:absolute σε συγκεκριμένες συντεταγμένες top,right,left,bottom και να επικαλύπτει ένα μικρό μέρος της σελίδας.

Μέχρι στιγμής στα παραδείγματα που έχω κάνει, το ανθρωπάκι/εικόνα μπαίνει αυτόματα σε ένα άσπρο πλαίσιο με borders, ενώ δεν θέλω η εικόνα να έχει borders.

Αυτό γίνεται??

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από korgr » 04 Σεπ 2010 22:29

Δεν αρκει να ειναι σωσμενα απο photoshop. Πρεπει πριν σωθουν να γινει το ξεφονταρισμα!

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από Sermac » 04 Σεπ 2010 22:35

g_p έγραψε:Αυτό γίνεται??
Yeap

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Show image</title>
        <style type="text/css">
            body &#123;
                background&#58;#888 url&#40;"http&#58;//www.webdesignideas.org/images/sneezeBG.gif"&#41; repeat 0 0;
            &#125;
            img &#123;
                border&#58;none;
            &#125;
            div#my-image &#123;
                display&#58;none;
                position&#58;absolute;
                bottom&#58;20px;
                right&#58;10px;
                width&#58;128px;
                height&#58;128px;
            &#125;
        </style>
        <script type="text/javascript">
            function show&#40;&#41; &#123;
                document.getElementById&#40;'my-image'&#41;.style.display = 'block'; 
            &#125;
       </script>
    </head>
    <body>
        <input type="button" onclick="javascript&#58;show&#40;&#41;;" value="Show image" />
        <div id="my-image">
            <img src="http&#58;//png-5.findicons.com/files/icons/854/user_web_2_0/128/icontexto_user_web20_wordpress.png" alt="My image" />
        </div>
    </body> 
</html>
Εικόνα

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από g_p » 04 Σεπ 2010 23:30

Ευχαριστώ, νόμιζα ότι αυτό δεν μπορούσε να γίνει.
Το τέσταρα σε Firefox και Opera kai έτρεξε μια χαρά.Ο explorer μου απλά
επειδή είναι παλιά έκδοση βάζει borders. Σε τέτοιες περιπτώσεις που ο IE δεν το εμφανίζει υπάρχει κάποιος κώδικας για να το υποστηρίξει??

με τα png που έχω δεν τρέχει, οποτε δεν τα έχω αποθηκεύσει σωστά.
Μήπως υπάρχουν οδηγίες πουθενά στο internet ώστε να τα αποθηκεύσω σωστά μέσω photoshop??

Ευχαριστώ πολυ

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από g_p » 05 Σεπ 2010 00:46

korgr έγραψε:Δεν αρκει να ειναι σωσμενα απο photoshop. Πρεπει πριν σωθουν να γινει το ξεφονταρισμα!
ευχαριστώ, απλά μήπως υπάρχουν πιο αναλυτικές οδηγιες τύπου κάνε κλικ στο File μετά επέλεξε το tool κλπ,
που να λένε ακριβώς πως γίνεται??έχω photoshop cs4 και γενικά δεν το χρησιμοποιώ συχνά οποτε είμαι ασχετος

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από korgr » 05 Σεπ 2010 01:06

Αναλογα το θεμα που εχεις, το ξεφονταρισμα μπορει να ειναι μια αρκετα δυσκολη διαδικασια για καποιον που δεν γνωριζει photoshop. Γενικα δεν ειναι απο τα πρωτα πραγματα που μαθαινει κανεις σ' αυτο το προγραμμα.

Δυστυχως δεν υπαρχει καποια ευκολη μεθοδος του τυπου 1. αυτο 2. αυτο κλπ
Δεν ειναι απλα κουμπακια που κανουν τη δουλεια.

Αν εχεις ευκολο θεμα (πχ ενα πλακατο χρωμα για φοντο) μπορεις να κανεις τα εξης:
1. Μετατρεπεις σε layer το θεμα κανοντας διπλο κλικ στην παλετα Layers στο layer "Background".
2. Με το Magic Wand Tool κανεις κλικ στην περιοχη που θες να εξαφανισεις (να γινει διαφανη η εικονα). Ολη η περιοχη με αυτο το χρωμα επιλεγεται αυτοματα!
3. Πατας Delete και αφαιρεις την επιλεγμενη περιοχη
4. Menu File -> Save for web and devices
5. Επιλεγεις τυπο εικονας: PNG-24
6. Τσεκαρεις το "Transparency"
7. Save και ειναι ετοιμο!

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από g_p » 05 Σεπ 2010 01:36

ευχαριστώ για τις οδηγίες στο photoshop, με βοήθησαν πάρα πολύ

Βασικά έχω άλλη μια ερώτηση, τι γίνεται με τα png και τη συμβατότητα με τον explorer??
εγώ για παράδειγμα έχω παλιά έκδοση και δεν μπορεί να τα εμφανίσει , π.χ. αν κάποιος δεν έχει αναβαθμίσει τον ΙΕ broswer του σε νεότερη έκδοση, δεν θα μπορεί ποτέ να δει σωστά το site,

τι γίνεται σε αυτήν την περίπτωση, υπάρχει κάποιος κώδικας έτοιμος στο ιντερνετ που βοηθάει στο σωστό display των png??

ευχαριστώ

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από korgr » 05 Σεπ 2010 09:42

Κυκλοφορουν διαφορες λυσεις για παλαιοτερες εκδοσεις ΙΕ
Για παραδειγμα μπορεις να βαλεις ενα script σαν αυτο:

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

var arVersion = navigator.appVersion.split&#40;"MSIE"&#41;
var version = parseFloat&#40;arVersion&#91;1&#93;&#41;

if &#40;&#40;version >= 5.5&#41; && &#40;document.body.filters&#41;&#41; 
&#123;
   for&#40;var i=0; i<document.images.length; i++&#41;
   &#123;
      var img = document.images&#91;i&#93;
      var imgName = img.src.toUpperCase&#40;&#41;
      if &#40;imgName.substring&#40;imgName.length-3, imgName.length&#41; == "PNG"&#41;
      &#123;
         var imgID = &#40;img.id&#41; ? "id='" + img.id + "' " &#58; ""
         var imgClass = &#40;img.className&#41; ? "class='" + img.className + "' " &#58; ""
         var imgTitle = &#40;img.title&#41; ? "title='" + img.title + "' " &#58; "title='" + img.alt + "' "
         var imgStyle = "display&#58;inline-block;" + img.style.cssText 
         if &#40;img.align == "left"&#41; imgStyle = "float&#58;left;" + imgStyle
         if &#40;img.align == "right"&#41; imgStyle = "float&#58;right;" + imgStyle
         if &#40;img.parentElement.href&#41; imgStyle = "cursor&#58;hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width&#58;" + img.width + "px; height&#58;" + img.height + "px;" + imgStyle + ";"
         + "filter&#58;progid&#58;DXImageTransform.Microsoft.AlphaImageLoader"
         + "&#40;src=\'" + img.src + "\', sizingMethod='scale'&#41;;\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      &#125;
   &#125;
&#125;

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από g_p » 06 Σεπ 2010 19:04

ευχαριστώ για τον κώδικα αλλά δυστυχώς δεν είχα κανένα αποτέλεσμα,
τον έκανα copy paste πριν από όλες τις συναρτήσεις και μέσα σε
<script type="text/javascript"></script>

Απ'ότι είδα στη συνθήκη πιάνει τους ie με version>=5.5, ο δικός μου ειναι 6.0 αλλά αποσυντονίζεται με τα png, ενώ ο firefox δείχνει τα png χωρίς background,o explorer πιάνει ολό το background από πίσω και πιάνει πολύ χώρο για τα png χωρίς να υπάρχει λόγος.

επίσης, ο explorer μου έχει πρόβλημα με τη γραμμή

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

if &#40;&#40;version >= 5.5&#41; && &#40;document.body.filters&#41;&#41;
και βγάζει "γραμμή 23,χαρακτήρας 1,σφάλμα Απαιτείται αντικείμενο,Κώδικας 0"

εχει πρόβλημα με αυτήν την γραμμή
τι πρέπει να κάνω για να παίξει??

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από korgr » 06 Σεπ 2010 21:10

Sorry, δοκιμασε αυτο:

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

<script type="text/javascript">
function correctPNG&#40;&#41; 
   &#123;
   for&#40;var i=0; i<document.images.length; i++&#41;
      &#123;
	  var img = document.images&#91;i&#93;
	  var imgName = img.src.toUpperCase&#40;&#41;
	  if &#40;imgName.substring&#40;imgName.length-3, imgName.length&#41; == "PNG"&#41;
	     &#123;
		 var imgID = &#40;img.id&#41; ? "id='" + img.id + "' " &#58; ""
		 var imgClass = &#40;img.className&#41; ? "class='" + img.className + "' " &#58; ""
		 var imgTitle = &#40;img.title&#41; ? "title='" + img.title + "' " &#58; "title='" + img.alt + "' "
		 var imgStyle = "display&#58;inline-block;" + img.style.cssText 
		 if &#40;img.align == "left"&#41; imgStyle = "float&#58;left;" + imgStyle
		 if &#40;img.align == "right"&#41; imgStyle = "float&#58;right;" + imgStyle
		 if &#40;img.parentElement.href&#41; imgStyle = "cursor&#58;hand;" + imgStyle		
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
		 + " style=\"" + "width&#58;" + img.width + "px; height&#58;" + img.height + "px;" + imgStyle + ";"
	     + "filter&#58;progid&#58;DXImageTransform.Microsoft.AlphaImageLoader"
		 + "&#40;src=\'" + img.src + "\', sizingMethod='scale'&#41;;\"></span>" 
		 img.outerHTML = strNewHTML
		 i = i-1
	     &#125;
      &#125;
   &#125;
window.attachEvent&#40;"onload", correctPNG&#41;;
</script>

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

πως εμφανίζω png μέσα σε html σελίδα?

Δημοσίευση από g_p » 07 Σεπ 2010 00:25

ευχαριστώ αλλά δυστυχώς δεν εμφανίζονται σωστά, τα μεγάλα png δεν τα εμφανίζει και πάλι και τα μικρά που πριν ήτανε οκ τώρα φαίνονται θαμπά,

τι να πω..δεν ξέρω τι φταίει...

anyway ευχαριστώ

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

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

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