Click Rollover to Pop Up Window...

**itsmeroro** · 11-02-2007, 09:32 AM

Hello -

I have most of this working - what I am trying to accomplish is to click on a rollover which will open a re-sized window with html info inside -

The issue is when the rollover is clicked from the original page - the window opens, but the original page also opens to the new window's specified link.

I can't quite figure out the problem, but would like for the original window to remain the same while opening the seperate window with different info inside...

Could someone help by taking a look at this please! Thanks so much, roro

THIS IS WHAT I HAVE SO FAR --

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('pedPAWGLO75.gif')">
<a href="http://www.badgercreekdachshunds.com/RosadachsWoogieWuffPedigree.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Click to View Woogies Pedigree','','pedPAWGLO75.gif',1)"><img src="ped75.gif" name="Click to View Woogies Pedigree" border="0" onclick="MM_openBrWindow('http://www.badgercreekdachshunds.com/RosadachsWoogieWuffPedigree.html','pedigree','scrollbars=yes,resizable=yes,width=675,height=550')"></a>
</body>
</html>

**jscheuer1** · 11-02-2007, 10:00 AM

Replace:

Code:

<a href="http://www.badgercreekdachshunds.com/RosadachsWoogieWuffPedigree.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Click to View Woogies Pedigree','','pedPAWGLO75.gif',1)"><img src="ped75.gif" name="Click to View Woogies Pedigree" border="0" onclick="MM_openBrWindow('http://www.badgercreekdachshunds.com/RosadachsWoogieWuffPedigree.html','pedigree','scrollbars=yes,resizable=yes,width=675,height=550')"></a>

with:

Code:

<a href="http://www.badgercreekdachshunds.com/RosadachsWoogieWuffPedigree.html"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Click to View Woogies Pedigree','','pedPAWGLO75.gif',1)"
onclick="MM_openBrWindow(this.href,'pedigree','scrollbars=yes,resizable=yes,width=675,height=550');
return false;"
><img src="ped75.gif" name="Click to View Woogies Pedigree" border="0"
></a>

Mostly I just cleaned up the look of the code. I did move the click event to the anchor tag and added a return false; to it. Oh, and since the URL you are opening is now the same as the tag's href, you can pass it directly from the tag (this.href).

**itsmeroro** · 11-02-2007, 05:08 PM

Yes - that was it! Thank you very mucho! I have been trying to figure that out for a while now - and I am very new to this stuff! I really appreciate it!

thanks a million! roro

**itsmeroro** · 11-02-2007, 06:34 PM

Ok - I have another partially "clueless" question for you - How do I use four of the same rollover images on the same page? I have coded each rollover, pointing to each seperate respective page, but upon viewing the rollover effect is not working - I could either save each rollover as a new different name (I think this would work) -- is there an easier way?

Here is what I have (the page I am working on - http://www.badgercreekdachshunds.com...sxyztrial.html (only working on the pedigree links currently)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('pedPAWGLO75.gif')">
<a href="http://www.badgercreekdachshunds.com/RosadachsWoogieWuffPedigree.html"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Click to View Woogies Pedigree','','pedPAWGLO75.gif',1)"
onclick="MM_openBrWindow(this.href,'pedigree','scrollbars=yes,resizable=yes,width=675,height=550');
return false"
><img src="ped75.gif" name="Click to View Woogies Pedigree" border="0"
></a>
</body>
</html>

Thanks again!

**boogyman** · 11-02-2007, 06:48 PM

use the
[code]
tags when you are posting computer code. it makes it alot easier for us to read in that format rather than regular text

**itsmeroro** · 11-02-2007, 07:04 PM

Not too sure how to do that either

- I am brand new at this! Um - would that be in the code view panel of Dreamweaver? tnx

**BLiZZaRD** · 11-02-2007, 08:22 PM

no, he is talking about here in the forum. when you have some code to post here instead of doing:

<body onLoad="MM_preloadImages('pedPAWGLO75.gif')">
<a href="http://www.badgercreekdachshunds.com/RosadachsWoogieWuffPedigree.html"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Click to View Woogies Pedigree','','pedPAWGLO75.gif',1)"
onclick="MM_openBrWindow(this.href,'pedigree','scrollbars=yes,resizable=yes,width=675,height=550');
return false"
><img src="ped75.gif" name="Click to View Woogies Pedigree" border="0"
></a>
</body>
</html>

do it inside [ code ] and [ /code ] tags (remove spaces) so it looks like:

Code:

<body onLoad="MM_preloadImages('pedPAWGLO75.gif')">
<a href="http://www.badgercreekdachshunds.com/RosadachsWoogieWuffPedigree.html"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Click to View Woogies Pedigree','','pedPAWGLO75.gif',1)"
onclick="MM_openBrWindow(this.href,'pedigree','scrollbars=yes,resizable=yes,width=675,height=550');
return false"
><img src="ped75.gif" name="Click to View Woogies Pedigree" border="0"
></a>
</body>
</html>

**jscheuer1** · 11-02-2007, 08:52 PM

Thanks BLiZZaRD, that is the skinny on the code tags in a forum post. I just added them in to the message for us.

Getting back on point here, I noticed before that you had all that MM whatever stuff in your code. Those functions, although they generally work, are more complex, sometimes even much more complex than they need to be. I'm not really clear on your question yet, ah just having looked at your page, it's pretty messed up. I'll get into that later perhaps.

For now, the answer to your question is (best that I can tell), that if you want to use the same image files in more than one place on a page for this rollover effect, you need to name each img tag differently and set each one up as if it were a separate set of image files, using the unique name of each tag for each set up.

**itsmeroro** · 11-02-2007, 08:57 PM

Thanks - I think it is really obvious I am very new at this - It is tough also because my website is at homestead.com and the editing I am doing is very "cut (hack) and paste" the html into the their site designer - only allowing html snippets. I am sort of "learning as I go" ang how to tweak it to suit my needs .. and using what works.

Also - I am not able to edit the entire source of the page displayed - if that is what you mean about being messed up... Any pointers which I am able to do, is much appreciated!

Thanks again, roro

**jscheuer1** · 11-03-2007, 06:19 AM

Homestead is rather idiosyncratic, to put it mildly. I haven't had occasion to work with it for years, so I cannot be sure how it is now. But, at the time I did use it for a client, as it is what they had, I noticed that it generally made up about three times the normal code for a page, repeating many things that normally are only allowed once per page. If you made a simple design, this generally worked out, and was their (in my opinion rather inflexible) way of dealing with cross browser issues. But if you wanted to add in a bit of custom code, it made it pretty tough to do. I would suggest leaving it and getting a regular host.

Thread: Click Rollover to Pop Up Window...

Thread Tools

Search Thread

Click Rollover to Pop Up Window...

Bookmarks

Bookmarks

Posting Permissions