Solved

Further refinement of mouseover and layers

Posted on 2004-09-27
12
260 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

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

Visualize your virtual and backup environments

Create well-organized and polished visualizations of your virtual and backup environments when planning VMware vSphere, Microsoft Hyper-V or Veeam deployments. It helps you to gain better visibility and valuable business insights.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Code Editors 10 223
Internet Explorer ignoring hyphens in html 1 106
difference in Google dev tools and Firefox print. 12 59
Facebook custom search 4 222
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.
Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…

751 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