DHTML thumnail » display script

fifeclub posted this at 18:46 — 4th August 2005.

Joined: Feb 2001

Please see the page I'm working on in Internet Explorer. (Problems in Firefox but I'll stick to one set of problems at a time)

http://tinyurl.com/cp7ca

This was created using a DHTML script from Dynamic Drive. In IE this works pretty close to how I'd like but there are a few customizations I'd like to make if somebody can tell me how to alter the code.

First, here's the code in the header:

&lt;script type="text/javascript"&gt;

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (<a href="http://www.dynamicdrive.com" class="bb-url">dynamicdrive.com</a>)
* Visit <a href="http://www.dynamicDrive.com" class="bb-url">http://www.dynamicDrive.com</a> 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]=["/images/portfolio_web/cmlb.jpg", ""]
dynimages[1]=["/images/portfolio_web/hampton.jpg", ""]
dynimages[2]=["/images/portfolio_web/narrowcast.jpg", ""]
dynimages[3]=["/images/portfolio_web/pstv.jpg", ""]
dynimages[4]=["/images/portfolio_web/softball.jpg", ""]
dynimages[5]=["/images/portfolio_web/southern.jpg", ""]

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

&lt;/script&gt;

And here's the code in the body:

<div class="center">

	<div id="dynloadarea" style="width:580px; height:180px"></div>

	<a href="#" onMouseover="modifyimage('dynloadarea', 0)" (onmouseover)>
		<img src="/images/portfolio_web/thumbs/cmlb.jpg" width="100" height="100" 
		style="border: none" alt="" /></a>
	<a href="#" onMouseover="modifyimage('dynloadarea', 1)" (onmouseover)>
		<img src="/images/portfolio_web/thumbs/hampton.jpg" width="100" height="100" 
		style="border: none" alt="" /></a>
	<a href="#" onMouseover="modifyimage('dynloadarea', 2) (onmouseover)">
		<img src="/images/portfolio_web/thumbs/narrowcast.jpg" width="100" height="100" 
		style="border: none" alt="" /></a>
	<a href="#" onMouseover="modifyimage('dynloadarea', 3)" (onmouseover)>
		<img src="/images/portfolio_web/thumbs/pstv.jpg" width="100" height="100" 
		style="border: none" alt="" /></a>
	<a href="#" onMouseover="modifyimage('dynloadarea', 4)" onmouseover)>
		<img src="/images/portfolio_web/thumbs/softball.jpg" width="100" height="100" 
		style="border: none" alt="" /></a>
	<a href="#" onMouseover="modifyimage('dynloadarea', 5)" (onmouseover)>
		<img src="/images/portfolio_web/thumbs/southern.jpg" width="100" height="100" 
		style="border: none" alt="" /></a>
</div>

So here's what I want to change:
1) Within the top dynloadarea div I'd like to include text along with the graphics that change. In other words, when you hover over a thumnail below, not only should the large image above change, but I'd also like to include a short paragraph description that would change too.
2) When the page first loads it begins with the top dynloadarea div blank. I'd like it to begin with a graphic (either a new graphic or maybe the one associated with the first thumbnail, as long as it's not just blank.)

Can these two things be done? How?

Thanks.

SearchBliss posted this at 14:21 — 7th August 2005.

He has: 267 posts

Joined: Feb 2005

I would contact and ask Dynamic Drive first. You may not have permission to do this, but if it is ok, they can help. After all, they did create it.

demonhale posted this at 16:41 — 7th August 2005.

He has: 3,278 posts

Joined: May 2005

You could find a mouseover text change script and relink it to the buttons the same way as the pic and youll have the effect you want for 1.... For 2, try to raise the image load area of the dive to a higher z-index... Then post a regular image below that div to have an image even when theres no mouse over event... Or set in javascript to auto focus on one of the image link element.... Im sure this can be done...

fifeclub posted this at 20:52 — 7th August 2005.

He has: 688 posts

Joined: Feb 2001

That z-index should be a great fix. I don't have time to fiddle right now but that sounds like it will work and easily too. Thanks.