Cross Marquee II adaptation for images question

[btvbill]

1) Script Title: Cross Marquee II (adapted for images instead of text)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

3) Someone adapted the Marquee II script to allow for images and it works great. Not being a whiz at JavaScript I was hoping there would be a way to add a mouseover to the images so that a slightly bigger image would display during mouseover and return to the original smaller image on mouseout. I have paste in the entire script below. If some kind soul could tweak it a bit to add a mouseover swap image, I'd greatly appreciate your help! Thanks.


/*
Vertical Pausing Slideshow - freely adapted from:
Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com
Modified by jscheuer1 for continuous content slideshow. Credit MUST stay intact for use
visit http://www.dynamicdrive.com/forums
*/

//Specify the marquee's width (in pixels)
var marqueewidth="180px"
//Specify the marquee's height
var marqueeheight="600px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1
//Specify initial pause before scrolling in milliseconds
var initPause=1000
//Specify start with Full(1)or Empty(0) Marquee
var full=1
//Pause marquee onMousever (0=no 1=yes)?
var pauseit=1
//Specify images' border
imgBorder=0

var photos=new Array();
//Specify images, optional link, optional target:
photos[0]=['bigbear.jpg', 'http://www.google.com', '_blank'] //Image w/link and target
photos[1]=['space.gif']
photos[2]=['cover.jpg', 'http://www.dynamicdrive.com'] //Image w/link
photos[3]=['space.gif']
photos[4]=['cover1.jpg'] //Plain Image
photos[5]=['space.gif']
photos[6]=['files/photo5.jpg']
photos[7]=['files/photo6.jpg']

////NO NEED TO EDIT BELOW THIS LINE////////////
var preload=new Array()
for (var i_tem = 0; i_tem < photos.length; i_tem++){
preload[i_tem]=new Image()
preload[i_tem].src=photos[i_tem][0]
}

var actualheight=marqueecontent=''
var copyspeed=marqueespeed
var pausespeed=(pauseit)? 0 : copyspeed
var iedom=document.all||document.getElementById
var cross_marquee, cross_marquee2, ns_marquee

for (var i_tem = 0; i_tem < photos.length; i_tem++){
if (typeof photos[i_tem][1]!=='undefined'){
marqueecontent+='<a href="'+photos[i_tem][1]+'"'
marqueecontent+=typeof photos[i_tem][2]!=='undefined'? ' target="'+photos[i_tem][2]+'"' : ''
marqueecontent+='>'
}
marqueecontent+='<img src="'+photos[i_tem][0]+'" alt="Image #'+[i_tem+1]+'" border="'+imgBorder+'"><br>'
marqueecontent+=typeof photos[i_tem][1]!=='undefined'? '</a>' : ''
}
if (iedom||document.layers){
with (document){
if (iedom){
write('<div style="overflow:hidden;"><div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;"><table align="center"><tr><td height="'+marqueeheight+'" align="center" valign="middle">Loading . . .</td></tr></table>')
write('</div><div id="iemarquee2" style="position:absolute;left:0px;top:0px;width:100%;">')
write('</div></div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')
write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
}
}

function populate(){
if (document.all)
for (var i_tem = 0; i_tem < preload.length; i_tem++)
if (typeof preload[i_tem].complete=='boolean'&&!preload[i_tem].complete){
setTimeout("populate();", 2000)
return;
}
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee2=document.getElementById? document.getElementById("iemarquee2") : document.all.iemarquee2
cross_marquee.style.top=(full==1)? '0px' : parseInt(marqueeheight)+0+"px"
cross_marquee2.innerHTML=cross_marquee.innerHTML=marqueecontent
actualheight=cross_marquee.offsetHeight
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+0)+"px" //indicates following #1
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.top=parseInt(marqueeheight)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualheight=ns_marquee.document.height
}
setTimeout('lefttime=setInterval("scrollmarquee()",20)',initPause)
}
window.onload=populate

