Mαυρο backround

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

Απάντηση
Άβαταρ μέλους
satking
Δημοσιεύσεις: 35
Εγγραφή: 14 Νοέμ 2004 16:14
Τοποθεσία: www.aquawebfish.tk/
Επικοινωνία:

Mαυρο backround

Δημοσίευση από satking » 11 Ιούλ 2005 17:32

υπαρχει τροπος το backround στο ανοιγμα μια φωτογραφιας να ειναι μαυρο αντι ασπρο???

Άβαταρ μέλους
petdim
Δημοσιεύσεις: 72
Εγγραφή: 22 Μαρ 2005 16:48
Τοποθεσία: Athens
Επικοινωνία:

Mαυρο backround

Δημοσίευση από petdim » 11 Ιούλ 2005 18:34

ftiaxe ena class sto css kai vale

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

.blackbg {
    background-color: #000;
}
meta vale auto to class sto image

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

<img src="" class="blackbg">
Petros Dimitriadis
Web Designer
www.petrosdimitriadis.com

Άβαταρ μέλους
satking
Δημοσιεύσεις: 35
Εγγραφή: 14 Νοέμ 2004 16:14
Τοποθεσία: www.aquawebfish.tk/
Επικοινωνία:

Mαυρο backround

Δημοσίευση από satking » 11 Ιούλ 2005 19:06

και πως κανεις κατι τετοιο???? :oops:
δεν εχω ιδεα απο css μπορεις να μου πεις πως μπορω να το κανω??? :o

Άβαταρ μέλους
petdim
Δημοσιεύσεις: 72
Εγγραφή: 22 Μαρ 2005 16:48
Τοποθεσία: Athens
Επικοινωνία:

Mαυρο backround

Δημοσίευση από petdim » 11 Ιούλ 2005 19:11

sta grigora giati ligo diskolo na sou exigisw css vale prin to </head>

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

<style type="text/css">
<!--
.blackbg &#123;
   background-color&#58; #000000;
&#125;
-->
</style>
meta sto image opws eipame

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

<img src="" class="blackbg">
Petros Dimitriadis
Web Designer
www.petrosdimitriadis.com

Άβαταρ μέλους
satking
Δημοσιεύσεις: 35
Εγγραφή: 14 Νοέμ 2004 16:14
Τοποθεσία: www.aquawebfish.tk/
Επικοινωνία:

Mαυρο backround

Δημοσίευση από satking » 11 Ιούλ 2005 19:16

το εκανα αλλα τιποτα! που ειναι το λαθος??

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

&#125;
.style1 &#123;
	color&#58; #999999;
	font-size&#58; 36px;
	font-family&#58; "Times New Roman", Times, serif;
&#125;
.style3 &#123;color&#58; #999999; font-size&#58; 24px; font-family&#58; "Times New Roman", Times, serif; &#125;
.style5 &#123;color&#58; #999999; font-family&#58; "Times New Roman", Times, serif; &#125;
-->
<style type="text/css">&#123;  &#125;
.blackbg &#123;
   background-color&#58; #000000;
&#125;
-->
</style>

</style></head>

<body>
<div align="center">
  <p class="style1">bees</p>
  <table width="851" height="937" border="1">
    <tr>
      <td width="160" height="190"><div align="center"><a href="micro/BEES%20LAST%20800%20R/bee%20baby%20R%2083.jpg"><img src="IMAGEMINI/BEES%20SUB%20MENU%20160/bee%20baby%20S3.jpg" width="160" height="118" border="0"class="blackbg"></a><span class="style5"> bee baby</span><br>
      </div></td>

ευχαριστω για τον χρονο σου

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

Mαυρο backround

Δημοσίευση από fafos » 11 Ιούλ 2005 19:36

