Solved

Refining Layer Hover image solution

Posted on 2004-09-23
20
430 Views
Last Modified: 2013-12-24
Hi,

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

I am trying to refine the solution and need your help. I am 99 percent certain that the problem is I need to add some code in the header and I'm not sure how to do that.

Please look at this url:

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

I am trying to impliment hhammash's solution: "Create your texts on layers and onhover show the layer.  You can give the layers the same position and size of the picture."

I'm sure hhammash's solution will work -- but I don't find that onhover / show layer built into my frontpage 2003's layor behaviour menu, so I am trying to hand code it -- with no luck. Please look at the page and give me the solution that I think is needed in the header of the page.  I would give you the source code, but I assume you would prefer to just look at the actual page's source code.

If you need any more info from me -- let me know.  500 points

Thanks

Rowby

P.S.  I have  no problem with the positioning of Layer 4 (even though it is clearly misplaced on the test page --- I'll fix the position -- I just need the showlayer solution.
0
Comment
Question by:Rowby Goren
  • 12
  • 8
20 Comments
 
LVL 14

Expert Comment

by:hhammash
ID: 12138674
Hi,

This is the code for showing a layer on MouseOver.  I created this quickly in Dreamweaver.  I'll get you another code if you are not comfortable with this.  You can change the image name and source in order to get the image.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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; }
}
//-->
</script>
</head>

<body onLoad="MM_showHideLayers('PCImage','','hide')">
<div id="PCImage" style="position:absolute; left:57px; top:38px; width:182px; height:232px; z-index:1">This
  layer will be viewed on mouseover.</div>
<img src="../My%20Documents/My%20Pictures/support_centers.gif" width="32" height="32" onMouseOver="MM_showHideLayers('PCImage','','show')" onMouseOut="MM_showHideLayers('PCImage','','hide')">
</body>
</html>


Regards
hhammash
0
 
LVL 14

Expert Comment

by:hhammash
ID: 12138733
Hi rowby,

1- Copy from <script> to </script> into notepad
2- Copy from notepad and paste in your page between the <head> </head> tags
3- Copy the line that says <body onLoad...> into notepage
4- Copyf from notepad and Paste it in your page instead of <body> tag.  Note htat PCImage is the name of the layer I created,  you can change that.
5- Copy from <div ....> to </divd> into noetpad
6- Copy from notepad and paste into your HTML page

Note:  Don't change anything except, the name of the layer,  the text of the layer: which is here before the </div> tag in my example,  and the source of the image,  "img src=" ...".  Keep the rest as it is.  You can always use this javascript code anywhere you like.

Hope it helps.  And sorry again for looking at the previous post late.

Regards
hhammash
0
 
LVL 14

Expert Comment

by:hhammash
ID: 12138736
Corrections:  
NotePad instead of notepage
Copy instead of Copyf

Keep the code from <div...> to </div> before the </body> tag.
0
 
LVL 14

Expert Comment

by:hhammash
ID: 12138790
Hi,

You can also change the "Left" and "Top" values to place the layer wherever you like in your page. Also "Width" and "Height"

 style="position:absolute; left:57px; top:38px; width:182px; height:232px

hhammash
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12139085
Thanks, hhammash -- I'll be making the changes later tonight or first thing fri a.m.

Rowby
0
 
LVL 14

Expert Comment

by:hhammash
ID: 12141282
You are welcome rowby.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12150727
Hi,

Almost there.  I fiddled with your code, and maybe I introduced some problems.  In any case can you help me refine the current version on:

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

1)  I want the PCIimage to appear only while the mouse is hovering over it.  When the mouse moves away, then Layer1 should reappear.

2)  I'm having problems resizing PCIimage.  I want it to be the same size as Layer1  (I realize this test *.gif is not the same size -- it will be replaced with one the exact same heighth and width as Layer1.

Thanks again!
0
 
LVL 14

Expert Comment

by:hhammash
ID: 12151506
Hi,

1- This is what I did,  when the mouse is over the text layer will appear,  when you remove the mouse,  the text layer will disappear and the original layer will re-appear. This is the code that show when the mouse is out.  You can see it above:

onMouseOut="MM_showHideLayers('PCImage','','hide')"

2- Look at the size of the picture (width and height) and make the text layer the same.  Also you can position the layer exactly at the same position where you have the picture.

hhammash
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12151799
Hi

Almost there :)   http://www.rowby.com/cards/

Two final things...

I would like the image that says "Software" to also be on a layer.  Let's call that layer "Softwarelayer" -- because I want to add a goto url behaviour to Softwarelaywer when Softwarelayer is CLICKED.

I think if you do that we will be finished -- or at least 99 percent  finished. No hurry -- when you have time.

I'm sure this is very simple and something that I should be able to do -- and once you do it for me I will be  a Layer expert too!

Thanks again

0
 
LVL 14

Expert Comment

by:hhammash
ID: 12151876
When I go to the link that you gave me I see on picture,  it is called software,  when the mouse is over the picture I get another picture called Terminals.  Now,  what would you like me to do?

Best regards
hhammash
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 9

Author Comment

by:Rowby Goren
ID: 12151904
Put the graphic of the oftware  image on a layer and call that layer "Softwarelayer"  The layer that has the photo of the Terminal remains as you have it: " PCImage"

I want the Softwarelayer to have two behaviours:
1)  When the Softwarelayer is hovered over it shows the PCImage layer
2)  When the Softwarelayer is CLICKED then the person goes to a url.  For example: www.cnn.com

Thanks!

0
 
LVL 14

Expert Comment

by:hhammash
ID: 12151915
OK  that means we will add only one behaviour.  Please wait
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12152364
A reminder that you do  creat a layer that is called Software layer.  I need it to be a layer that has the two behaviours.  I don't want the image itself to have the behaviours.  

Thanks -- and again no hurry!

Rowby
0
 
LVL 14

Expert Comment

by:hhammash
ID: 12154615
Hi,

This is the part that you put between the <head> </head> tags.  (Copy to Notepad first)


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



This is the part that you need to put between the <body> </body> tags:  Note that you have to remove <body> tag from the HTML page,  then copy the following code.  Keep the </body> tag in the original HTML page.

<body onLoad="MM_showHideLayers('SfotwareLayer','','hide')">
<div id="SfotwareLayer" style="position:absolute; left:59px; top:13px; width:119px; height:92px; z-index:1; background-color: #FF9900; layer-background-color: #FF9900; border: 1px none #000000;" onClick="MM_goToURL('parent','http://www.yahoo.com');return document.MM_returnValue" onMouseOut="MM_showHideLayers('SfotwareLayer','','hide')">
  <div align="left">
    <p><font color="#000000"><strong>This is the software layer. Click it to go
      to Yahoo</strong></font></p>
  </div>
</div>
<img src="../My%20Documents/My%20Pictures/contact-ms_icon.gif" width="32" height="32" onMouseOver="MM_showHideLayers('SfotwareLayer','','show')">


Notice that when the page loads,  the layer will be hidden,  when you click on the picture the layer will show,  when you click on the layer it goes to Yahoo,  when the mouse is out of the layer, the layer disappears.

Hope it helps.

hhammash

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12154812
Hi

Thank you, but is there any way you can keep the  PCImage layer and give that layer the behaviours you gave the "contact-ms_icon.gif"?  I would like the PCimage layer to have the behaviors instead of the image itself having the behaviours.

The resaon for this is I plan, at a future time, to reposition the PCImage layer. Also, I plan to remove the contact-ms_icon.gif" and replace it with text. That is why I still need the PCImage layer, and why I need the PCImage layer to have the TWO behaviors instead of the image itself having the two behaviors.  

Or is this not easily possible?

Rowby

From my earlier comments.....
I want the Softwarelayer to have two behaviours:
1)  When the Softwarelayer is hovered over it shows the PCImage layer
2)  When the Softwarelayer is CLICKED then the person goes to a url.  For example: www.cnn.com
0
 
LVL 14

Expert Comment

by:hhammash
ID: 12155705
Hi,

This is the code that you put before </head> tag



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



This is the code that you put before </body> tag after removing <body> tag and replace it with the code below:

