Πώς να κάνω την background εικόνα του site μου να αλλάζει

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

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

Απάντηση
Άβαταρ μέλους
dj_kostas_pro
Δημοσιεύσεις: 210
Εγγραφή: 10 Οκτ 2007 16:54
Τοποθεσία: Πιερία

Πώς να κάνω την background εικόνα του site μου να αλλάζει

Δημοσίευση από dj_kostas_pro » 20 Οκτ 2010 10:29

Παιδιά γνωρίζει κανίς πώς να κάνω την background εικόνα του site μου να αλλάζει κάθε φορά που μπαίνει κάποιος.
Όλοι ζούμε κάτω από τον ίδιο ουρανό, αλλά δεν έχουμε όλοι τον ίδιο ορίζοντα.

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Πώς να κάνω την background εικόνα του site μου να αλλάζει

Δημοσίευση από Insurer » 20 Οκτ 2010 11:47

<script type="text/javascript">
<!-- Hide
pics=new Array("eikona1","eikona2","eikona3");
lnpics=pics.length-1;
index=Math.round(Math.random()*lnpics);
document.write("<body background="+pics[index]+" text='FFFFFF' link='000000' vlink='000033'>");
// End Hiding -->
</script>
eikona1/2/3: βάλε το ακριβές url για την εικόνα που θέλεις
"text color"/"link"/"vlink" βάλε ότι χρώμα θέλεις

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Πώς να κάνω την background εικόνα του site μου να αλλάζει

Δημοσίευση από dimsis » 20 Οκτ 2010 12:03

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Random Background Image &#40;not stretched&#41;</title>
<style type="text/css">
body &#123; background-repeat&#58;no-repeat;background-size&#58;100%;text-shadow&#58; 1px 1px 2px #666; margin&#58;0;padding&#58;0;color&#58;#fff;font-family&#58;"Trebuchet MS",Verdana,Arial&#125;
.lezanta &#123; background-color&#58;#000; -moz-opacity&#58;.50; filter&#58;alpha&#40;opacity=50&#41;; opacity&#58;.50; width&#58;600px; padding&#58;10px 0 10px 10px; margin&#58;20px 0; border-top-right-radius&#58;1em; -moz-border-radius-topright&#58;1em; -webkit-border-top-right-radius&#58;1em; border-bottom-right-radius&#58;1em; -moz-border-radius-bottomright&#58;1em; -webkit-border-bottom-right-radius&#58;1em;&#125;
em &#123;font-size&#58;10px&#125;
</style>
</head>
<script language="JavaScript" type="text/javascript">
rndimg=Math.floor&#40;Math.random&#40;&#41;*10+1&#41;;
switch&#40;rndimg&#41;
&#123;
case 1&#58;
  showimage="http&#58;//farm5.static.flickr.com/4118/4956466061_3161395992_o.jpg";
  break;
case 2&#58;
  showimage="http&#58;//farm3.static.flickr.com/2167/2329016561_1e9a9c0753_o.jpg";
  break;
case 3&#58;
  showimage="http&#58;//farm5.static.flickr.com/4129/5025584644_953fd03d48_o.jpg";
  break;
case 4&#58;
  showimage="http&#58;//farm5.static.flickr.com/4088/5025584888_9d07d7dd13_o.jpg";
  break;
case 5&#58;
  showimage="http&#58;//farm5.static.flickr.com/4084/5024972167_32e734fb28_o.jpg";
  break;      
case 6&#58;
  showimage="http&#58;//farm4.static.flickr.com/3456/3696699543_49da38218c_o.jpg";
  break;      
case 7&#58;
  showimage="http&#58;//farm4.static.flickr.com/3010/2987323492_c02e9b01cd_o.jpg";
  break;      
case 8&#58;
  showimage="http&#58;//farm4.static.flickr.com/3479/3884230409_6c91c261bb_o.jpg";
  break;      
case 9&#58;
  showimage="http&#58;//farm5.static.flickr.com/4097/4816499190_89ccbd66f0_o.jpg";
  break;      
case 10&#58;
  showimage="http&#58;//farm5.static.flickr.com/4073/4818143327_5ee27f1efe_o.jpg";
  break;      

default&#58;
  showimage="http&#58;//farm5.static.flickr.com/4118/4956466061_3161395992_o.jpg";
