PDA

View Full Version : Cool Image Gallery

rlemon
04-19-2005, 03:04 AM
Cool little Image Gallery

>> Example:: http://www.rlemon.com/gallery/


source from above ^^^

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>gallery_template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div.subMnu {
position: absolute;
z-index: 2;
padding: 7px;
border: 1px solid #5C410A;
visibility: hidden;
width: 200px;
background-color: #B58E52;
layer-background-color: #B58E52;
}
div.mnu {
position: relative;
z-index: 1;
border: 2px solid #5C410A;
height: 20px;
padding: 1px;
}
</style>
<script>
function init(){
if(document.all){ //ie
document.bgColor = "#B58E52";
} else { //not ie
document.bgColor = "#B59252";
}
initItem();
}

// menu scripts
var myTimer;
var myMenus = 6;
function initItem(){
for(var i = 1; i <= myMenus; i++){
var menuID = 'mnu' + i;
var SmenuID = 'Smnu' + i;

var mnuX = document.getElementById(menuID).offsetLeft;
var mnuY = document.getElementById(menuID).offsetTop;

var SmnuX = mnuX;
var SmnuY = mnuY + 21;

document.getElementById(SmenuID).style.left = SmnuX;
document.getElementById(SmenuID).style.top = SmnuY;

}
}
function clearAll(){
myTimer = setTimeout("doClear()", 10);
}
function doClear(){
for(var i = 1; i <= myMenus; i++){
var SmenuID = 'Smnu' + i;
document.getElementById(SmenuID).style.visibility = 0 ? "visible" : "hidden";
}
}
function startSub(ID){
window.clearTimeout(myTimer);
document.getElementById(ID).style.visibility = 1 ? "visible" : "hidden";
}
function startSubt(ID){
doClear();
window.clearTimeout(myTimer);
document.getElementById(ID).style.visibility = 1 ? "visible" : "hidden";
}
function changeImage(filepath){
document.getElementById('mainImg').src = filepath;
}
function openImg(){
var isrc = document.getElementById('mainImg').src;
var winpop = window.open(isrc,isrc,"menubar=no,location=no,resizable=yes,scrollbars=yes,status=no");
}
</script>
</head>

<body onload="init()" onResize="initItem()" bgColor="#B59252">
<center>
<table height="648px" width="576px" cellspacing="0" cellpadding="0" border="0">
<tr>

<td colspan="3" background="t_images/bg_top.jpg" height="36px" width="576px">&nbsp;</td>
</tr>
<tr>
<td background="t_images/bg_topmiddle_left.jpg" height="24px" width="48px">&nbsp;
</td>
<td height="24px" width="482px" align="center">
<!-- MENU START -->
<table cellspacing="10">
<tr>

<td><div id="mnu1" onMouseOver="startSubt('Smnu1')" onMouseOut="clearAll()" class="mnu">Backgrounds</div></td>
<td><div id="mnu2" onMouseOver="startSubt('Smnu2')" onMouseOut="clearAll()" class="mnu">People1</div></td>
<td><div id="mnu3" onMouseOver="startSubt('Smnu3')" onMouseOut="clearAll()" class="mnu">People2</div></td>
<td><div id="mnu4" onMouseOver="startSubt('Smnu4')" onMouseOut="clearAll()" class="mnu">Things</div></td>
<td><div id="mnu5" onMouseOver="startSubt('Smnu5')" onMouseOut="clearAll()" class="mnu">Other1</div></td>
<td><div id="mnu6" onMouseOver="startSubt('Smnu6')" onMouseOut="clearAll()" class="mnu">Other2</div></td>
</tr>
</table>

<!-- MENU END -->
</td>
<td background="t_images/bg_topmiddle_right.jpg" height="24px" width="46px">&nbsp;
</td>
</tr>
<tr>
<td colspan="3" background="t_images/bg_mid_01.jpg" height="48px" width="576px">&nbsp;</td>
</tr>
<tr>

