PDA

View Full Version : CMotion Image Gallery Help



rdodson4
08-18-2006, 07:38 PM
1) Script Title: CMotion Image Gallery

2) Script URL (on DD):

3) Describe problem: I am using this gallery and trying to add to it the Textual Tooltip Script II for a description of the image. I have it working, but what I want to do is have the text that appears in the tooltip come from an external html document. I am familiar with html, css and a little bit of javascript.

Any help will be greatly appreciated.

jr_yeo
08-18-2006, 08:08 PM
123456

rdodson4
08-19-2006, 02:01 PM
I don't have this posted to a url. I'm trying to make it work before I post it anywhere. All I have is the working copy of my htlm file that I am using.
I want to use content from an external html file to be displayed on the onmouseover function. I have a client who is computer illiterate when it comes to this stuff and he wants to be able to change the images and the description text. If you can come up with a better idea, I'm open to suggestions.

Thanks

Here's the code on my page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
#loadarea {
filter:progid:DXImageTransform.Microsoft.Fade();
}


#iframe {margin-left: 275px; margin-top: -400px;}
</style>
<script type="text/javascript">
//Cmotion Gallery script
//Set array of larger images
var dynimages=new Array()
dynimages[0]="images/photo01.jpg"
dynimages[1]="images/photo02.jpg"
dynimages[2]="images/photo03.jpg"
dynimages[3]="images/photo04.jpg"
dynimages[4]="images/photo05.jpg"
dynimages[5]="images/photo06.jpg"
dynimages[6]="images/photo07.jpg"
dynimages[7]="images/photo08.jpg"
dynimages[8]="images/photo09.jpg"
dynimages[9]="images/photo10.jpg"

for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}

var notloaded=1;
function loadFrame(id, num){
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Apply();
document.getElementById(id).src=dynimages[num]
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Play();
return false;
}

</script>

<script>
<!--

