proy31
asked on
Image Gallery
I have a DHTML / Javascript image gallary. The way it works is that it loads 3 thumbnails, and mouse over results in the big image being displayed.
However, i want it to start with a preset image rather than having to trigger it by mousing over the thumbnail.
my code is as follows.
<script type="text/javascript">
var dynimages=new Array()
dynimages[0]=["/images/pho to1.jpg", ""]
dynimages[1]=["/images/pho to2.jpg", ""]
dynimages[2]=["/images/pho to3.jpg", ""]
var preloadimg="yes"
var optlinktarget=""
var imgborderwidth=0
var filterstring="progid:DXIma geTransfor m.Microsof t.Pixelate (MaxSquare =15,Durati on=1)"
if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0 ]
}
}
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'" >'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+' ">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElement ById(loada rea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filter string
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimg code(dynim ages[imgin dex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
</script>
<link href="/core/css/style_main _guests.cs s" rel="stylesheet" type="text/css">
<table width="102%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td><img src="/images/mem_prof.gif" width="203" height="22"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td width="203" valign="top"><div align="center">
<table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#CCCCCC" class="thumbnailborder">
<tr>
<td colspan="3"><div align="center">
<div id="dynloadarea" style="width:192px;height: 212px"></d iv>
</div></td>
</tr>
<tr>
<td width="34%"><div align="right"><a href="#" onMouseOver="modifyimage(' dynloadare a', 2)"><img border="0" src="/images/photo1.jpg" width="58" height="58"></a></div></td >
<td width="33%"><div align="center"><a href="#" onMouseOver="modifyimage(' dynloadare a', 1)"><img border="0" src="/images/photo2.jpg" width="58" height="58"></a></div></td >
<td width="33%"><div align="left"><a href="#" onMouseOver="modifyimage(' dynloadare a', 0)"><img border="0" src="/images/photo3.jpg" width="58" height="58"></a></div></td >
</tr>
</table>
</div></td>
Thanks in advance
However, i want it to start with a preset image rather than having to trigger it by mousing over the thumbnail.
my code is as follows.
<script type="text/javascript">
var dynimages=new Array()
dynimages[0]=["/images/pho
dynimages[1]=["/images/pho
dynimages[2]=["/images/pho
var preloadimg="yes"
var optlinktarget=""
var imgborderwidth=0
var filterstring="progid:DXIma
if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0
}
}
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'"
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElement
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filter
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimg
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
</script>
<link href="/core/css/style_main
<table width="102%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td><img src="/images/mem_prof.gif"
<td colspan="2"> </td>
</tr>
<tr>
<td width="203" valign="top"><div align="center">
<table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#CCCCCC" class="thumbnailborder">
<tr>
<td colspan="3"><div align="center">
<div id="dynloadarea" style="width:192px;height:
</div></td>
</tr>
<tr>
<td width="34%"><div align="right"><a href="#" onMouseOver="modifyimage('
<td width="33%"><div align="center"><a href="#" onMouseOver="modifyimage('
<td width="33%"><div align="left"><a href="#" onMouseOver="modifyimage('
</tr>
</table>
</div></td>
Thanks in advance
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.