Hi!
I'm currently working on a homepage for a graphic designer.
I want the page to be very playful and non-static.
The idea is to have some sort of thumbnail gallery that shows images with random positions every time you enter the site.
I've found a script and costomized it a bit and it almost do what i want. But. The thing is that the images appears in a random order, not really in a random position. I dont want them to follow a horisontical line and be attached to eachother, i want them to appear wherever on the page, no grid or nothing, just totaly random (would be great if they didn't overlap though)
So i will post the html code and hopefully it is possible to modify the code so it does what im looking for! And if that wont work, maybe you have another script that does what im looking for?
Thanks!
Regards,
Aron K
The code:
<HTML>
<HEAD>
<script>
function InitScripts(){
if (self.location.toString().toLowerCase().match('vicsjavascripts')){
pnInitSearchPanel();
}
zxcDisplay('H','fred',ImgPath,ImgAry,0,0);
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body bgColor="FFFFFF" onload="InitScripts()" >
<div id="fred" style="position:relative; left: 17px; top: 17px;" >
<img src=" <img src=" <img src=" <img src=" <img src=" <img src=" <img src=" <img src=" <div style="width:148px;height:30px;background-color:#FFFFFF;padding:5px;font-size:12px;text-align:center;border:solid black 1px;" ></div>
</div>
<script language="JavaScript" type="text/javascript">
<!--
// Display a Group of Random Images (14-May-2006)
// by Vic Phillips
// To Display a Group of Random Images
// in a Horizontal or Vertical display.
// With optional titles, links and PopUp.
// As many groups containing as many images as required
// Application Notes
//
// **** The HTML Code
//
// Each group of images nested in a parent <DIV> defined in the HTML Code
// e.g.
// <div id="fred" style="position:relative;" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <div style="position:absolute;visibility:hidden;width:200px;height:50px;background-color:#FFFFCC;padding:10px;font-size:12px;text-align:center;border:solid black 1px;-Moz-border-radius:5px 5px 5px 5px;" ></div>
// </div>
//
// The parent <DIV> must be assigned a unique ID name
// and must have a style position of position:absolute; or position:relative;
//
// It is recommended that each image has an initial SRC image defined
// and has specified width and height.
//
// The script changes the image cursors to pointer/hand during initialisation.
//
// **** Optional PopUp Message Panel
//
// The optional PopUp Message Panel consists of the first <DIV> nested in the parent <DIV>
//
// The appearance may be customised with style attributes.
// The style attributes of
// 'position:absolute;visibility:hidden;' are essential
// and also applied during the script initialisation
//
// MouseOver of an image will display a Message Panel with a default position of
// Horizontal - imediately below and centered on the image
// Vertical - imediately to the left and centered on the image.
// The default position may be adjusted in the initialisation call (see Initialisation)
// MouseOut of the image will hide the Message Panel
//
// The message displayed in the panel is defined in the image array (see Customising Notes)
//
// **** Initialisation
//
// The script is initialised by a <BODY> or window onload event
// e.g.
// <body onload="zxcDisplay('V','fred',ImgPath,ImgAry,5,0);" >
// where:
// parameter 0 = the mode 'V' = Vertiacal, 'H' = Horizontal (string 'V' or 'H')
// parameter 1 = the unique ID name of the parent element (string)
// parameter 2 = a common image file path (see Customising Notes) (variable or string)
// parameter 3 = the array containing the image data (see Customising Notes) (variable or string)
// parameter 4 = (optional) the horizontal(X) offset of the message popup (digits)
// parameter 5 = (optional) the vertical(Y) offset of the message popup (digits)
//
// Note: The script changes the image cursors to pointer/hand during initialisation.
//
// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These charactors are easily changed to charactors of choise using global find and replace.
//
// The functional code(about 3K) is best as an external JavaScript
//
// Tested with IE6 and Mozilla FireFox
//
// Customising Variables
var ImgPath=' // The common path of the images, or make '' and prefix path to image file name
var ImgAry=new Array();
// Field 0 = Image file name (string)
// Field 1 = Image link URL (string or null if not required)
// Field 2 = Image title (string or null if not required)
// Field 3 = Image message (string or omit if not required)
ImgAry[0]=['Zero.gif' ,' 0'];
ImgAry[1]=['One.gif' ,' 1'];
ImgAry[2]=['Two.gif' ,' 2'];
ImgAry[3]=['Three.gif' ,' 3'];
ImgAry[4]=['Four.gif' ,' 4'];
ImgAry[5]=['Five.gif' ,' 5'];
ImgAry[6]=['Six.gif' ,' 6'];
ImgAry[7]=['Seven.gif' ,' 7'];
// Functional Code - NO NEED to Change
var zxcCursor='pointer';
if (document.all){ zxcCursor='hand'; }
function zxcDisplay(zxcmd,zxcpobj,zxcpath,zxcary,zxcxos,zxcyos){
if (typeof(zxcpobj)=='string'){ zxcpobj=document.getElementById(zxcpobj); }
var ary=[];
zxcary=zxcary.randomise();
var zxcimgs=zxcpobj.getElementsByTagName('IMG');
var zxcmess=zxcpobj.getElementsByTagName('DIV')[0];
if (zxcmess){
zxcmess.parentNode.removeChild(zxcmess);
document.getElementsByTagName('BODY')[0].appendChild(zxcmess);;
zxcmess.style.position='absolute';
zxcmess.style.visibility='hidden';
}
for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
zxcimgs[zxc0].src=zxcpath+zxcary[zxc0][0];
if (zxcary[zxc0][2]){ zxcimgs[zxc0].title=zxcary[zxc0][2]; }
if (zxcary[zxc0][1]){
zxcimgs[zxc0].url=zxcary[zxc0][1];
zxcimgs[zxc0].onclick=function(){ zxcLink(this); }
zxcimgs[zxc0].style.cursor=zxcCursor;
}
zxcimgs[zxc0].style.position='relative';
zxcimgs[zxc0].style.left='0px';
zxcimgs[zxc0].style.top='0px';
if (zxcmess&&(zxcary[zxc0][2]||zxcary[zxc0][3])){
zxcimgs[zxc0].popup=zxcmess.cloneNode(true);
zxcimgs[zxc0].onmouseover=function(){ zxcPopUp(this); }
zxcimgs[zxc0].onmouseout=function(){ this.popup.style.visibility='hidden'; }
zxcmess.parentNode.appendChild(zxcimgs[zxc0].popup);
zxcimgs[zxc0].popup.innerHTML=(zxcary[zxc0][1]||'')+'<br>'+(zxcary[zxc0][3]||zxcary[zxc0][2]);
zxcimgs[zxc0].xyos=[zxcmd||'H',zxcxos||0,zxcyos];
}
}
if (zxcmd!='V'){ return; }
zxcimgs[0].style.position='absolute';
for (var zxc1=1;zxc1<zxcimgs.length;zxc1++){
zxcimgs[zxc1].style.position='absolute';
zxcimgs[zxc1].style.top=(zxcimgs[zxc1-1].offsetTop+zxcimgs[zxc1-1].height)+'px';
}
zxcpobj.style.height=(zxcimgs[zxcimgs.length-1].offsetTop+zxcimgs[zxcimgs.length-1].offsetHeight)+'px';
}
function zxcPopUp(zxcobj){
zxcobj.popup.style.zIndex='1';
zxcobj.popup.style.visibility='visible';
if (zxcobj.xyos[0]=='V'){
zxcobj.popup.style.left=(zxcPos(zxcobj)[0]-zxcobj.popup.offsetWidth-zxcobj.xyos[1])+'px';
zxcobj.popup.style.top=(zxcPos(zxcobj)[1]-(zxcobj.popup.offsetHeight-zxcobj.offsetHeight)/2+zxcobj.xyos[2])+'px';
}
else {
zxcobj.popup.style.left=(zxcPos(zxcobj)[0]-(zxcobj.popup.offsetWidth-zxcobj.offsetWidth)/2+zxcobj.xyos[1])+'px';
zxcobj.popup.style.top=(zxcPos(zxcobj)[1]+zxcobj.offsetHeight+zxcobj.xyos[2])+'px';
}
}
function zxcLink(zxcobj){
window.top.location=zxcobj.url;
}
Array.prototype.randomise=function(){
this.cnt=0; this.ta=[];
while (this.cnt<this.length){
zxctmp=Math.floor(Math.random()*this.length-1)+1;
if (!this.ta[zxctmp]){this.ta[zxctmp]=this[this.cnt]; this.cnt++; }
}
return this.ta;
}
function zxcPos(zxc){
zxcObjLeft = zxc.offsetLeft;
zxcObjTop = zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return [zxcObjLeft,zxcObjTop];
}
//-->
</script>
<br>
<br>
<br>
</body>
</html>
I'm currently working on a homepage for a graphic designer.
I want the page to be very playful and non-static.
The idea is to have some sort of thumbnail gallery that shows images with random positions every time you enter the site.
I've found a script and costomized it a bit and it almost do what i want. But. The thing is that the images appears in a random order, not really in a random position. I dont want them to follow a horisontical line and be attached to eachother, i want them to appear wherever on the page, no grid or nothing, just totaly random (would be great if they didn't overlap though)
So i will post the html code and hopefully it is possible to modify the code so it does what im looking for! And if that wont work, maybe you have another script that does what im looking for?
Thanks!
Regards,
Aron K
The code:
<HTML>
<HEAD>
<script>
function InitScripts(){
if (self.location.toString().toLowerCase().match('vicsjavascripts')){
pnInitSearchPanel();
}
zxcDisplay('H','fred',ImgPath,ImgAry,0,0);
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body bgColor="FFFFFF" onload="InitScripts()" >
<div id="fred" style="position:relative; left: 17px; top: 17px;" >
<img src=" <img src=" <img src=" <img src=" <img src=" <img src=" <img src=" <img src=" <div style="width:148px;height:30px;background-color:#FFFFFF;padding:5px;font-size:12px;text-align:center;border:solid black 1px;" ></div>
</div>
<script language="JavaScript" type="text/javascript">
<!--
// Display a Group of Random Images (14-May-2006)
// by Vic Phillips
// To Display a Group of Random Images
// in a Horizontal or Vertical display.
// With optional titles, links and PopUp.
// As many groups containing as many images as required
// Application Notes
//
// **** The HTML Code
//
// Each group of images nested in a parent <DIV> defined in the HTML Code
// e.g.
// <div id="fred" style="position:relative;" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <img src="Blank.gif" width=100 height="50" >
// <div style="position:absolute;visibility:hidden;width:200px;height:50px;background-color:#FFFFCC;padding:10px;font-size:12px;text-align:center;border:solid black 1px;-Moz-border-radius:5px 5px 5px 5px;" ></div>
// </div>
//
// The parent <DIV> must be assigned a unique ID name
// and must have a style position of position:absolute; or position:relative;
//
// It is recommended that each image has an initial SRC image defined
// and has specified width and height.
//
// The script changes the image cursors to pointer/hand during initialisation.
//
// **** Optional PopUp Message Panel
//
// The optional PopUp Message Panel consists of the first <DIV> nested in the parent <DIV>
//
// The appearance may be customised with style attributes.
// The style attributes of
// 'position:absolute;visibility:hidden;' are essential
// and also applied during the script initialisation
//
// MouseOver of an image will display a Message Panel with a default position of
// Horizontal - imediately below and centered on the image
// Vertical - imediately to the left and centered on the image.
// The default position may be adjusted in the initialisation call (see Initialisation)
// MouseOut of the image will hide the Message Panel
//
// The message displayed in the panel is defined in the image array (see Customising Notes)
//
// **** Initialisation
//
// The script is initialised by a <BODY> or window onload event
// e.g.
// <body onload="zxcDisplay('V','fred',ImgPath,ImgAry,5,0);" >
// where:
// parameter 0 = the mode 'V' = Vertiacal, 'H' = Horizontal (string 'V' or 'H')
// parameter 1 = the unique ID name of the parent element (string)
// parameter 2 = a common image file path (see Customising Notes) (variable or string)
// parameter 3 = the array containing the image data (see Customising Notes) (variable or string)
// parameter 4 = (optional) the horizontal(X) offset of the message popup (digits)
// parameter 5 = (optional) the vertical(Y) offset of the message popup (digits)
//
// Note: The script changes the image cursors to pointer/hand during initialisation.
//
// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These charactors are easily changed to charactors of choise using global find and replace.
//
// The functional code(about 3K) is best as an external JavaScript
//
// Tested with IE6 and Mozilla FireFox
//
// Customising Variables
var ImgPath=' // The common path of the images, or make '' and prefix path to image file name
var ImgAry=new Array();
// Field 0 = Image file name (string)
// Field 1 = Image link URL (string or null if not required)
// Field 2 = Image title (string or null if not required)
// Field 3 = Image message (string or omit if not required)
ImgAry[0]=['Zero.gif' ,' 0'];
ImgAry[1]=['One.gif' ,' 1'];
ImgAry[2]=['Two.gif' ,' 2'];
ImgAry[3]=['Three.gif' ,' 3'];
ImgAry[4]=['Four.gif' ,' 4'];
ImgAry[5]=['Five.gif' ,' 5'];
ImgAry[6]=['Six.gif' ,' 6'];
ImgAry[7]=['Seven.gif' ,' 7'];
// Functional Code - NO NEED to Change
var zxcCursor='pointer';
if (document.all){ zxcCursor='hand'; }
function zxcDisplay(zxcmd,zxcpobj,zxcpath,zxcary,zxcxos,zxcyos){
if (typeof(zxcpobj)=='string'){ zxcpobj=document.getElementById(zxcpobj); }
var ary=[];
zxcary=zxcary.randomise();
var zxcimgs=zxcpobj.getElementsByTagName('IMG');
var zxcmess=zxcpobj.getElementsByTagName('DIV')[0];
if (zxcmess){
zxcmess.parentNode.removeChild(zxcmess);
document.getElementsByTagName('BODY')[0].appendChild(zxcmess);;
zxcmess.style.position='absolute';
zxcmess.style.visibility='hidden';
}
for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
zxcimgs[zxc0].src=zxcpath+zxcary[zxc0][0];
if (zxcary[zxc0][2]){ zxcimgs[zxc0].title=zxcary[zxc0][2]; }
if (zxcary[zxc0][1]){
zxcimgs[zxc0].url=zxcary[zxc0][1];
zxcimgs[zxc0].onclick=function(){ zxcLink(this); }
zxcimgs[zxc0].style.cursor=zxcCursor;
}
zxcimgs[zxc0].style.position='relative';
zxcimgs[zxc0].style.left='0px';
zxcimgs[zxc0].style.top='0px';
if (zxcmess&&(zxcary[zxc0][2]||zxcary[zxc0][3])){
zxcimgs[zxc0].popup=zxcmess.cloneNode(true);
zxcimgs[zxc0].onmouseover=function(){ zxcPopUp(this); }
zxcimgs[zxc0].onmouseout=function(){ this.popup.style.visibility='hidden'; }
zxcmess.parentNode.appendChild(zxcimgs[zxc0].popup);
zxcimgs[zxc0].popup.innerHTML=(zxcary[zxc0][1]||'')+'<br>'+(zxcary[zxc0][3]||zxcary[zxc0][2]);
zxcimgs[zxc0].xyos=[zxcmd||'H',zxcxos||0,zxcyos];
}
}
if (zxcmd!='V'){ return; }
zxcimgs[0].style.position='absolute';
for (var zxc1=1;zxc1<zxcimgs.length;zxc1++){
zxcimgs[zxc1].style.position='absolute';
zxcimgs[zxc1].style.top=(zxcimgs[zxc1-1].offsetTop+zxcimgs[zxc1-1].height)+'px';
}
zxcpobj.style.height=(zxcimgs[zxcimgs.length-1].offsetTop+zxcimgs[zxcimgs.length-1].offsetHeight)+'px';
}
function zxcPopUp(zxcobj){
zxcobj.popup.style.zIndex='1';
zxcobj.popup.style.visibility='visible';
if (zxcobj.xyos[0]=='V'){
zxcobj.popup.style.left=(zxcPos(zxcobj)[0]-zxcobj.popup.offsetWidth-zxcobj.xyos[1])+'px';
zxcobj.popup.style.top=(zxcPos(zxcobj)[1]-(zxcobj.popup.offsetHeight-zxcobj.offsetHeight)/2+zxcobj.xyos[2])+'px';
}
else {
zxcobj.popup.style.left=(zxcPos(zxcobj)[0]-(zxcobj.popup.offsetWidth-zxcobj.offsetWidth)/2+zxcobj.xyos[1])+'px';
zxcobj.popup.style.top=(zxcPos(zxcobj)[1]+zxcobj.offsetHeight+zxcobj.xyos[2])+'px';
}
}
function zxcLink(zxcobj){
window.top.location=zxcobj.url;
}
Array.prototype.randomise=function(){
this.cnt=0; this.ta=[];
while (this.cnt<this.length){
zxctmp=Math.floor(Math.random()*this.length-1)+1;
if (!this.ta[zxctmp]){this.ta[zxctmp]=this[this.cnt]; this.cnt++; }
}
return this.ta;
}
function zxcPos(zxc){
zxcObjLeft = zxc.offsetLeft;
zxcObjTop = zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return [zxcObjLeft,zxcObjTop];
}
//-->
</script>
<br>
<br>
<br>
</body>
</html>