function scrollmarquee(){

if (iedom){
if (parseInt(cross_marquee.style.top)<(actualheight*(-1)))
cross_marquee.style.top=(parseInt(cross_marquee2.style.top)+actualheight)+"px"
if (parseInt(cross_marquee2.style.top)<(actualheight*(-1)))
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight)+"px"
cross_marquee2.style.top=parseInt(cross_marquee2.style.top)-copyspeed+"px"
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
}

else if (document.layers){
if (ns_marquee.top>(actualheight*(-1)+8))
ns_marquee.top-=copyspeed
else
ns_marquee.top=parseInt(marqueeheight)+8
}
}
</script>

[jscheuer1]

Like this?

http://home.comcast.net/~jscheuer1/side/marquee_v_slide_enlarge.htm

[btvbill]

Like this?

http://home.comcast.net/~jscheuer1/side/marquee_v_slide_enlarge.htm

:) Perfect. Thanks John!
One question though. Is it possible to retain the links on the enlarged image?

[fraidie]

I have been trying to do a similiar thing...
check out this site and the screenshot mouseover on the right...

http://www.editpadpro.com/convenience.html

I looked at their source and couldn't figure it out...
Am new to a lot of this sort of stuff... only really done basic html etc in past.

any help on how they do that woudl be appreciated...
Will check out previous info and see if can tweak etc.

Thanx...

[jscheuer1]

I have been trying to do a similiar thing...
check out this site and the screenshot mouseover on the right...

http://www.editpadpro.com/convenience.html

I looked at their source and couldn't figure it out...
Am new to a lot of this sort of stuff... only really done basic html etc in past.

any help on how they do that woudl be appreciated...
Will check out previous info and see if can tweak etc.

Thanx...

That's a bit more complicated, of course and, Jan Goyvaerts' code is copyright with no permissions granted. I did play with his code a little though it isn't particularly well written (it does have some nice techniques) and it has limitations that would prevent it from being useful as an add-on to the Marquee discussed in this thread as well in any layout that doesn't present it with the exact sorts of conditions that it is expecting. Jan Goyvaerts obviously made this just for his own use. Here is an interesting script, free for non-commercial use:

http://vikjavev.no/highslide/

and another, free as far as I can tell but, best to contact the author (a link to his home page is on the last page of the instructions):

http://www.webreference.com/programming/javascript/gr/column8/

These and just about any script of this type will most likely have limitations if used as an add-on to the Marquee script or just about any script that already relies upon a special sort of layout. All moving image shows rely on special layouts. I don't mean a simple slide show, though even some of those do. I mean where the images actually move.

BTW, these two scripts were just the top two results of a Google search:

http://www.google.com/search?hl=en&lr=&client=opera&rls=en&hs=UYS&q=expand+thumbnail+javascript&btnG=Search

[jscheuer1]

:) Perfect. Thanks John!
One question though. Is it possible to retain the links on the enlarged image?

Yes. You would need to change the function disp(im) to this:


function disp(im){
var iTML='';
if(im.parentNode.tagName.toLowerCase()=='a')
iTML+='<a href="'+im.parentNode.href+'" target="'+im.parentNode.target+'">';
iTML+='<img src="'+im.src+'" border="0" style="width:'+[Math.floor(parseInt(marqueewidth)*parseInt(efactor)/100)]+'px;">';
if(im.parentNode.tagName.toLowerCase()=='a')
iTML+='</a>';
document.getElementById('disparea').innerHTML=iTML;
document.getElementById('disparea').style.visibility='visible';
}

And change this bit a little farther down in the code as show (change in red):


marqueecontent+='<img onmouseover="disp(this);" src="'+photos[i_tem][0]+'" alt="Image #'+[i_tem+1]+'" border="'+imgBorder+'"><br>'

[fraidie]

Thanx for the info... am going to check out now....

This can get so confusing.... especially when you are trying to teach yourself.
Trying to get my head around the whole css layout etc.... So much easier when someone points you in the right direction. much appreciated.

Worth the effort though when it goes right!