Thumbnail Viewer and Iframes
Hello to all! I am new, a little special and very aware of it. my question is this:
How can I use the Thumbnail viewer to display an Iframe w/scrollbar on mouseover and then have the iframe replaced when I mouseover the next thumbnail to display an image?
Here is a link to a sample of the page I am building:
http://www.myfancyphoto.com/dragonfly%20web/menu2.html
Here is the code I have attempted to modify:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0011)about:blank -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified here to accept external text file as well as images
* Modified for optional captions, read all comments in top
* of script and in HTML code below.
* Modifications © John Davenport Scheuer - jscheuer1TAKETHISOUTTOUSEEMAIL@comcast.net
***********************************************/
/*
IMPORTANT NOTE - In most cases specifying only a small external file for display
will yield the best results - IMPORTANT NOTE
Specify image/text file paths and optional link (set link to "" for no link)
set third parameter to "i" for image file, "t" for text file: */
var dynimages=new Array()
dynimages[0]=["test.html","", ]
dynimages[1]=["news.html", "", "t"]
dynimages[2]=["photo3.jpg", "http://www.google.com", "i"]
dynimages[3]=["ext.htm", "http://www.google.com", "t"]
//Set scrolling for text content if text content used("yes" or "no"):
var scrolltext="yes"
//Preload images ("yes" or "no"):
var preloadimg="yes"
//Set optional link target to be added to all images with a link:
var optlinktarget=""
//Set image border width
var imgborderwidth=0
//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progidXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
///////No need to edit beyond here/////
if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
if (dynimages[x][2]=='i'){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}
}
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
if (theimg[2]=="i")
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[2]=="t"){
scrollHeight=(document.getElementByID)?document.getElementById('dynloadarea').style.height:document.all('dynloadarea').style.height
scrollWidth=(document.getElementByID)?document.getElementById('dynloadarea').style.width:document.all('dynloadarea').style.width
imghtml+='<iframe src="'+theimg[0]+'" frameborder="'+imgborderwidth+'" height="'+scrollHeight+'" width="'+scrollWidth+'" scrolling="'+scrolltext+'"></iframe>'
}
//if (theimg[2]=="t")
//imghtml+='<iframe src="'+theimg[0]+'" frameborder="'+imgborderwidth+'" height="'+document.getElementById("dynloadarea").style.height+'" scrolling="'+scrolltext+'"></iframe>'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
function modifyimage(loadarea, imgindex){
//get_cap('');
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
//var frameheight=imgobj.style.height
//alert(frameheight)
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
//function get_cap(cap){
//if (document.getElementById){
//document.getElementById('caploadarea').innerHTML=cap;}
//else if (document.all){
//document.all('caploadarea').innerHTML=cap;}
//else{
//return;}
//}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #DEBEDE;
}
-->
</style></head>
<body>
<table width="900" height="590" border="0" align="center" cellpadding="0" cellspacing="0" background="images/menubasepage.jpg">
<tr>
<td><table width="900" height="592" border="0" cellpadding="0" cellspacing="0" background="spacer.gif">
<tr>
<td width="900"><table width="900" height="590" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="56" colspan="3"><img src="images/navbar.jpg" width="900" height="56" border="0" usemap="#Map" /></td>
</tr>
<tr>
<td width="306" align="center"> </td>
<td width="276" align="center">
<p>
<!--Configure your links below, notice that if you add ;get_cap(this.name); to the onMouseover event
and a name to the anchor tag, you will get a caption -->
<a href="#" onMouseover="modifyimage('dynloadarea', 0);"><img src="images\menubobatea.jpg" width=261px height=44px border=0 alt="" title=""></a><br><a href="#" onMouseover="modifyimage('dynloadarea', 1)"><img src="images\menublendedspecialties.jpg" width=261px height=53px border=0 alt="" title=""></a><br> <br>
<a href="#" onMouseover="modifyimage('dynloadarea', 2)"><img src=thumb3.jpg width=50px height=50px border=0 alt="" title=""></a><br> <br>
<a href="#" name="Above is Some Text Content" onMouseover="modifyimage('dynloadarea', 3);get_cap(this.name);">Text Content</a><p>
<!--Configure size of display areas below -->
<!--<div id="dynloadarea" style="width:140px;height:225px"></div>
<hr align=left width=140>
<div id="caploadarea" style="width:200px;height:2em;text-align:left"></div>-->
<br>
</p></td>
<td width="318" align="center">
<div id="dynloadarea" style="width:235px;height:445px"></div>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<map name="Map" id="Map"><area shape="rect" coords="16,17,88,48" href="#" /><area shape="rect" coords="112,17,160,48" href="#" /><area shape="rect" coords="185,16,254,49" href="#" /><area shape="rect" coords="276,16,387,52" href="#" /><area shape="rect" coords="409,16,493,49" href="#" /><area shape="rect" coords="512,15,630,50" href="#" /><area shape="rect" coords="646,13,799,50" href="#" /><area shape="rect" coords="816,14,886,48" href="#" /></map></body>
</html>
Thank you in advance to anyone who is even willing to attempt to help!
CSS Codes
Reply With Quote
and by the way thank you for the modifications you made to allow the iframe to work within the thumbnail viewer. I really like the way it looks and functions on the page.
Bookmarks