Tonen foto wanneer JavaScript is uitgeschakeld

[Tijssen]

Goede morgen,

ik gebruik een eenvoudig JavaScriptje op mijn website dat elke dag een andere foto toont. Nu wil ik ook een backup-foto tonen wanneer JS is uitgeschakeld. Hoe verwerk ik dit in de HTML zodat de backup-foto wordt getoond, wanneer JS is uitgeschakeld en dat wanneer JS is ingeschakeld alleen de foto's uit het JS worden getoond en niet de back-up foto? Kan iemand mij hier mee helpen?

	<div id="content">
		<div id="colOne">
			<p><strong>Infinite Horizon</strong> houdt zich bezig met webdesign, webontwikkeling en 
			contentmanagement. Infinite Horizon leert steeds bij. In&nbsp;<a href="portfolio.html">portfolio</a> 
			kan je zien waar wij aan werken of aan werkten.</p>
            <p>Om kennis te delen houdt Infinite Horizon een verzameling&nbsp;<a href="links.html">links</a> 
            bij met interessante sites. Contact opnemen kan via het&nbsp;<a href="contact.html">contactformulier</a>.
			</p>
			<div id="jsimage">
				<script type="text/javascript" src="javascripts/jsimage.js"></script>
			</div>
			<!-- Attribution for pictures:

			Monday - Sun before our sight - tEdGuY49-http://www.everystockphoto.com/photo.php?imageId=18557
			Tuesday - Drive-Presidente - http://www.everystockphoto.com/photo.php?imageId=97575
			Wednesday - Summer sunset - a_kartha-http://www.everystockphoto.com/photo.php?imageId=248986
			Thursday - Good and Evel - Ben britten-http://www.everystockphoto.com/photo.php?imageId=55160
			Friday - Empty Road - Nicholas_T-http://www.everystockphoto.com/photo.php?imageId=1042029
			Saturday - Ominous sky - Melissa Wiese-http://www.everystockphoto.com/photo.php?imageId=21135
			Sunday - image - imageafter - http://www.everystockphoto.com/photo.php?imageId=280503 --> 
		</div>

[JS]<!--
now=new Date();
day=now.getDay();
document.write("<img src='images/" + day + ".jpg' width=275px height=183px alt='wisselende foto'>");
//-->
[/JS]

 

[blackeagle67]

Dit kun je echt veel makkelijker met php doen.

date_default_timezone_set('Europe/Amsterdam');
$dag = date("l");
echo <img src='images/'.$dag.'.jpg' width='275' height='183' alt='wisselende foto' title='wisselende foto'>

Word de afbeelding altijd laten zien.

 

[blackeagle67]

Sorry had wat aanpassingen moet nu goed zijn.
date("l"); haalt voor jou Sunday tot Saturday op.
en simpelweg op plaats van naam van jpg zetten en klaar is kees.

De timezone heb ik toegevoegd omdat php 5.2 en hoger dacht ik dit vereist.

 

[Tijssen]

Dank je blackeagle67,
Ik ga het vandaag even testen.

 

[That Guy]

Je kan ook eens een <noscript> tag neerzetten:

<div id="jsimage">
   <script type="text/javascript" src="javascripts/jsimage.js"></script>
   <noscript>
      <img src='....' width='...' height='....' />
   </noscript>
</div>

Maar, ja, PHP kan ook. En daarbij, document.write() is een Slecht Idee. Dit kan veel beter zo:

<div id="jsimage">
   <img src='geenJavascript.jpg' id='plaatjeh' />
</div>



<!-- helemaal onderaan, net VOOR de </body> tag: -->
<script>

   var elem = document.getElementById('plaatjeh');

   // bereken dag enzo, meeste script zal al wel in het bestaande JS bestand staan
   elem.src = "berekendPlaatje.jpg";

</script>

 

[Tijssen]

JavaScript of PHP

Nu heb ik 2 bruikbare voorbeelden, een JavaScript, een PHP. Ik heb het PHP-script van blackeagle67 al getest en dat werkt. De noscript tag is eigenlijk wat ik zocht als uitbreiding van mijn JavaScript. Mijn laatste vraag nu is: is het niet beter om een PHP-script te gebruiken dan een Javascript omdat PHP op de server werkt en dit niet uitgezet kan worden door de gebruiker, of zie ik dat verkeerd?

Je kan ook eens een <noscript> tag neerzetten:

<div id="jsimage">
   <script type="text/javascript" src="javascripts/jsimage.js"></script>
   <noscript>
      <img src='....' width='...' height='....' />
   </noscript>
</div>

Maar, ja, PHP kan ook. En daarbij, document.write() is een Slecht Idee. Dit kan veel beter zo:

<div id="jsimage">
   <img src='geenJavascript.jpg' id='plaatjeh' />
</div>



<!-- helemaal onderaan, net VOOR de </body> tag: -->
<script>

   var elem = document.getElementById('plaatjeh');

   // bereken dag enzo, meeste script zal al wel in het bestaande JS bestand staan
   elem.src = "berekendPlaatje.jpg";

</script>

 

[blackeagle67]

om misschien de ideale oplossing te hebben moet je een combinatie gebruiken. Als je mijn php voorbeeld in de noscript tags zet word deze laten zien als je javascript uit staat en zal als de dag veranderd de afbeelding ook veranderen.
Als je de php namelijk niet gebruikt zal hij altijd maar 1 afbeelding laten zien als de javascript uit staat ongeacht de dag.

 

[That Guy]

is het niet beter[...] niet uitgezet kan worden door de gebruiker, of zie ik dat verkeerd?

Dat ligt helemaal aan jou, en aan de website.

Er is in principe geen 'beter'; in dit geval zou ik voor PHP gaan omdat de overhead aan Javascript niet echt opweegt tegen de uitkomst van het script, dus het sturen van het script naar de browser en de browser die het helemaal moet uitvoeren.



:thumb: