[SOLVED] PHP/Javascript integration issues!!!!

[Jago6060]

I'm trying to use the values from my PHP variables in my javascript functions in order to control the image rollover sizing, heres my code.

 

 

$d1=mysql_result($result,$i,"img_id");
$d2=mysql_result($result,$i,"img_dir");

$img_dim = getimagesize($d2);
$num_img = array(1=>'128','176','320','352','550','640','704','720','768','800','1024');
$width = ($img_dim[0]);
$height = ($img_dim[1]);
$count = 0;

do {$count++;
   $width = ($img_dim[0]/$count);
   $height = ($img_dim[1]/$count);
}
while (($width > 75) && ($height > 75));
echo "
<script language = \"Javascript\" type = \"text/javascript\">
var elemId = addslashes($d1);
var imgHeight = addslashes($height);
var imgWidth = addslashes($width);
function imgEnlarge(){
   document.getElementById(\'elemId\').height += imgHeight
   document.getElementById(\'elemId\').width += imgWidth
}
function imgShrink(){
   document.getElementById(\'elemId\').height -= imgHeight
   document.getElementById(\'elemId\').width -= imgWidth
}
</script>
";

echo "<td><a href=$d2><img src=$d2 id=elemId border=0 width=$width height=$height onmouseover=imgEnlarge() onmouseout=imgShrink()></a></td>";

 

any ideas?

[nicephotog]

You have no quote markers around the html attribute values and secondly the javascript is

much safer using a semi-colon to end/delimit each line. Particular relevence is i've found it

almost never operates for HTML element listeners to not have the javascript inside quote

markers and as awful with no semi-colon.

Note: Also put the script "after/following" the HTML in the body, not before when you use the

getElementById DOM syntax system.

[Jago6060]

I fixed all that stuff and the rollovers still won't work.  I think the issue is getting the $d1 variable into the javascript function but I dunno how to fix it.

[nogray]

You can't call the addslashes inside the echo statment

 

change it to something like this

echo "
<script language = \"Javascript\" type = \"text/javascript\">
var elemId = ".addslashes($d1).";
...

[Jago6060]

I still can't seem to get it to work.  heres the most recent version I've come up with.

 

$d1=mysql_result($result,$i,"img_id");
$d2=mysql_result($result,$i,"img_dir");

$img_dim = getimagesize($d2);
$width = ($img_dim[0]);
$height = ($img_dim[1]);
$count = 0;

do {$count++;
   $width = ($img_dim[0]/$count);
   $height = ($img_dim[1]/$count);
}
while (($width > 75) && ($height > 75));
echo "
<script language = \"Javascript\" type = \"text/javascript\">
var imgId = ".addslashes($d1).";
function imgEnlarge(){
   document.getElementById(imgId).height += 100;
   document.getElementById(imgId).width += 100;
}
function imgShrink(){
   document.getElementById(imgId).height -= 100;
   document.getElementById(imgId).width -= 100;
}
</script>
";
echo "<td><a href=$d2><center><img src=$d2 id=imgId border=0 width=$width height=$height onmouseover=imgEnlarge() onmouseout=imgShrink()></center></a></td>";

[nogray]

You only need to write your functions in the javascript once (don't write the function in the while loop)

 

And you mixing javascript and PHP when writing the image tag (id=imgId). This will make all your images have one id "imgId".

 

Also, the while loop shouldn't have a ; after it

 

It should be

while (statment) {
   do something
}

 

You can change your image tag to look like the following

<img src=$d2 border=0 width=$width height=$height onmouseover=imgEnlarge(this) onmouseout=imgShrink(this)>

 

and your functions to this

function imgEnlarge(obj){
   obj.height += 100;
   obj.width += 100;
}
function imgShrink(obj){
   obj.height -= 100;
   obj.width -= 100;
}

[Jago6060]

thank you sooooo much! that works just like I need it to.  now my next issue is this.  when the images enlarge they push everything else out of the way.  is there anyway to allow them to just overlap the other images?  and also, is there anyway to preserve the image proportions when doing a rollover enlarge?