<body onLoad="MM_showHideLayers('PCImage','','hide')">

<div id="SoftwareLayer" style="position:absolute; left:23px; top:26px; width:98px; height:79px; z-index:1"><img src="004a.jpg" width="158" height="147" onClick="MM_goToURL('parent','http://www.cnn.com');return document.MM_returnValue" onMouseOver="MM_showHideLayers('PCImage','','show')" onMouseOut="MM_showHideLayers('PCImage','','hide')"></div>
<div id="PCImage" style="position:absolute; left:188px; top:24px; width:173px; height:214px; z-index:2; background-color: #990033; layer-background-color: #990033; border: 1px none #000000;"><font color="#FFFFFF"><strong>This
  is PCImage Layer</strong></font></div>


What happens is:
1- When mouse is over SoftwareLayer (the computer picture)  the PCImage Layer (thre red one) appears
2- When mouse is out of SoftwareLayer,  PCImage Layer disappears
3- When SoftwareLayer is clicked,  http://www.cnn.com opens

I hope that I understood you properly this time.

Regards
hhammas
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12155806
Hi

Great. It works 99 percent perfectly.  One final refinement, and I guess it is easy to do.  If you go to the link...

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

...you will see that when you hover the mouse over the image the image is replaced -- which is what I asked for,  thank you!  But as soon as you move the mouse a litlle it returns back to the orginal layer --  rapidly turning "off an on".

Can the behaviour be modified so that it works more like the live site which is located at: http://www.freecreditcardprocessing.com/maa/    

On http://www.freecreditcardprocessing.com/maa/  if you hover the mouse over the "Free Credit Card terminal" graphic, the replacement image stays visible until the mouse completely leaves the graphic area.  You can move the mouse all over the replacement graphic and the graphic doesn't "turn on and off" like it does on http://www.rowby.com/cards/

I'm looking at the source code on http://www.freecreditcardprocessing.com/maa/ and perhaps below is the relevent code they used:

 onMouseOver="onPictureRollover2A15132Over(this)" onMouseOut="onPictureRollover2A15132Out(this)"><IMG ID="PictureRollover2" HEIGHT=147 WIDTH=158 SRC="./003.jpg" VSPACE=0 HSPACE=0 ALIGN="TOP" BORDER=0 ALT="" name=PictureRollover2A15132></a>

It appears that they are using 'onPictureRollover' instead of 'onMouseOver.  Is they two different kinds of behaviours or are " "behaviours" simply whatever you define by what you put in the header arear?  (See I, think I am learning this a little.... :)

Thanks again!!



0
 
LVL 14

Accepted Solution

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

Here is the 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>


This is the code before </body>,  remove <body> tag and replace it with the code below:

<body onLoad="MM_showHideLayers('PCImage','','hide')">
<div id="PCImage" style="position:absolute; left:17px; top:6px; width:169px; height:163px; 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')"><font color="#FFFFFF"><strong onClick="MM_goToURL('parent','http://www.cnn.com');return document.MM_returnValue">PCImage
  Layer </strong></font></div>
<img src="004a.jpg" name="SoftwareLayer" width="158" height="147" id="SoftwareLayer" onMouseOver="MM_showHideLayers('PCImage','','show')">


The problem was that I put the Picture inside a layer and called it SoftwareLayer,  this is what is causing blinking.  Now, the computer is a picture,  when mouse is over,  the other layer appears,  when you click it takes you to the address,  when you take the mouse out of it,  the original picture apprears.

Regards
hhammash
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12156082
Hi hhammash,

That did it!

Thank you for your help and you patience!

Rowby
0
 
LVL 14

Expert Comment

by:hhammash
ID: 12156486
You are welcome Rowby
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

In this short web based tutorial, I wanted to show users how they can still use the powers of FrontPage in conjunction with Expression Web 3.  Even though Microsoft eliminated the use of Web components, we can still use them with FrontPage and edit …
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 connect a WordPress website to Google Analytics. This will be demonstrated using a Windows 8 PC Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php :…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…

757 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

18 Experts available now in Live!

Get 1:1 Help Now