&#125;
</script>
</head>
<body onload="document.body.background=showimage">
<div class="lezanta">
	<h1>Javascript&#58; Random Background Image</h1>
	<p>Κάντε Refresh για νέα εικόνα φόντου.</p>
	<p>Χρήση&#58; Αντικαταστήστε τις μεταβλητές showimage στον κώδικα με τα δικά σας ονόματα αρχείων εικόνων &#40;absolute ή relative paths&#41;.<br /> Διαγράψτε το &lt;style&gt; και οτιδήποτε βρίσκετε μεταξύ του &lt;body&gt; και &lt;/body&gt; αν δεν θέλετε λεζάντα. Αλλάξτε τον αριθμό 10 στη γραμμή 13 με το πλήθος των εικόνων που θέλετε να φορτώνονται τυχαία και έπειτα σβήστε ή προσθέστε τις αντίστοιχες παραγράφους case. <em>by DimSis</em></p>
</div>
</body>
</html>
demo: http://avadaz.com/playground/randombg.htm

Άβαταρ μέλους
dj_kostas_pro
Δημοσιεύσεις: 210
Εγγραφή: 10 Οκτ 2007 16:54
Τοποθεσία: Πιερία

Πώς να κάνω την background εικόνα του site μου να αλλάζει

Δημοσίευση από dj_kostas_pro » 20 Οκτ 2010 13:44

Ευχαριστω πολυ :)
Όλοι ζούμε κάτω από τον ίδιο ουρανό, αλλά δεν έχουμε όλοι τον ίδιο ορίζοντα.

pitsirikos
Δημοσιεύσεις: 9
Εγγραφή: 15 Απρ 2011 09:28

Πώς να κάνω την background εικόνα του site μου να αλλάζει

Δημοσίευση από pitsirikos » 08 Μάιος 2011 12:59

γινετε να αλλαζει το background καποια συγκεκριμενη ωρα ?

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Πώς να κάνω την background εικόνα του site μου να αλλάζει

Δημοσίευση από dimsis » 09 Μάιος 2011 10:42

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Random Background Image &#40;not stretched&#41;</title>
<style type="text/css">
body &#123; background-repeat&#58;no-repeat;background-size&#58;100%;text-shadow&#58; 1px 1px 2px #666; margin&#58;0;padding&#58;0;color&#58;#fff;font-family&#58;"Trebuchet MS",Verdana,Arial&#125;
.lezanta &#123; background-color&#58;#000; -moz-opacity&#58;.50; filter&#58;alpha&#40;opacity=50&#41;; opacity&#58;.50; width&#58;600px; padding&#58;10px 0 10px 10px; margin&#58;20px 0; border-top-right-radius&#58;1em; -moz-border-radius-topright&#58;1em; -webkit-border-top-right-radius&#58;1em; border-bottom-right-radius&#58;1em; -moz-border-radius-bottomright&#58;1em; -webkit-border-bottom-right-radius&#58;1em;&#125;
em &#123;font-size&#58;10px&#125;
</style>
</head>
<script language="JavaScript" type="text/javascript">
function random_background_switch&#40;&#41;&#123;
rndimg=Math.floor&#40;Math.random&#40;&#41;*10+1&#41;;
switch&#40;rndimg&#41;
&#123;
case 1&#58;
  showimage="http&#58;//farm5.static.flickr.com/4118/4956466061_3161395992_o.jpg";
  break;
case 2&#58;
  showimage="http&#58;//farm3.static.flickr.com/2167/2329016561_1e9a9c0753_o.jpg";
  break;
case 3&#58;
  showimage="http&#58;//farm5.static.flickr.com/4129/5025584644_953fd03d48_o.jpg";
  break;
case 4&#58;
  showimage="http&#58;//farm5.static.flickr.com/4088/5025584888_9d07d7dd13_o.jpg";
  break;
case 5&#58;
  showimage="http&#58;//farm5.static.flickr.com/4084/5024972167_32e734fb28_o.jpg";
  break;      
case 6&#58;
  showimage="http&#58;//farm4.static.flickr.com/3456/3696699543_49da38218c_o.jpg";
  break;      
case 7&#58;
  showimage="http&#58;//farm4.static.flickr.com/3010/2987323492_c02e9b01cd_o.jpg";
  break;      
case 8&#58;
  showimage="http&#58;//farm4.static.flickr.com/3479/3884230409_6c91c261bb_o.jpg";
  break;      
