5,838
edits
Editing content of a webpage using either HTML or Script: Difference between revisions
From Cumulus Wiki
Jump to navigationJump to search
Editing content of a webpage using either HTML or Script (view source)
Revision as of 09:38, 23 May 2020
, 09:38, 23 May 2020→Script Example
m (→Introduction: now mentions that other examples elsewhere in Wiki) |
m (→Script Example) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 53: | Line 53: | ||
If you want to copy this code, note the 'target' attribute in the 'a' (anchor) element refers to the 'name' attribute in the 'iframe' element. | If you want to copy this code, note the 'target' attribute in the 'a' (anchor) element refers to the 'name' attribute in the 'iframe' element. | ||
===Script Example=== | ===Script Example=== | ||
<pre> | <pre> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
function changeImage(im) {document.images["graphs"].src = im + "?" + new Date().getTime();} | function changeImage(im) {document.images["graphs"].src = im + "?" + new Date().getTime();} | ||
</script></pre> | </script></pre> | ||
NOTE: In this version, a query string is used containing the time. A query string is something that starts with a question mark and follows a Universal Resource Locator (URL). The URL tells the browser where to find the (image) file it is being asked to load. The query string, in this case, tells the browser to load a fresh copy of the (image) file from its source because it will not match the query string on the file contained in a browser cache (if the browser options/preferences are set to allow cache copies to be used when the same file is requested again). | |||
<pre><p> <img src="images/wind.png" name="graphs" id="graphs" title="Weather Graphs" alt="Weather Graphs"/></p> | <pre><p> <img src="images/wind.png" name="graphs" id="graphs" title="Weather Graphs" alt="Weather Graphs"/></p> | ||
<table cellpadding="0" cellspacing="0" id="Graph_menu"> | <table cellpadding="0" cellspacing="0" id="Graph_menu"> | ||
| Line 83: | Line 83: | ||
alt="Daily Rain Graph Thumbnail" width="150" height="100" border="0" /></a></td></tr></table> | alt="Daily Rain Graph Thumbnail" width="150" height="100" border="0" /></a></td></tr></table> | ||
<p class="credits"><br/>Page updated <#update><br/>powered by <a href="http://sandaysoft.com/products/cumulus" target="_blank">Cumulus</a> v<#version> (<#build>)</p></pre> | <p class="credits"><br/>Page updated <#update><br/>powered by <a href="http://sandaysoft.com/products/cumulus" target="_blank">Cumulus</a> v<#version> (<#build>)</p></pre> | ||
This is the code supplied with Cumulus (and stored in web/originals directory) as at 5 July 2011. This extract from HTML code for 'trendsT.htm' displays a large graph in the HTML element 'p' (paragraph) and then displays a number of small thumbnails generated by Cumulus. It only works if JavaScript is enabled so the 'changeImage' function in the first | This is the code supplied with Cumulus (and stored in web/originals directory) as at 5 July 2011. This extract from HTML code for 'trendsT.htm' displays a large graph in the HTML element 'p' (paragraph) and then displays a number of small thumbnails generated by Cumulus. It only works if JavaScript is enabled so the 'changeImage' function in the first pre-formatted area above is called by the 'onclick' argument in the second pre-formatted area. | ||
= The next article to read …… = | |||
Learn how to use a PHP script to generate HTML web pages. See [[PHP|PHP Hypertext Preprocessor]]. | |||
