Javascript and PHP problem

[mark110384]

Hey guys I'm having trouble with a small problem. I have written a JS function that recieves a passed value from another function when an event is triggered. It incorperates PHP by changing the value of the variable. I put 2 alert messages to test each state and it works in terms of detecting which state it is in but only loads the last variable instead of the appropriate variable. Hmmm puzzling why it isn't working. Here is the function

 

<script>
function check_image_state(state){

var state_set = state; 

if (state_set == "yes"){

	<?php $show_large_image = "<img border = '0' src='../images/$image_src' />"; ?>

	alert("remove");

	return; 		
}
else{
	<?php $show_large_image = "<a href='javascript://' onMouseUp= 'show_image()'><img style='cursor: url(../images/magnifyzoom.cur)' border = '0' src='../images/$image_src' /></a>"; ?>
	alert("normal");

}

}
</script>

[rhodesa]

all PHP code is processed BEFORE JavaScript. So you can't run PHP inside JavaScript like that. PHP can only be used to build custom JavaScript by printing out JavaScript.

 

The easy way to understand it, is to load the page up in a browser, and do a View Source. What you see there is the JavaScript that is being processed by the browser

 

edit: what are you trying to accomplish?

[mark110384]

It's essentially an image brought back from PHP that is selectable, if user selects it a JS function is triggered and reveals a larger image. I want to determine if there browser screen is minimised to a size where the image is too large to open as it fills the entire screen. If it is then change the button into just an image and remove the custom curser.

[rhodesa]

um...ok...i'm not sure how you would fit this into the logic without seeing everything...but here is an example using PHP/JavaScript properly:

 

<script>
function check_image_state(state){
            
   var state_set = state;
   var img = '<?php echo $image_src; ?>';
            
   if (state_set == "yes"){
      alert('Remove: <img border="0" src="../images/"'+img+'" />');
      return;       
   }
   else{
      alert('Normal: <a href="javascript:void();" onmouseup="show_image();"><img style="cursor: url(../images/magnifyzoom.cur)" border="0" src="../images/'+img+'" /></a>');
      return;       
   }
            
}
</script>

 

edit: by the sounds of it, you need the JS before you can figure out which one to use right? just make all your images non-clickable, then on page load, if the window is big enough, use JS to add the an onclick event to the images

[mark110384]

How do you use the non-clickable attribute I'm not that familiar with it, I've tried the following with no success.

 

document.getElementById('image_enlarge_button').disabled = true;

 

Thanks

[rhodesa]

a non-clickable image is just a normal image:

<img id="image_enlarge_button" border="0" src="../images/img.jpg" />

 

then you can make it clickable with:

document.getElementById('image_enlarge_button').onclick = show_image;

p.s. - onclick is almost the same as the onmouseup event, but it is more commonly used

 

if you want to style the image differently (like make the cursor change over it), create a CSS class:

<style type="text/css">
  #image_enlarge_button.clickable {
    cursor: pointer;
  }
</style>

then add the class with JavaScript:

document.getElementById('image_enlarge_button').className = 'clickable';

[mark110384]

Hey thanks for that I've nearly got it working although when you resize the browser, even though the maximized image can still fit in browser the custom cursor turns back into an arrow point (just a minor bug), does the browser render the cursor on load and can't revert between cursors on events such as window resize? I have the following for when the browser is large enough to show the full image

 

			
document.getElementById('image_enlarge_button').style.cursor = 'url(../images/magnifyzoom.cur)';

 

And when the browser is too small

 

document.getElementById('image_enlarge_button').style.cursor = 'pointer';

 

Thanks

[rhodesa]

not sure...i've never done custom cursors before...just used the build in ones