Hatrack River Forum: php/javascript question

This is topic php/javascript question in forum Books, Films, Food and Culture at Hatrack River Forum.

To visit this topic, use this URL:
http://www.hatrack.com/ubb/main/ultimatebb.php?ubb=get_topic;f=2;t=047200

Posted by Strider (Member # 1807) on :

I use dreamweaver to code, and I've always used the generic mouseover scripts that dreamweaver generates for you when doing mousevers. I'm playing around with php right now and have become stuck trying to get mouseovers to work properly the way i'm used to doing them. I'll only post the relevant code below.

the javascript for the mouseovers in the "head" tag:

code:

  
<script language="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_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];}
}
//-->
</script>

The php code in question:

code:

 
<td height="450" valign="top"> 
<?php
	
$con=mysql_connect ("localhost", "nirsh_admin", "password");
	
mysql_select_db("nirsh_test", $con);

	
$result = mysql_query("SELECT * FROM headers WHERE MenuPage='residential'");
echo "<ul id='residential-images'>";
while($row = mysql_fetch_array($result))
	{
	echo "<li><a href='../" . $row['Link'] . "' onMouseOut='MM_swapImgRestore()' 
onMouseOver='MM_swapImage('Allentown','','Images/allentown2.jpg',1)'><img src='" . $row['ImagePath'] . "' border='0'></a></li>";
	}
echo "</ul>";


	
mysql_close($con);
?></td>

So can I not use dreamweaver to create mouseovers for me if I'm going to be using php? Or is there something else specific to doing mouseovers in php that i'm not aware of? as in, does the javascript need to change at all?

[ January 26, 2007, 09:48 PM: Message edited by: Strider ]

