JS rollover Navi doesn't work

aborre · Post by **aborre** » Tue 8. Feb 2005, 17:54

I have a daywasting problem with a JS-rollover Navigation.

I put this in the head-section of the template:

<script language="JavaScript">
  agent = navigator.userAgent;
  yes = 0;
  if(agent.substring(0,7) == "Mozilla")
    {
    if( parseInt(agent.substring(8,9)) >= 3)
	  {
	  yes = 1;
	  }
    }

  if(yes)
    {
    	  	        pc1n = new Image();
      pc1n.src = "./picture/pcpa1.gif";
      pc1h = new Image();
      pc1h.src = "./picture/pcpah1.gif";

		  	        pc2n = new Image();
      pc2n.src = "./picture/pcpa2.gif";
      pc2h = new Image();
      pc2h.src = "./picture/pcpah2.gif";

		  	        pc3n = new Image();
      pc3n.src = "./picture/pcpa3.gif";
      pc3h = new Image();
      pc3h.src = "./picture/pcpah3.gif";

		  	        pc4n = new Image();
      pc4n.src = "./picture/pcpa4.gif";
      pc4h = new Image();
      pc4h.src = "./picture/pcpah4.gif";

		                    pm0n = new Image();
    pm0n.src = "./picture/phomes.gif";
    pm0h = new Image();
    pm0h.src = "./picture/phomes.gif";
                                      pm1n = new Image();
      pm1n.src = "./picture/pmt1.gif";
      pm1h = new Image();
      pm1h.src = "./picture/pmth1.gif";
                                      pm2n = new Image();
      pm2n.src = "./picture/pmt2.gif";
      pm2h = new Image();
      pm2h.src = "./picture/pmth2.gif";
                                      pm3n = new Image();
      pm3n.src = "./picture/pmt3.gif";
      pm3h = new Image();
      pm3h.src = "./picture/pmth3.gif";
                                      pm4n = new Image();
      pm4n.src = "./picture/pmt4.gif";
      pm4h = new Image();
      pm4h.src = "./picture/pmth4.gif";
                                      pm5n = new Image();
      pm5n.src = "./picture/pmt5.gif";
      pm5h = new Image();
      pm5h.src = "./picture/pmth5.gif";
                                      pm6n = new Image();
      pm6n.src = "./picture/pmt6.gif";
      pm6h = new Image();
      pm6h.src = "./picture/pmth6.gif";
                                      pm7n = new Image();
      pm7n.src = "./picture/pmt7.gif";
      pm7h = new Image();
      pm7h.src = "./picture/pmth7.gif";
                                      pm8n = new Image();
      pm8n.src = "./picture/pmt8.gif";
      pm8h = new Image();
      pm8h.src = "./picture/pmth8.gif";
                                      pm9n = new Image();
      pm9n.src = "./picture/pmt9.gif";
      pm9h = new Image();
      pm9h.src = "./picture/pmth9.gif";
        }
  function CI(imgNum,imgName) 
	{
	if(yes)
	  {
	  document.picture[imgNum].src = eval(imgName + ".src")
	  }
	}
</script>

and this in the respective templatefield:

Code: Select all

<table border="0" cellpadding="0" cellspacing="0" width="150">
<tr>
<td><a href="http://v145225.dd7722.kasserver.com/phpwcms/index.php?id=10,7,0,0,1,0" onmouseover="CI('pm0','pm0h');return true" onmouseout="CI('pm0','pm0n');return true""><img src="./picture/phomes.gif" width="150" height="20" name="pm0" alt="" border="0"></a></td>
</tr>


  <tr>
  <td><a href="http://v145225.dd7722.kasserver.com/phpwcms/index.php?id=2,8,0,0,1,0" onmouseover="CI('pm1','pm1h');return true" onmouseout="CI('pm1','pm1n');return true"><img src="./picture/pmt1.gif" width="150" height="20" name="pm1" alt="" border="0"></a></td>
  </tr>
  <tr>
  <td><a href="http://v145225.dd7722.kasserver.com/phpwcms/index.php?id=3,9,0,0,1,0" onmouseover="CI('pm2','pm2h');return true" onmouseout="CI('pm2','pm2n');return true"><img src="./picture/pmt2.gif" width="150" height="20" name="pm2" alt="" border="0"></a></td>
  </tr>
  <tr>
  <td><a href="http://v145225.dd7722.kasserver.com/phpwcms/index.php?id=4,10,0,0,1,0" onmouseover="CI('pm3','pm3h');return true" onmouseout="CI('pm3','pm3n');return true"><img src="./picture/pmt3.gif" width="150" height="20" name="pm3" alt="" border="0"></a></td>
  </tr>
  <tr>
  <td><a href="http://v145225.dd7722.kasserver.com/phpwcms/index.php?id=5,11,0,0,1,0" onmouseover="CI('pm4','pm4h');return true" onmouseout="CI('pm4','pm4n');return true"><img src="./picture/pmt4.gif" width="150" height="20" name="pm4" alt="" border="0"></a></td>
  </tr>
  <tr>
  <td><a href="http://v145225.dd7722.kasserver.com/phpwcms/index.php?id=6,12,0,0,1,0" onmouseover="CI('pm5','pm5h');return true" onmouseout="CI('pm5','pm5n');return true"><img src="./picture/pmt5.gif" width="150" height="20" name="pm5" alt="" border="0"></a></td>
  </tr>
  <tr>
  <td><a href="http://v145225.dd7722.kasserver.com/phpwcms/index.php?id=7,13,0,0,1,0" onmouseover="CI('pm6','pm6h');return true" onmouseout="CI('pm6','pm6n');return true"><img src="./picture/pmt6.gif" width="150" height="20" name="pm6" alt="" border="0"></a></td>
  </tr>
  <tr>
  <td><a href="http://www.iivs.de/home/kirchenbau.ampfing/" onmouseover="CI('pm7','pm7h');return true" onmouseout="CI('pm7','pm7n');return true"><img src="./picture/pmt7.gif" width="150" height="20" name="pm7" alt="" border="0"></a></td>
  </tr>
  <tr>
  <td><a href="http://v145225.dd7722.kasserver.com/phpwcms/index.php?id=9,15,0,0,1,0" onmouseover="CI('pm8','pm8h');return true" onmouseout="CI('pm8','pm8n');return true"><img src="./picture/pmt8.gif" width="150" height="20" name="pm8" alt="" border="0"></a></td>
  </tr>