DEN vazoume styles mesa se styles... afairese ta <style type="text/css">{ } kai -->
</style>
apo ton kodika pou sou edose o petdim kai o kodikas na einai akrivos kato apo to
.style5 {color: #999999; font-family: "Times New Roman", Times, serif; }

(dhl. akrivos pano apo to velaki --> )

Άβαταρ μέλους
satking
Δημοσιεύσεις: 35
Εγγραφή: 14 Νοέμ 2004 16:14
Τοποθεσία: www.aquawebfish.tk/
Επικοινωνία:

Mαυρο backround

Δημοσίευση από satking » 11 Ιούλ 2005 19:50

αυτο λετε???

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

.style3 &#123;color&#58; #999999; font-size&#58; 24px; font-family&#58; "Times New Roman", Times, serif; &#125;
.style5 &#123;color&#58; #999999; font-family&#58; "Times New Roman", Times, serif; &#125;
<style type="text/css">&#123;  &#125;
.blackbg &#123;
   background-color&#58; #000000;
&#125; 

</style></head>

<body>
<div align="center">
  <p class="style1">bees</p>
  <table width="851" height="937" border="1">
    <tr>
      <td width="160" height="190"><div align="center"><a href="micro/BEES%20LAST%20800%20R/bee%20baby%20R%2083.jpg"><img src="IMAGEMINI/BEES%20SUB%20MENU%20160/bee%20baby%20S3.jpg" width="160" height="118" border="0"class="blackbg"></a><span class="style5"> bee baby</span><br>

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

Mαυρο backround

Δημοσίευση από fafos » 11 Ιούλ 2005 20:00

Prepei na ginei etsi:

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

&#125;
.style1 &#123;
   color&#58; #999999;
   font-size&#58; 36px;
   font-family&#58; "Times New Roman", Times, serif;
&#125;
.style3 &#123;color&#58; #999999; font-size&#58; 24px; font-family&#58; "Times New Roman", Times, serif; &#125;
.style5 &#123;color&#58; #999999; font-family&#58; "Times New Roman", Times, serif; &#125;

.blackbg &#123;
   background-color&#58; #000000;
&#125;
-->
</style></head>

<body>
<div align="center"> 

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Mαυρο backround

Δημοσίευση από skeftomilos » 12 Ιούλ 2005 00:15

Μήπως εννοείς το background μίας εικόνας όταν αυτή εμφανίζεται μόνη της στον browser; Δηλαδή όταν το url είναι κάτι τέτοιο: http://www.foo.com/something.jpg

Αν ναι, τότε δε νομίζω ότι μπορείς να κάνεις τίποτα για να αλλάξεις το background, δηλαδή θα είναι υποχρεωτικά άσπρο. :( Μόνη λύση είναι να φτιάξεις μια πολύ απλή σελίδα html με μαύρο background που να περιέχει την εικόνα. Αν οι εικόνες είναι πολλές, από μία σελίδα για κάθε εικόνα.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
satking
Δημοσιεύσεις: 35
Εγγραφή: 14 Νοέμ 2004 16:14
Τοποθεσία: www.aquawebfish.tk/
Επικοινωνία:

Mαυρο backround

Δημοσίευση από satking » 12 Ιούλ 2005 00:25

αυτο ακριβος εννοω αλλα μαλλον δεν εδωσα να καταλαβουν σωστα...
ειναι καμια 200 φωτο :o θα χασω την μπαλα με τοσες σελιδες...καμια προταση????

Άβαταρ μέλους
MichalisS
Honorary Member
Δημοσιεύσεις: 2372
Εγγραφή: 03 Ιαν 2005 23:50

Mαυρο backround

Δημοσίευση από MichalisS » 12 Ιούλ 2005 01:14

Μια λύση που μου έρχεται τώρα στο μυαλό, είναι να βάλεις ένα απλό άλμπουμ με java για παράδειγμα, στο οποίο στην ίδια σελίδα θα εμφανίζει την εικόνα και πατώντας "επόμενη" π.χ, θα αλλάζει μόνο η εικόνα και η σελίδα θα παραμένει ως έχει...

Άβαταρ μέλους
satking
Δημοσιεύσεις: 35
Εγγραφή: 14 Νοέμ 2004 16:14
Τοποθεσία: www.aquawebfish.tk/
Επικοινωνία:

Mαυρο backround

Δημοσίευση από satking » 12 Ιούλ 2005 01:16

ειναι ευκολο αυτο???
μπορεις να μου πεις πως γινετε?

Άβαταρ μέλους
MichalisS
Honorary Member
Δημοσιεύσεις: 2372
Εγγραφή: 03 Ιαν 2005 23:50

Mαυρο backround

Δημοσίευση από MichalisS » 12 Ιούλ 2005 01:18

Εγώ δεν έχω ιδέα από java! Αλλά σίγουρα αρκετοί θα ξέρουν να σε βοηθήσουν. Στο μεταξύ, μέχρι να προθυμοποιηθεί κάποιος, ρίξε μια ματιά στο www.javafile.com μπας και βρεις τίποτα!

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Mαυρο backround

Δημοσίευση από skeftomilos » 13 Ιούλ 2005 01:38

Η ιδέα του MatrozoC είναι πολύ καλή, αλλά και η κλασική λύση είναι εξίσου καλή. Το θέμα είναι τι περιμένουμε/προσδοκούμε να κάνουν οι επισκέπτες μας με τις εικόνες. Αν πρόκειται να τις βλέπουν όλες μία-μία με τη σειρά, τότε η λύση του MatrozoC είναι η καλύτερη. Οι χρήστες απλά θα πατάνε ένα κουμπί "επόμενο" και θα βλέπουν την επόμενη εικόνα, χωρίς να πρέπει να πατάνε κάθε φορά το κουμπί Back για να επιστρέφουν στον κατάλογο με τα thumbnails. Από την άλλη αν περιμένουμε ότι οι περισσότεροι χρήστες θα επιλέξουν να δουν 5-6 εικόνες από τις διακόσιες, τότε η λύση δεν είναι καλή πλέον. Σε αυτή την περίπτωση είναι σημαντικό να μπορούν οι χρήστες να βλέπουν όσο γίνεται περισσότερα thumbnails στην οθόνη, οπότε η κανονικού μεγέθους εικόνες δε μπορούν να εμφανίζονται στην ίδια σελίδα πιάνοντας χώρο. Να σημειώσω ότι υπάρχει και τρίτη λύση, με τις εικόνες να εμφανίζονται σε μικρά χωριστά παράθυρα (popup). Ένα κάπως μεγάλο αλλά αρκετά καλό script για popup υπάρχει εδώ, αλλά προσωπικά είμαι ιδεολογικά αντίθετος με τα popup παράθυρα. Παραβιάζουν αρχές τις usability.

Οι image galleries είναι πολύ συνηθισμένες στο Internet, επομένως υπάρχουν προγράμματα για να διευκολύνουν τη δημιουργία τους. Μερικά από τα δωρεάν που έχω δοκιμάσει είναι τα Batch Thumbs (με αρκετές δυνατότητες), Galleroo, ThumbaWumba (το απλούστερο) και XibitMaker (παράγει ιδιαίτερα interactive σελίδες). Όλα αυτά τα προγράμματα παράγουν τις εικόνες στις διαστάσεις που θέλουμε, τα thumbnails στις διαστάσεις που θέλουμε, και τέλος τον HTML κώδικα για να τον βάλουμε copy-paste στη σελίδα μας. Βέβαια οι αρκετές τους επιλογές μπορεί να μην καλύπτουν πλήρως τις επιθυμίες μας (π.χ. μαύρο background), ίσως όμως να μπορούν να προσαρμοστούν με λίγο text-replace.

Θα γράψω τώρα λίγο κώδικα για να εμφανίζεται μαύρο το background χωρίς να χρειαστούν διακόσιες διαφορετικές σελίδες. Ο κώδικας είναι σε JavaScript (όχι Java). Κατ' αρχήν η σελίδα με τα thumbnails (index.htm):

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

<html>
  <head>
    <title>Image Gallery</title>
    <script type="text/javascript">
      window.onload = function&#40;&#41; &#123;
        var links = document.getElementById&#40;"container"&#41;.getElementsByTagName&#40;"a"&#41;
        for &#40;var i = 0; i < links.length; i++&#41; &#123;
          var link = links&#91;i&#93;
          link.href = "picture.htm?p=" + link.getAttribute&#40;"href"&#41; + "&c=" + link.getAttribute&#40;"caption"&#41;
        &#125;
      &#125;
    </script>
  </head>
  <body>
    <h2>Image Gallery</h2>
    <div id="container">
      <a href="blue-frog.jpg" caption="Blue Frog"><img src="blue-frog-small.jpg" width="120" height="80" border="0"></a><br><br>
      <a href="green-frog.jpg" caption="Green Frog"><img src="green-frog-small.jpg" width="120" height="80" border="0"></a><br><br>
    </div>
  </body>
</html>
Στο HTML τμήμα δεν έχω αλλάξει πολλά πράματα. Μόνο έβαλα όλα τα links μέσα σε ένα div, και προσέθεσα από ένα custom attribute με όνομα caption στο καθένα. Αυτό δεν είναι απαραίτητο, το έβαλα απλά για αλατοπίπερο! Τα ενδιαφέροντα συμβαίνουν μέσα στο script. Αυτό που κάνει είναι να αλλάξει το href όλων των links που βρίσκονται μέσα στο div "container". Στο παράδειγμα κάνει τις εξής αλλαγές:

blue-frog.jpg --> picture.htm?p=blue-frog.jpg&c=Blue%20Frog
green-frog.jpg --> picture.htm?p=green-frog.jpg&c=Green%20Frog

Επομένως όταν πατηθεί ένα link, αντί για την εικόνα θα εμφανιστεί η σελίδα picture.htm. Στο querystring έχει αποθηκευτεί το όνομα της εικόνας, ώστε να γνωρίζει η σελίδα ποια εικόνα να εμφανίσει στο μαύρο της φόντο. Φυσικά θα χρειαστεί λίγος ακόμα κώδικας και σε αυτή τη σελίδα, ώστε να διαβάσει το querystring. Ακολουθεί η picture.htm:

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

<html>
  <head>
    <title>Picture</title>
    <style type="text/css">
      body &#123;
        background-color&#58; black;
        color&#58; white;
      &#125;
    </style>
    <script type="text/javascript">
      location.querystring = function&#40;key&#41; &#123;
        var re = new RegExp&#40;"&#91;\\?&&#93;" + key + "=&#40;&#91;^\\?&#93;*?&#41;&#40;?&#58;&|$&#41;&#91;^\\?&#93;*$" ,"i"&#41;
        var match = unescape&#40;this.search.replace&#40;/\+/g, " "&#41;&#41;.match&#40;re&#41;
        if &#40;match&#41; return match&#91;1&#93;
      &#125;
      window.onload = function&#40;&#41; &#123;
        document.getElementById&#40;"picture"&#41;.src = location.querystring&#40;"p"&#41;
        document.getElementById&#40;"caption"&#41;.innerHTML = location.querystring&#40;"c"&#41;
      &#125;
    </script>
  </head>
  <body>
    <table width="100%" height="100%">
      <tr>
        <td align="center" valign="middle">
          <img id="picture" width="240" height="160"><br>
          <h3 id="caption"></h3>
        </td>
      <tr>
    </table>
  </body>
</html>
Στο τμήμα HTML έχω βάλει το στοιχείο img σε ένα table, όχι για άλλο λόγο αλλά γιατί να τοποθετηθεί η εικόνα στο κέντρο του browser με τα attributes align="center" valign="middle" (θα υπάρχουν και άλλοι τρόποι). Στην αρχή το στοιχείο img δεν έχει src, αλλά γι αυτό φροντίζει ο κώδικας στο τμήμα script παραπάνω. Μόλις φορτωθεί η σελίδα διαβάζει το querystring και συγκεκριμένα τις παραμέτρους p και c. Την τιμή της πρώτης την αντιγράφει στο img.src και την τιμή της δεύτερης την βάζει μέσα στο στοιχείο με id="caption". Στην αρχή-αρχή προστίθεται η μέθοδος querystring στο αντικείμενο location, καθώς δεν τη διαθέτει από μόνο του.

Το παραπάνω παράδειγμα απαιτεί φυσικά ενεργή JavaScript στον browser για να λειτουργήσει όπως θέλουμε, αλλά αν δεν είναι ενεργή δε χάλασε ο κόσμος. Απλά οι εικόνες θα εμφανιστούν κλασικά μόνες τους σε άσπρο φόντο. Αυτή η μικρή έγνοια θα ήταν περιττή αν φροντίζαμε να εκτελεστεί ο κώδικας server-side (π.χ. με PHP ή ASP), αλλά κατά την ταπεινή μου γνώμη για τη συγκεκριμένη δουλειά η JavaScript είναι υπεραρκετή.
:P

Εικόνα
Συνημμένα
Image-Gallery.zip
Οι δύο HTML σελίδες και οι εικόνες με τα thumbnails.
(23.62 KiB) Μεταφορτώθηκε 223 φορές
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
apoel
Δημοσιεύσεις: 350
Εγγραφή: 18 Ιούλ 2005 23:46
Επικοινωνία:

Mαυρο backround

Δημοσίευση από apoel » 19 Ιούλ 2005 01:48

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>

<body>
</body>
</html>

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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