Solved

Further refinement of mouseover and layers

Posted on 2004-09-27
12
250 Views
Last Modified: 2013-12-24
Hello again!

Please see this solution: http://experts-exchange.com/Applications/MS_Office/FrontPage/Q_21137569.html

I need one final refinement.

Please go to this test page:

http://www.rowby.com/cards/

Is it possible for an ordinary table to have a behaviour?  A reasonably cross-platform behaviour?

If that is possible, I would like the table that says "TERMINALS Free Credit Card Terminal" to have the same behaviour that the graphic "004a.jpg" that is currently below it which has the words "SOFTWARE" on it.  

(If that is possible the table would have the behavour and I will delete the "004a.jpg" of course)

If the table cannot have the behaviour, then I guess a new layer would be needed with the table put inside that layer.

Thanks!
0
Comment
Question by:Rowby Goren
  • 8
  • 4
12 Comments
 
LVL 14

Expert Comment

by:hhammash
ID: 12160643
Hi,

Yes the table can have bahaviour:

This is before the </head>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>


This is between <body> and </body>

<table width="350" border="1" onClick="MM_goToURL('parent','http://www.cnn.com');return document.MM_returnValue">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>


When you click on the table it goes to CNN.

What behaviour would you like to have for the table?

hhammash
0
 
LVL 14

Expert Comment

by:hhammash
ID: 12160691
You can specify behaviors for different cells:

Before </head>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>


Between <body> and </body>

<table width="350" border="1">
  <tr>
    <td onClick="MM_goToURL('parent','http://www.cnn.com');return document.MM_returnValue">&nbsp;</td>
    <td onClick="MM_goToURL('parent','http://www.yahoo.com');return document.MM_returnValue">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>


First cells goes to CNN on click,  second cells goes to Yahoo on click.

hhammash
0
 
LVL 14

Expert Comment

by:hhammash
ID: 12160812
Hi,

This is what you want.  I gave the table the same behavior that I gave to the image below it before.

Code before </head>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

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_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>


Code before </body> . Note:  Remove <body> tag and please the code before </body> tag:

<body onLoad="MM_showHideLayers('PCImage','','hide')">
<div id="PCImage" style="position:absolute; left:167px; top:12px; width:235px; height:195px; z-index:1; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;">
  <div align="center"><strong><font size="6">This is PCImage Layer</font></strong></div>
</div>
<table width="150" border="0" onClick="MM_goToURL('parent','http://www.cnn.com');return document.MM_returnValue" onMouseOver="MM_showHideLayers('PCImage','','show')" onMouseOut="MM_showHideLayers('PCImage','','hide')">
  <tr>
    <td bgcolor="#990000"><div align="center"><strong><font color="#FFFFFF">Terminals</font></strong></div></td>
  </tr>
  <tr>
    <td bgcolor="#0000FF"><div align="center"><font size="5"><strong><font color="#FFFF33">Free</font></strong></font><font color="#FFFF33"><br>
        <strong>Credit Card<br>
        Terminals </strong></font></div></td>
  </tr>
</table>


I hope it helps
hhammash
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12160826
Can ONE cell have two behaviours?   Let's call the cell "Cell_1"

Example:  MouseHover over Cell_1 brings up a layer (with the 004a.jpg image in the layer)
               Doubleclick Cell_1 goes to the URL.

Rowby

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12160840
I I didn't see the above solution before I posted my above comment.

I'll impliment your suggestion later today or tonight.

thanks

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12171410

Hi

I made the modification.  You can see it here:

http://www.rowby.com/cards/

And it works fine as long as PCImage layer is positioned as above.

But when I move PCImage on top of the table, and hover the mouse over it, it flashes with every move of the mouse.

http://www.rowby.com/cards/test.html

Is there a different kind of hover behaviour that would eliminate the flashing?  

Thanks!

Rowby

Thanks!
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 14

Accepted Solution

by:
hhammash earned 500 total points
ID: 12173793
Hi,

Check this link:
http://nml.uaeu.ac.ae/Layers.htm

Before </Head>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

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_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>



Remove <body> and put this before </body>

<body onLoad="MM_showHideLayers('PCImage','','hide')">
<div id="PCImage" style="position:absolute; left:7px; top:11px; width:167px; height:156px; z-index:1; background-color: #990000; layer-background-color: #990000; border: 1px none #000000;" onClick="MM_goToURL('parent','http://www.cnn.com');return document.MM_returnValue" onMouseOut="MM_showHideLayers('PCImage','','hide')">
  <div align="center"><strong>PCImage</strong></div>
</div>
<table width="120" border="1" onMouseOver="MM_showHideLayers('PCImage','','show')">
  <tr>
    <td><div align="center"><strong>Free</strong></div></td>
  </tr>
  <tr>
    <td><div align="center"><strong>Free<br>
        Credit Card Terminals</strong></div></td>
  </tr>
</table>


regards
hhammash
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12174063
Hi  

So close --

It works locally, but look at the link -- it becomes a frame etc.  

So there is something not quite working.

Can you look one more time.  It's almost absolutely looking.


http://www.rowby.com/cards/

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12174070
I sent before I finished.

It's come  to a frame. etc.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12174331
Nope. It's fine.  Hold on.  I think the solution has worked....
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12174356
Okay. It's working as needed.  Thanks!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!

Let's hope this is the end of the "refinements" :)

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12174423
Thanks. It's going to work fine now!
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

When deciding to adopt any help desk solutions many factors should be explored before taking decisions. This will change from business to another but in general there are some kind of rule of thumb. Here are some quick tips: Do we need only ticket…
This article provides a case study on how our local youth baseball league deployed a new website, including the platform selection, implementation and benefits to the league.
The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and SmallPDF.com Log…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now