<tr>
<td><img src="./picture/pcp.gif" width="10" height="40" alt="" border="0"></td>
</tr>
      <tr>
    <td><img src="./picture/pnvsp.gif" width="150" height="20" alt="" border="0"></td>
    </tr>
    <tr>
  <td><a href="http://v145225.dd7722.kasserver.com/phpwcms/index.php?id=11,16,0,0,1,0" onmouseover="CI('pc1','pc1h');return true" onmouseout="CI('pc1','pc1n');return true"><img src="./picture/pcpa1.gif" width="150" height="20" name="pc1" alt="" border="0"></a></td>
  </tr>
    <tr>
  <td><a href="http://v145225.dd7722.kasserver.com/phpwcms/index.php?id=12,17,0,0,1,0" onmouseover="CI('pc2','pc2h');return true" onmouseout="CI('pc2','pc2n');return true"><img src="./picture/pcpa2.gif" width="150" height="20" name="pc2" alt="" border="0"></a></td>
  </tr>
    <tr>
  <td><a href="http://v145225.dd7722.kasserver.com/phpwcms/index.php?id=14,18,0,0,1,0" onmouseover="CI('pc3','pc3h');return true" onmouseout="CI('pc3','pc3n');return true"><img src="./picture/pcpa3.gif" width="150" height="20" name="pc3" alt="" border="0"></a></td>
  </tr>
    <tr>
  <td><a href="http://v145225.dd7722.kasserver.com/phpwcms/index.php?id=15,19,0,0,1,0" onmouseover="CI('pc4','pc4h');return true" onmouseout="CI('pc4','pc4n');return true"><img src="./picture/pcpa4.gif" width="150" height="20" name="pc4" alt="" border="0"></a></td>
  </tr>
<tr>
<td><img src="./picture/pcp.gif" width="10" height="40" alt="" border="0"></td>
</tr>

</table>

The links are working, but the rollover doesn't. (i.e. hover and active pics are not shown)
This is the site in developement:http://v145225.dd7722.kasserver.com/php ... ,7,0,0,1,0
Cause I'm just a "drag'n'dropper", I dont know what's wrong here.
So, perhaps there is some help out there...

aborre

brans · Post by **brans** » Tue 8. Feb 2005, 18:22

hmm you could simply use the integrated NAV_TABLE_COLUMN and add your hover IMAGES there

I think this would be far easier than your "copy&paste" solution!

cyrano · Post by **cyrano** » Tue 8. Feb 2005, 18:24

brans did you get the images in NAV_TABLE_COLUMN working?

i have made an image for normal and rollover, but this didn't work - the rollover image is only shown when the item is clicked....

brans · Post by **brans** » Tue 8. Feb 2005, 18:31

ahh ok... sorry I just remembered that there was an option to specify
a rollover image inside the config. But as I'm not a "heavy grafics site fan", I haven't used this option yet.

@aborre

Code: Select all

if(agent.substring(0,7) == "Mozilla") 
    { 
    if( parseInt(agent.substring(8,9)) >= 3) 
     { 
     yes = 1; 
     } 
    } 

  if(yes)

I think that this piece of code only enables the CI-Function to Mozilla Browsers... I'm not a JS Guru but I remember that setting a var=0 in JS means, that it is like not existing...

