Sevencolors studies:
experiments with Javascript, CSS, PHP and web standards

Printer icon

Photo display

Protected copyright photos and designs

The Javascript code in the <head> of the page:

<script language="JavaScript" type="text/javascript">
<!--
function preload()
{
var args = preload.arguments;
document.imgArray = new Array(args.length);
for(var i=0; i<args.length; i++)
{
document.imgArray[i] = new Image;
document.imgArray[i].src = args[i];
}
}
function linksEvents(){
var links = document.getElementsByTagName('a');
for (var i=0;i<links.length;i++){
 
if(links[i].className == 'thumb'){
links[i].onmouseover = function() {display(this);return true;}
links[i].onmouseout = function() {revert();return true;}
}
}
}
function display(pic){
var dis = document.getElementById('display');
var which = pic.href.match(/#(\w.+)/)[1];
dis.innerHTML = '<img src ='+ which +'>';
}
function revert(){
var dis = document.getElementById('display');
dis.innerHTML = '<h3>Bigger photos will be displayed here</h3>';
}
window.onload = function(){preload('pictures/SH01.jpg','pictures/SH02.jpg',
'pictures/SH03.jpg','pictures/SH04.jpg');linksEvents();}
//-->
</script>

The CSS code in the <head> of the page:

<style type="text/css">
#display{margin:0 0 20px 60px}
.thumb{margin-right:10px;}
</style>

The XHTML code in the <body> of the page:

<p>
<a class="thumb" href="#pictures/SH01.jpg">
<img src="../photos_display/pictures/thumb/SH01.jpg" border="0" title="Blue amber face set in gold" alt="Blue amber face set in gold" />
</a>
<a class="thumb" href="#pictures/SH02.jpg">
<img src="../photos_display/pictures/thumb/SH02.jpg" border="0" title="Amber face set in gold" alt="Amber face set in gold" />
</a>
<a class="thumb" href="#pictures/SH03.jpg">
<img src="../photos_display/pictures/thumb/SH03.jpg" border="0" title="Fossil mammoth ivory face set in silver" alt="Fossil mammoth ivory face set in silver" />
</a>
<a class="thumb" href="#pictures/SH04.jpg">
<img src="../photos_display/pictures/thumb/SH04.jpg" border="0" title="Fossil mammoth ivory face set in silver" alt="Fossil mammoth ivory face set in silver" />
</a>
</p>
<div id="display">
<h3>Bigger photos will be displayed here</h3>
</div>

Select, copy and paste the code.Change the pictures names and the text to be displayed according to your needs.

With this very simple thecnique it`s impossible to copy the bigger pics, keeping copyrighted designs protected without sacrificing vision or having to find complicated (and often not effective) solutions. Due to the nature of this page, which only purpose is to demonstrate the functioning of the code, this text moves to accomodate the pictures shown by 'mouseovering' on the thumbnails. Also, informations about the pictures are only in the tooltips but captions can be easily added.

Once again, the all thing is completely portable and adaptable. The Javascript should be imported (as done for this site). Events are not inline, as it should be. The preload function it`s necessary to have a quick mouseover response.

If CSS and Javascript are disabled the thumbnails would just appear one after the other in their natural static positions and the bigger pics would just be unaccessible. This is a working example (all pictures courtesy of Heinrich Schilling of Studio H ™).