case 9&#58;
  showimage="http&#58;//farm5.static.flickr.com/4097/4816499190_89ccbd66f0_o.jpg";
  break;      
case 10&#58;
  showimage="http&#58;//farm5.static.flickr.com/4073/4818143327_5ee27f1efe_o.jpg";
  break;      

default&#58;
  showimage="http&#58;//farm5.static.flickr.com/4118/4956466061_3161395992_o.jpg";
&#125;
document.body.background=showimage;
setTimeout&#40;"random_background_switch&#40;&#41;",5000&#41;; // kalei ton eyato tis meta apo 5 deyterolepta
&#125;
</script>
</head>
<body onload="random_background_switch&#40;&#41;">
<div class="lezanta">
	<h1>Javascript&#58; Random Background Image</h1>
	<p>Κάντε Refresh για νέα εικόνα φόντου.</p>
	<p>Χρήση&#58; Αντικαταστήστε τις μεταβλητές showimage στον κώδικα με τα δικά σας ονόματα αρχείων εικόνων &#40;absolute ή relative paths&#41;.<br /> Διαγράψτε το &lt;style&gt; και οτιδήποτε βρίσκετε μεταξύ του &lt;body&gt; και &lt;/body&gt; αν δεν θέλετε λεζάντα. Αλλάξτε τον αριθμό 10 στη γραμμή 13 με το πλήθος των εικόνων που θέλετε να φορτώνονται τυχαία και έπειτα σβήστε ή προσθέστε τις αντίστοιχες παραγράφους case. <em>by DimSis</em></p>
</div>
</body>
</html>
demo: http://avadaz.com/playground/randombg_time.htm

Το 5000 είναι σε milliseconds (1 sec = 1000 milliseconds). Το αλλάζεις στο χρόνο που επιθυμείς.

pitsirikos
Δημοσιεύσεις: 9
Εγγραφή: 15 Απρ 2011 09:28

Πώς να κάνω την background εικόνα του site μου να αλλάζει

Δημοσίευση από pitsirikos » 11 Μάιος 2011 00:55

ευχαριστω

γινετε να καλει αλλη σελιδα αντι για background ?

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Πώς να κάνω την background εικόνα του site μου να αλλάζει

Δημοσίευση από dva_dev » 11 Μάιος 2011 03:15

Εναλλακτικά ο κώδικας θα μπορούσε να γίνει κάπως σαν

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

<script language="JavaScript" type="text/javascript"> 
var images = new Array&#40;
    'http&#58;//farm5.static.flickr.com/4118/4956466061_3161395992_o.jpg',
    'http&#58;//farm3.static.flickr.com/2167/2329016561_1e9a9c0753_o.jpg',
    'http&#58;//farm5.static.flickr.com/4129/5025584644_953fd03d48_o.jpg',
    'http&#58;//farm5.static.flickr.com/4088/5025584888_9d07d7dd13_o.jpg',
    'http&#58;//farm5.static.flickr.com/4084/5024972167_32e734fb28_o.jpg',
    'http&#58;//farm4.static.flickr.com/3456/3696699543_49da38218c_o.jpg',
    'http&#58;//farm4.static.flickr.com/3010/2987323492_c02e9b01cd_o.jpg',
    'http&#58;//farm4.static.flickr.com/3479/3884230409_6c91c261bb_o.jpg',
    'http&#58;//farm5.static.flickr.com/4097/4816499190_89ccbd66f0_o.jpg',
    'http&#58;//farm5.static.flickr.com/4073/4818143327_5ee27f1efe_o.jpg'
    &#41;;
 
function random_background_switch&#40;&#41;
&#123;
	var rndimg = Math.floor&#40; Math.random&#40;&#41; * images.length &#41;;
	document.body.background = images&#91;rndimg&#93;;
	setTimeout&#40;"random_background_switch&#40;&#41;",3000&#41;; // kalei ton eyato tis meta apo 2 deyterolepta
&#125;
</script>
τυχόν (αν)ορθογραφικά λάθη δεν είναι δικά μου. :D

gmegas
Δημοσιεύσεις: 79
Εγγραφή: 03 Ιούλ 2004 12:27

Πώς να κάνω την background εικόνα του site μου να αλλάζει

Δημοσίευση από gmegas » 05 Αύγ 2011 20:17