Posted by Strider (Member # 1807) on :

bump

I've tried a couple different things using alternate javascript and I can't seem to get any of it to work.

anyone?

Here's another way i tried with the same problem. when i put up the page and view the source, the image path in the js events is highlighted in red. this is the same thing that happens the first way i posted too.

code:

 <div align="center">
	<?php
	
	$con=mysql_connect ("localhost", "nirsh_admin", "ender1");
	
	mysql_select_db("nirsh_test", $con); 
	$result = mysql_query("SELECT * FROM headers WHERE MenuPage='residential'"); 
		

	echo "<ul id='residential-images'>";
				$text1=1;
		while($row = mysql_fetch_array($result))
		{
		echo "<li><a href='../" . $row['Link'] . "' onMouseOut='document.image" . $text1 . ".src='" . $row['ImagePath'] . "' 
onMouseOver='document.image" . $text1 . ".src='Images/allentown.jpg'><img src='" . $row['ImagePath'] . "' name='image" . $text1 . "'  border='0'></a></li>";
		$text1++;
		}
	echo "</ul>";


	
	mysql_close($con);
	?>
	</div>

[ January 27, 2007, 02:21 PM: Message edited by: Strider ]

Posted by fugu13 (Member # 2859) on :

Post the generated HTML source when you view the page, that should allow me to determine the cause.

Posted by Strider (Member # 1807) on :

the initial one:

code:

<div align="center"><ul id='residential-images'><li><a href='../allentown.html' onMouseOut='MM_swapImgRestore()' 
onMouseOver='MM_swapImage('Allentown','','Images/allentown2.jpg',1)'><img src='Images/allentown.jpg' border='0'></a></li><li><a href='../beford.html' onMouseOut='MM_swapImgRestore()' 
onMouseOver='MM_swapImage('Allentown','','Images/allentown2.jpg',1)'><img src='Images/bedford_panel.jpg' border='0'></a></li><li><a href='../boca.html' onMouseOut='MM_swapImgRestore()' 
onMouseOver='MM_swapImage('Allentown','','Images/allentown2.jpg',1)'><img src='Images/boca_panel.jpg' border='0'></a></li><li><a href='../catasauqua.html' onMouseOut='MM_swapImgRestore()' 
onMouseOver='MM_swapImage('Allentown','','Images/allentown2.jpg',1)'><img src='Images/catasauqua_panel.jpg' border='0'></a></li><li><a href='../easton.html' onMouseOut='MM_swapImgRestore()' 
onMouseOver='MM_swapImage('Allentown','','Images/allentown2.jpg',1)'><img src='Images/easton_panel.jpg' border='0'></a></li><li><a href='../barnstable.html' onMouseOut='MM_swapImgRestore()' 
onMouseOver='MM_swapImage('Allentown','','Images/allentown2.jpg',1)'><img src='Images/mass_panel.jpg' border='0'></a></li></ul>	</div>

does it have something to do with the single vs. double quotes being used?

Posted by fugu13 (Member # 2859) on :

Quite possibly; if you use single quotation marks in the javascript, use double quotes in the html -- so

code:

onMouseOver="MM_swapImage('Allentown','','Images/allentown2.jpg',1)"

, and vice versa.

If that doesn't work, I'll take another look.

Posted by Strider (Member # 1807) on :

except php doesn't allow you to use double quotes. which is why i'm using single quotes for all of them.

Posted by fugu13 (Member # 2859) on :

You just have to escape the double quotation marks.

code:
\"

Posted by Strider (Member # 1807) on :

did that too. same result(no mouseover). Here's the generated html:

code:

<div align="center"> <ul id='residential-images'><li><a href='../allentown.html' onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('Allentown','','Images/allentown2.jpg',1)"><img src='Images/allentown.jpg' border='0'></a></li><li><a href='../beford.html' onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('Allentown','','Images/allentown2.jpg',1)"><img src='Images/bedford_panel.jpg' border='0'></a></li><li><a href='../boca.html' onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('Allentown','','Images/allentown2.jpg',1)"><img src='Images/boca_panel.jpg' border='0'></a></li><li><a href='../catasauqua.html' onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('Allentown','','Images/allentown2.jpg',1)"><img src='Images/catasauqua_panel.jpg' border='0'></a></li><li><a href='../easton.html' onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('Allentown','','Images/allentown2.jpg',1)"><img src='Images/easton_panel.jpg' border='0'></a></li><li><a href='../barnstable.html' onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('Allentown','','Images/allentown2.jpg',1)"><img src='Images/mass_panel.jpg' border='0'></a></li></ul>	</div>

[ January 28, 2007, 04:57 AM: Message edited by: Strider ]

Posted by Chanie (Member # 9544) on :

OK, the problem is that every image needs to have a unique name and you are naming them all "Allentown" so it doesn't know which one to switch. You can fix this by:

adding this line immediately before the while statement:
imageNum = 0;

replace the mouseOver with (I changed the function name just to post because it wouldn't let me write the real one:
onMOver='MM_swapImage('Allentown$imageNum','','Images/allentown2.jpg',1)'>

and replacing the image tag with:
<img src='" . $row['ImagePath'] . "' border='0' name='Allentown$imageNum'>

Adding this before the end of the while loop:
$imageNum++;

I tried to just post the rewritten code but it wouldn't let me post HTML. I'd be happy to email it you though.

Posted by fugu13 (Member # 2859) on :

Chanie: you can post code by using (code) (/code) tags, just with square brackets instead of parentheses.

Posted by Strider (Member # 1807) on :

hmmm...thanks Chanie. the frustrating thing abot all that is that originally I DID have the names in the code. and then somewhere in the process of trying to get at the root of the problem i lost them. stupid.

thanks again.

Posted by Strider (Member # 1807) on :

I have a new question. I have some more lines of javascript code that aren't executing properly. here's the deal. the php generates the correct code. but when it generates the code it looks like this:

code:

 var dynimages=new Array()
dynimages[0]=["Images/Projects/Catasauqua/Big/CA002.jpg", " "]dynimages[1]=["Images/Projects/Catasauqua/Big/CA003.jpg", " "]dynimages[2]=["Images/Projects/Catasauqua/Big/CA001.jpg", " "]

the problem is that for the code to execute correctly it needs to have carriage returns in between each array declaration. as in:

code:

 var dynimages=new Array()
dynimages[0]=["Images/Projects/Catasauqua/Big/CA002.jpg", " "]
dynimages[1]=["Images/Projects/Catasauqua/Big/CA003.jpg", " "]
dynimages[2]=["Images/Projects/Catasauqua/Big/CA001.jpg", " "]

I'm sure this is simple, but I don't know how to do it. How do I make it so that when the php generates the code, it generates each declaration on a new line?

Posted by Bokonon (Member # 480) on :

You can put semi-colons after each declaration to allow them to work (though they will still be all on one line).

If the PHP is just output the text, use the newline escape code \n when you want a line to end.

-Bok

Posted by Strider (Member # 1807) on :

Awesome Bok, thanks.

the newline escape code is exactly what I needed. couldn't seem to find that listed anywhere in any of the tutorials I have.

Posted by Bokonon (Member # 480) on :

It's a sorta archaic computer geek thing. I blame Unix! [Wink]

-Bok

Posted by Verloren (Member # 9771) on :

Also, you may want to use the other archaic code \r along with it. It's a unix (or maybe mac) versus windows thing, if I recall correctly. I always use both, like this: \r\n

-V