Solved

Image Thumbnail Viewer

Posted on 2004-10-05
3
364 Views
Last Modified: 2008-02-01
Hi Experts,

I found the following javascript code at this site: http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm. My question is: How can I modify it to make the first picture on, so when someone goes to the site the first picture is already displayed. I have tried different ways but haven't had any success so far.

Many Thanks


<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
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["photo1.jpg", "http://www.cnn.com"]
dynimages[1]=["photo2.jpg", "http://www.yahoo.com"]
dynimages[2]=["photo3.jpg", "http://www.google.com"]

//Preload images ("yes" or "no"):
var preloadimg="no"

//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="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

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.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

</script>



<a href="#" onMouseover="modifyimage('dynloadarea', 0)">image 1 (onmouseover)</a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)">image 2 (onmouseover)</a><br>
<a href="#" onClick="return modifyimage('dynloadarea2', 2)">image 3 (onclick)</a><p>

<div id="dynloadarea" style="width:80px;height:225px"></div>

<div id="dynloadarea2" style="width:80px;height:200px"></div>
0
Comment
Question by:eric2405
  • 2
3 Comments
 
LVL 33

Accepted Solution

by:
sajuks earned 500 total points
ID: 12225083
//try this
<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
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["http://www.dynamicdrive.com/dynamicindex14/photo1.jpg", "http://www.cnn.com"]
dynimages[1]=["http://www.dynamicdrive.com/dynamicindex14/photo2.jpg", "http://www.yahoo.com"]
dynimages[2]=["http://www.dynamicdrive.com/dynamicindex14/photo3.jpg", "http://www.google.com"]

//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="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

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.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

</script>

<body onload ="modifyimage('dynloadarea', 0)">

<a href="#" onMouseover="modifyimage('dynloadarea', 0)">image 1 (onmouseover)</a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)">image 2 (onmouseover)</a><br>
<a href="#" onClick="return modifyimage('dynloadarea2', 2)">image 3 (onclick)</a><p>

<div id="dynloadarea" style="width:80px;height:225px"></div>

<div id="dynloadarea2" style="width:80px;height:200px"></div>
</body>
0
 
LVL 1

Author Comment

by:eric2405
ID: 12225153
Thanks a lot sajuks, I couldn't see that while programming.
0
 
LVL 33

Expert Comment

by:sajuks
ID: 12225366
Thanks for the points and grade
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to deal with the query string 8 38
Reactjs with .NET 3 39
JavaScript Sort Ordering and Choice Limiting 5 27
Validating Date Part2 2 8
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question