dimsis έγραψε:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Random Background Image &#40;not stretched&#41;</title>
<style type="text/css">
body &#123; background-repeat&#58;no-repeat;background-size&#58;100%;text-shadow&#58; 1px 1px 2px #666; margin&#58;0;padding&#58;0;color&#58;#fff;font-family&#58;"Trebuchet MS",Verdana,Arial&#125;
.lezanta &#123; background-color&#58;#000; -moz-opacity&#58;.50; filter&#58;alpha&#40;opacity=50&#41;; opacity&#58;.50; width&#58;600px; padding&#58;10px 0 10px 10px; margin&#58;20px 0; border-top-right-radius&#58;1em; -moz-border-radius-topright&#58;1em; -webkit-border-top-right-radius&#58;1em; border-bottom-right-radius&#58;1em; -moz-border-radius-bottomright&#58;1em; -webkit-border-bottom-right-radius&#58;1em;&#125;
em &#123;font-size&#58;10px&#125;
</style>
</head>
<script language="JavaScript" type="text/javascript">
function random_background_switch&#40;&#41;&#123;
rndimg=Math.floor&#40;Math.random&#40;&#41;*10+1&#41;;
switch&#40;rndimg&#41;
&#123;
case 1&#58;
  showimage="http&#58;//farm5.static.flickr.com/4118/4956466061_3161395992_o.jpg";
  break;
case 2&#58;
  showimage="http&#58;//farm3.static.flickr.com/2167/2329016561_1e9a9c0753_o.jpg";
  break;
case 3&#58;
  showimage="http&#58;//farm5.static.flickr.com/4129/5025584644_953fd03d48_o.jpg";
  break;
case 4&#58;
  showimage="http&#58;//farm5.static.flickr.com/4088/5025584888_9d07d7dd13_o.jpg";
  break;
case 5&#58;
  showimage="http&#58;//farm5.static.flickr.com/4084/5024972167_32e734fb28_o.jpg";
  break;      
case 6&#58;
  showimage="http&#58;//farm4.static.flickr.com/3456/3696699543_49da38218c_o.jpg";
  break;      
case 7&#58;
  showimage="http&#58;//farm4.static.flickr.com/3010/2987323492_c02e9b01cd_o.jpg";
  break;      
case 8&#58;
  showimage="http&#58;//farm4.static.flickr.com/3479/3884230409_6c91c261bb_o.jpg";
  break;      
case 9&#58;
  showimage="http&#58;//farm5.static.flickr.com/4097/4816499190_89ccbd66f0_o.jpg";
  break;      
case 10&#58;
  showimage="http&#58;//farm5.static.flickr.com/4073/4818143327_5ee27f1efe_o.jpg";
  break;      

default&#58;
  showimage="http&#58;//farm5.static.flickr.com/4118/4956466061_3161395992_o.jpg";
&#125;
document.body.background=showimage;
setTimeout&#40;"random_background_switch&#40;&#41;",5000&#41;; // kalei ton eyato tis meta apo 5 deyterolepta
&#125;
</script>
</head>
<body onload="random_background_switch&#40;&#41;">
<div class="lezanta">
	<h1>Javascript&#58; Random Background Image</h1>
	<p>Κάντε Refresh για νέα εικόνα φόντου.</p>
	<p>Χρήση&#58; Αντικαταστήστε τις μεταβλητές showimage στον κώδικα με τα δικά σας ονόματα αρχείων εικόνων &#40;absolute ή relative paths&#41;.<br /> Διαγράψτε το &lt;style&gt; και οτιδήποτε βρίσκετε μεταξύ του &lt;body&gt; και &lt;/body&gt; αν δεν θέλετε λεζάντα. Αλλάξτε τον αριθμό 10 στη γραμμή 13 με το πλήθος των εικόνων που θέλετε να φορτώνονται τυχαία και έπειτα σβήστε ή προσθέστε τις αντίστοιχες παραγράφους case. <em>by DimSis</em></p>
</div>
</body>
</html>
demo: http://avadaz.com/playground/randombg_time.htm

Το 5000 είναι σε milliseconds (1 sec = 1000 milliseconds). Το αλλάζεις στο χρόνο που επιθυμείς.
καλησπέρα γίνετε να αλλάζει με κάποιο εφέ ? π.χ. fade in & out ?


ευχαριστώ :question:

Απάντηση

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

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

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