/*
Textual Tooltip Script II-
Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/


var content=new Array()
//change the array below to the text associated with your links Expand or contract the array, depending on how many links you have
content[0]='<br><big><b>Home Page</b></big><br>This is where everything starts. A springboard to free utilities and programs.'
content[1]='<br><big><b>Javascript Archives</b></big><br>Hundreds of free scripts to download and use on your own website.'
content[2]='<br><big><b>Design Set Templates</b></big><br>Seventy-five original themed and border set templates for free.'
content[3]='<br><big><b>Microsoft Office Tips</b></big><br>Hundreds of tips for every Office Application.'
content[4]='<br><big><b>MS Tutorials</b></big><br>User assistance tutorials for Microsoft Office programs.'
content[5]='<br><big><b>Guestbook</b></big><br>Read what others have to say bout this site or leave your own opinion.'
content[6]='<br><big><b>Feedback</b></big><br>Send in your comments or ask for help with our feedback system.'
content[7]='<br><big><b>Message Boards and Forums</b></big><br>See questions from our readers and answers from the experts.'
content[8]='<br><big><b>Site Index</b></big><br>A complete listing of all areas you can find on this website.'
content[9]='<br><big><b>Microsoft Office Tips</b></big><br>Hundreds of tips for every Office Application.'
content[10]='<br><big><b>Microsoft Office Tips</b></big><br>Hundreds of tips for every Office Application.'

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}

function changetext(whichcontent){
if (document.all)
descriptions.innerHTML='<font face="Verdana"><small>'+whichcontent+'<font></small>'
else if (document.layers){
document.d1.document.d2.document.write('<font face="Verdana"><small>'+whichcontent+'</small></font>')
document.d1.document.d2.document.close()
}

}

//-->
</script>

</head>

<body>



<nobr id="trueContainer">
<a href="#" onMouseover="changetext(content[0])"; onClick="return loadFrame('loadarea', 0);"><img src="images/thumb01.jpg" border="1" /></a>
<a href="#" onMouseover="changetext(content[1])"; onClick="return loadFrame('loadarea', 1);"><img src="images/thumb02.jpg" border="1" /></a><br />
<a href="#" onMouseover="changetext(content[2])"; onClick="return loadFrame('loadarea', 2);"><img src="images/thumb03.jpg" border="1" /></a>
<a href="#" onMouseover="changetext(content[3])"; onClick="return loadFrame('loadarea', 3);"><img src="images/thumb04.jpg" border="1" /></a><br />
<a href="#" onMouseover="changetext(content[4])"; onClick="return loadFrame('loadarea', 4);"><img src="images/thumb05.jpg" border="1" /></a>
<a href="#" onMouseover="changetext(content[5])"; onClick="return loadFrame('loadarea', 5);"><img src="images/thumb06.jpg" border="1" /></a><br />
<a href="#" onMouseover="changetext(content[6])"; onClick="return loadFrame('loadarea', 6);"><img src="images/thumb07.jpg" border="1" /></a>
<a href="#" onMouseover="changetext(content[7])"; onClick="return loadFrame('loadarea', 7);"><img src="images/thumb08.jpg" border="1" /></a><br />
<a href="#" onMouseover="changetext(content[8])"; onClick="return loadFrame('loadarea', 8);"><img src="images/thumb09.jpg" border="1" /></a>
<a href="#" onMouseover="changetext(content[9])"; onClick="return loadFrame('loadarea', 9);"><img src="images/thumb10.jpg" border="1" /></a>
</nobr>

<div id="iframe">
<iframe id="loadarea" src="about:blank" onload="if(notloaded){loadFrame('loadarea', 4);notloaded=0;};" width="525" height="400" scrolling="auto" frameborder="0" marginwidth="0" marginheight="0"></iframe>
</div>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%"><TR>
<TD WIDTH="30%" ALIGN="LEFT" VALIGN="TOP">
<div id="scriptmenu" style="line-height:20px"><p><strong><font face="Verdana">
<a href="http://jdstiles.com/" onMouseover="changetext(content[0])"><small>Home Page</small></a><br />
<a href="http://jdstiles.com/javamain.html" onMouseover="changetext(content[1])"><small>Javascript Archives</small></a><br />
<a href="http://jdstiles.com/sets/" onMouseover="changetext(content[2])"><small>Design Sets</small></a><br />
<a href="http://jdstiles.com/tips/" onMouseover="changetext(content[3])"><small>Microsoft Office Tips</small></a><br />
<a href="http://jdstiles.com/mso2k/" onMouseover="changetext(content[4])"><small>MS Tutorials</small></a><br />
<a href="http://jdstiles.com/java/guestbook.html" onMouseover="changetext(content[5])"><small>Guestbook</small></a><br />
<a href="http://jdstiles.com/java/feedbackmain.html" onMouseover="changetext(content[6])"><small>Feedback</small></a><br />
<a href="http://jdstiles.com/v-web/bulletin/bb/index.php" onMouseover="changetext(content[7])"><small>Message Forums</small></a><br />
<a href="http://jdstiles.com/sitetree.html" onMouseover="changetext(content[8])"><small>Site Index</small></a></font></strong></p>
</div>
</TD>
<TD WIDTH="70%" ALIGN="LEFT" VALIGN="TOP">
<ilayer id="d1" width="155" height="155">
<layer id="d2" width="155" height="155">
<div id="descriptions" align="left">
</div></ilayer></layer></TD></TR></TABLE>

</body>
</html>

jr_yeo
08-20-2006, 07:02 AM
hey, other guyz from DD forums help this OP over here :cool:
i can't be much help to the OP :p

jscheuer1
08-20-2006, 08:08 AM
Well, at least get the OP to post a link to the scripts here on DD that he/she is using.

I will say that drawing tips for a script from an external HTML page isn't generally as good an idea as drawing them from an external javascript file.

rdodson4
08-20-2006, 02:47 PM
The two scripts that I am trying to use are:

Textual tooltip Script:
http://www.dynamicdrive.com/dynamicindex5/linkinfo.htm

CMotion Image Gallery:
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm


I have thought of using an external js file but was not sure how to tie everything together.

Thanks for your help

jscheuer1
08-20-2006, 06:17 PM
Remove this from the Textual tooltip Script:


var content=new Array()
//change the array below to the text associated with your links Expand or contract the array, depending on how many links you have
content[0]='<br><big><b>Menus and navigation systems</b></big><br>Click here for DHTML scripts that help enhance your site\'s navigability, such as collapsible menus, sliding menu bars etc.'
content[1]='<br><big><b>Special document effects</b></big><br>With the advent of DHTML, webpages are one step closer to its cousin, TV, in terms of special effects...'
content[2]='<br><big><b>Scrollers</b></big><br>Up until now, adding a scroller or tickertape to your website usually meant using a slow Java applet. Not anymore. Click here for DHTML scrollers that accomplish the same task with minimal download time.'
content[3]='<br><big><b>Image effects</b></big><br>Add lightweight effects to your existing images using these scripts. Make them fly, light up, turn static, all without paying the cost of slow downloading time.'
content[4]='<br><big><b>Links and buttons</b></big><br>Add tooltips to your text links, rollover effects to your form buttons, keyboard features to your document, and more.'
content[5]='<br><big><b>Dynamic clocks and dates</b></big><br>Time is never static, so why should your time script be? Enter for DHTML scripts that actually understand this simple truth.'
content[6]='<br><big><b>Text animations</b></big><br>Text have been silent for too long- DHTML promises to free them, with flying text, typing text, dragable text, and more.'
content[7]='<br><big><b>Browser window</b></big><br>Click here scripts related to the browser window and frames.'
content[8]='<br><big><b>Other</b></big><br>All scripts that don\'t comfortably fit in any of the above categories go here...'

and place it in a file named - say, tcontent.js and put this in the head of your page before Textual tooltip Script:


<script type="text/javascript" src="tcontent.js"></script>

Modify it to reflect the tips that you wish to use.