<td background="t_images/bg_mid_02.jpg" height="496px" width="48px">&nbsp;
</td>
<td height="496px" width="482px" align="center"><a href="#" onClick="openImg()" ><img src="t_images/spacer.jpg" id="mainImg" style="width: 400px; height:auto;">
</td>
<td background="t_images/bg_mid_03.jpg" height="496px" width="46px">&nbsp;
</td>
</tr>
<tr>
<td colspan="3" background="t_images/bg_bottom.jpg" height="45px" width="576px">&nbsp;</td>

</tr>
</table>
</center>

<!-- SUB MENUS -->
<div class="subMnu" id="Smnu1" onMouseOver="startSub('Smnu1')" onMouseOut="clearAll()"><img src="t_images/spacer.jpg" height="5px"><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/flowers.jpg')"><img src="small/flowerss.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/Liquid_Lightning_S1.jpg')"><img src="small/Liquid_Lightning_S1s.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/Music_Sounds_Of_Joy_1.jpg')"><img src="small/Music_Sounds_Of_Joy_1s.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/SPAWN_theSecond_by_your_angel.jpg')"><img src="small/SPAWN_theSecond_by_your_angels.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
</div>
<div class="subMnu" id="Smnu2" onMouseOver="startSub('Smnu2')" onMouseOut="clearAll()"><img src="t_images/spacer.jpg" height="5px"><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/sleeping.jpg')"><img src="small/sleepings.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/MY_level.jpg')"><img src="small/MY_levels.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/My_day_to_yell__by_your_angel.jpg')"><img src="small/My_day_to_yell__by_your_angels.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">

</div>
<div class="subMnu" id="Smnu3" onMouseOver="startSub('Smnu3')" onMouseOut="clearAll()"><img src="t_images/spacer.jpg" height="5px"><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/distress.jpg')"><img src="small/distresss.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/Disgust.jpg')"><img src="small/Disgusts.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
</div>
<div class="subMnu" id="Smnu4" onMouseOver="startSub('Smnu4')" onMouseOut="clearAll()"><img src="t_images/spacer.jpg" height="5px"><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/ROSe_BG_8X6_RGY_01_by_your_angel.jpg')"><img src="small/ROSe_BG_8X6_RGY_01_by_your_angels.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/ROSe_BG_8X6_RGY_02_by_your_angel.jpg')"><img src="small/ROSe_BG_8X6_RGY_02_by_your_angels.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/ROSe_BG_8X6_RGY_03_by_your_angel.jpg')"><img src="small/ROSe_BG_8X6_RGY_03_by_your_angels.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
</div>
<div class="subMnu" id="Smnu5" onMouseOver="startSub('Smnu5')" onMouseOut="clearAll()"><img src="t_images/spacer.jpg" height="5px"><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/boy___revised.jpg')"><img src="small/boy___reviseds.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/Drifting.jpg')"><img src="small/Driftings.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/regret.jpg')"><img src="small/regrets.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
</div>
<div class="subMnu" id="Smnu6" onMouseOver="startSub('Smnu6')" onMouseOut="clearAll()"><img src="t_images/spacer.jpg" height="5px"><br><img src="t_images/spacer.jpg" height="5px">
<a href="#" onClick="changeImage('big/TOGETHER_r02.jpg')"><img src="small/TOGETHER_r02s.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">

<a href="#" onClick="changeImage('big/orchids.jpg')"><img src="small/orchidss.jpg" border="0" style="width:150px; height:auto"></a><br><img src="t_images/spacer.jpg" height="5px">
</div>

<!-- END SUB MENUS -->
</body>
</html>
Single Paradox
04-19-2005, 10:46 PM
WOW thank you very much for the script, I'm not going to use it for an image gallery but I need it for a drop down menu, all the ones I've seen are too complicated for me =). Thank you very much!
rlemon
05-19-2005, 02:37 PM
umm, i sat down. and wrote it. not the best image gal i've done. only one with the drop down script.

look forward to seein the FAQ tool i'm makin.