PDA

Click to See Complete Forum and Search --> : mouseover and onClick scripts in a slideshow

moondance
03-25-2003, 11:07 PM
on my site i've got small thumbnails of pictures. There are rollovers (done in dreamweaver), and use javascript to open a new window when clicked. The working code is as follows:

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','graphics/XXX.jpg',1)" onClick="popimage('graphics/XXX.jpg',320,425);return false"><img name="Image9" border="0" src="graphics/XXX.jpg" width="135" height="140"></a>

Now i've got a a javascript conveyor scroller, from an example on this forum:

<html>
<head>

<title>XXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#BAB9C8" link="#BAB9C8" vlink="#BAB9C8" alink="#BAB9C8">
<table width="600" border="1" cellspacing="2" cellpadding="5" height="72" bgcolor="#BAB9C8" bordercolor="#FFFFFF">
<tr>
<td bgcolor="#BEB6C9" bordercolor="#BEB6C9">
<script language="JavaScript1.2">

/*
Scrollable Menu Links- By Dynamicdrive.com
For full source, TOS, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/




//configure path for left and right arrows
var goleftimage='pointer2.gif'
var gorightimage='pointer.gif'
//configure menu width
var menuwidth=600
//configure menu height
var menuheight=72
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
//configure background color:
var slidebgcolor="#766c8f"
//specify menu content
var menucontents='<nobr><a href="XXX.htm"><img src="XXX.jpg"></a><a href="XXX.htm"><img src=XXX.jpg"></a>><a href="XXX.htm"><img src="XXX.jpg"></a><a href="XXX.htm"><img src=XXX.jpg"></a>

//etc for as many pics in slideshow
</nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-1000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
loadedyes=1
}
window.onload=fillup

function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed
}
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
}
lefttime=setTimeout("moveleft()",50)
}

function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
}
righttime=setTimeout("moveright()",50)
}

if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="3">')
write('<td valign="absbottom"><a href=#BEB6C9" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><img src="'+goleftimage+'"border=3></a> </td>')
write('<td valign="abstop">')
if (iedom){
write('<div style="position:relative;width:'+menuwidth+';">')
write('<div style="position:absolute;width:'+menuwidth+';height:'+menuheight+';overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div></div>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="absbottom"> <a href="#BEB6C9" onMouseover="moveright()" onMouseout="clearTimeout(righttime)">')
write('<img src="'+gorightimage+'"border=3></a>')
write('</td></table>')
}
}
</script>

I can add images to the slideshow, but i don't want a seperate html page for each picture to be opened. I want to use the mouseover/ rollover images AS WELL AS the javascript function to open a new window. Everytime i try this the slideshow box goes blank. I been up all damn night trying to sort this.

Someone help a desperate man and i'll clean your colostomy bag when your old.
Nedals
03-26-2003, 12:46 AM
This line of code is where, if you click on an image, it will open a new page. (there are a number of error in this line - fixed here).
I conclude that you may already know this. I don't know what you want the new page to contain, so I'll assume an image blowup.

To make this more legible, I like to break down long lines.
var menucontents='<nobr>';
menucontents += '<a href="XXX.htm"><img src="XXX.jpg"></a><a href="XXX.htm"><img src="XXX.jpg"></a>';
menucontents += '<a href="XXX.htm"><img src="XXX.jpg"></a><a href="XXX.htm"><img src="XXX.jpg"></a></nobr>';

What you need to do is change each image section to something like this
<a href="#" onClick="return blowup('bigImg.jpg')"><img src="XXX.jpg"></a>

Now you need a new function.
function blowup(theimage) {
popup = window.open(theimage,'popup',"width=400,height=400");
return false;
}

This is not perfect, but it may set you on the right track. The popup should be closed before clicking on another image.