yes = 1; will only be set if we have a Mozilla browsing the page.

if(yes) will only be true if yes =1;
an so the function will only be defined if we have a Mozilla User-Agent.

I think that you should browse the web for another rollover-image-navigation.
just some little tip:
http://devilock.mine.nu/pixie/

aborre · Post by **aborre** » Fri 11. Feb 2005, 22:50

Hy brans,

I tried to do it by conf.template_default.inc.php., as you said.
I defined two pictures at line 58 and 63 ( row_background_image) and got this:

Code: Select all

" style="cursor:pointer;cursor:hand;" onClick="location.href='index.php?index.html';return false;">

for the active-page link

Code: Select all

" style="cursor:pointer;cursor:hand;" onClick="location.href='index.php?id=2,0,0,1,0,0';return false;" onMouseOver="this.bgColor='#E6E6E6';" onMouseOut="this.bgColor='#C41E1E';">

for each other link.
Seems to me as if this function does'nt work.
Or have I done wrong something?

aborre

brans · Post by **brans** » Sat 12. Feb 2005, 13:16

cyrano wrote:brans did you get the images in NAV_TABLE_COLUMN working?

i have made an image for normal and rollover, but this didn't work - the rollover image is only shown when the item is clicked....

might be a new topic for the bug reports forum. As I said.. try the above mentioned link (in my last post)!

brans · Post by **brans** » Mon 14. Feb 2005, 16:43

Hi! I have just found a solution to easily realize a roll-over image navigation for phpwcms:

--...--/index.php/topic,59.0.html

frold · Post by **frold** » Mon 14. Feb 2005, 16:56

brans wrote:Hi! I have just found a solution to easily realize a roll-over image navigation for phpwcms:

--...--/index.php/topic,59.0.html

why you need to be member to visit that site?

I hate that....

brans · Post by **brans** » Mon 14. Feb 2005, 17:03

do you ? hmm this is a fault! Normally it is thought that ppl can view forums without being member! I'm gonna check the permissions!

jscholtysik · Post by **jscholtysik** » Mon 14. Feb 2005, 17:09

Hi brans,

frold does not like the possibility first to log on as a member of your php add-on site to see your solution. I don't see also the sense to log on only to see a code fragment or a link...
Why don't you handle it like here on the phpwcms forum site? You can see all messages without a logon and when you want to answer, you have to log on.

Only a thought...

Joachim

brans · Post by **brans** » Mon 14. Feb 2005, 17:11

sorry I was wrong, I understood some other thing because I read

REmember instead of member

I have edited my post above and guest should be able to view the site now!

Please remember:
Make use of the rating function inside all the finished and "under development" forums!

aborre · Post by **aborre** » Tue 15. Feb 2005, 19:29

Please forgive me, but I dont know how to get it to work.
I cpied the NAV_LIST_ALL hack and installed it.

then I copied this css into the header section of my template (modified from here: http://wellstyled.com/files/css-noprelo ... mple2.html )

<STYLE type=text/css>BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: white; PADDING-BOTTOM: 0px; MARGIN: 2em; PADDING-TOP: 0px
}
#menu {
PADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 0px; MARGIN: 3em 0px; PADDING-TOP: 0px; BORDER-BOTTOM: none; HEIGHT: 20px
}
DIV.outer {
BACKGROUND: url(img/rollover.gif) no-repeat 0px -40px; FLOAT: left; MARGIN: 0px 3px 0px 0px; WIDTH: 150px; HEIGHT: 20px
}
DIV.outer A {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; BACKGROUND: url(img/rollover.gif) no-repeat left top; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: bold 13px/1 Verdana, sans serif; OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 0px; HEIGHT: 100%; text-transform: small-caps;TEXT-DECORATION: none
}
DIV.outer SPAN {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 13px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px
}
DIV.outer A:hover {
BACKGROUND-IMAGE: none; COLOR: #666666, text-transform: small-caps;
}
DIV.outer A:active {
BACKGROUND: url(img/rollover.gif) no-repeat 0px -80px; FLOAT: left; MARGIN: 0px 3px 0px 0px; WIDTH: 150px; HEIGHT: 20px
COLOR: #666666
}
</STYLE>

I created a Navipic as well. The example was running well at a static html page. But in phpwcms, it doesn't work. The RPT and the hack itself are working, because my mousepointer changes to "hand" if I run over the menuarea.

What's wrong here?

I tried so many things and cant figure it out. Grrrrrrr

Aborre

brans · Post by **brans** » Tue 15. Feb 2005, 20:42

please try the following:

delete each and every double specification from your frontend.css (called "standard css" in your admin-area!) and tell me if it works then.

ex.: atm you have specified body inside your <style> area and I guess you haven't deleted the same class from the frontend.css, isn't it ?

Ben · Post by **Ben** » Wed 16. Feb 2005, 05:26

oops! delete this post, please