mark103 Posted March 7, 2013 Share Posted March 7, 2013 Hi guys,I need your help, I want to create a filename for the image on the webpage and I also want to out how I can check on the if statement to see if the image on the webpage is exist. $image1 = <div id="image1" style="position:absolute; overflow:hidden; left:415px; top:157px; width:114px; height:81px; z-index:0"><img src="/images/tvguide_blue.jpg" alt="" title="" border=0 width=114 height=81></div> On the webpage, it display as "$image =". Does anyone know how i can create a function for a filename so I can write something like this: if ($image = exist) { // do something } Does anyone have any idea? thanks in advance Quote Link to comment Share on other sites More sharing options...
AyKay47 Posted March 7, 2013 Share Posted March 7, 2013 Are you sure that you are working in a php file and not an html file? Store the path to the file in a variable and check if the file exists on the server. $file = "/path/to/img.jpg"; if(file_exists($file)) { echo "The file $file exists."; } else { echo "The file $file does not exist."; } Quote Link to comment Share on other sites More sharing options...
mark103 Posted March 8, 2013 Author Share Posted March 8, 2013 yes i am using both of them at the same time. I tried to input the <?php to work under <script>, but when I press on the keyboard up and down buttons, it doesn't work. If I remove the <?php, the keyboard buttons will start to work here is the code: <html> <body> <style type="text/css"> body {background:url('/images/blue_background.jpg') no-repeat center center fixed;} </style> <div id="image1" style="position:absolute; overflow:hidden; left:415px; top:157px; width:114px; height:81px; z-index:0"><img src="/images/guide_blue.jpg" alt="" title="" border=0 width=114 height=81></div> <script> <?php $file = "/images/guide_blue.jpg"; document.onkeydown = checkKey; function checkKey(e) { e = e || window.event; if (e.keyCode == '38') { window.alert('up arrow') } else if (e.keyCode == '40') { window.alert('down arrow') } } ?> </script> </body> </html> Any idea how i can get the php to work with javascript?? Quote Link to comment Share on other sites More sharing options...
AyKay47 Posted March 8, 2013 Share Posted March 8, 2013 Since javascript is executed by the client and PHP is executed by the server, communication between the two is tricky. In my opinion, using AJAX is the best method to communicate the two. What is your logic for using javascript and PHP together in order to determine if a file exists? Quote Link to comment Share on other sites More sharing options...
mark103 Posted March 8, 2013 Author Share Posted March 8, 2013 I am using javascript so that I can press on the keyboard buttons such as up and down arrow buttons and i also want to use php to check on the image if the image has a file called "blue_image" then change it. I hope this make a sense why i want to use two languages at the same time. Quote Link to comment Share on other sites More sharing options...
AyKay47 Posted March 8, 2013 Share Posted March 8, 2013 I'm not quite following. What does the javascript have to do with the image? Quote Link to comment Share on other sites More sharing options...
mark103 Posted March 8, 2013 Author Share Posted March 8, 2013 i want to change the image from blue to yellow when i press on the keyboard. do you have any idea? Quote Link to comment Share on other sites More sharing options...
AyKay47 Posted March 8, 2013 Share Posted March 8, 2013 I see, I believe that you need only javascript if I am understanding your logic correctly. You can change the image source using an event listener and some checks. Since both of these files will be hard coded, I do not understand why you would nee to check if they exist. the below example will assume that you have set the image id to "img". function checkKey(e) { e = e || window.event; if(e.keyCode == '38') { document.getElementById("img").src = "yellow.jpg"; } if(e.keyCode == '40') { document.getElementById("img").src = "blue.jpg"; } } Quote Link to comment Share on other sites More sharing options...
mark103 Posted March 8, 2013 Author Share Posted March 8, 2013 when i press on up and down keyboard button, it doesn't change the image. Quote Link to comment Share on other sites More sharing options...
AyKay47 Posted March 8, 2013 Share Posted March 8, 2013 Did you set the image id attribute to "img"? Post the updated code if you are still having issues. Quote Link to comment Share on other sites More sharing options...
mark103 Posted March 8, 2013 Author Share Posted March 8, 2013 I think I have found the code that will change the image, but i have two problems right here. When I press on the up arrow button, it change the image, but when I press on the up button again, it doesn't change the image. I think the loop did not get pass it. Can you help? And do you know how i can resize the image using with this code? document.getElementById("image1").innerHTML="<img src='"+path1+"'/>"; here is the update code: function checkKey(e) { e = e || window.event; if(e.keyCode == '38') { if (document.getElementById("image1").src="/images/image_blue.jpg") { window.alert('back to yellow') var path ="/images/image_yellow.jpg"; document.getElementById("image1").innerHTML="<img src='"+path+"'/>"; } else { if (document.getElementById("image1").src="/images/tvguide_yellow.jpg") { window.alert('back to blue') var path1 ="/images/image_blue.jpg"; document.getElementById("image1").innerHTML="<img src='"+path1+"'/>"; } } } thanks in advance Quote Link to comment Share on other sites More sharing options...
AyKay47 Posted March 8, 2013 Share Posted March 8, 2013 (edited) You should be using the comparison == operator instead of the assignment = operator in the if statements. You also have some extra code that is not needed: function checkKey(e) { e = e || window.event; if(e.keyCode == '38') { if (document.getElementById("image1").src == "/images/image_blue.jpg") { window.alert('back to yellow') document.getElementById("image1").src = "/images/image_yellow.jpg"; } elseif(document.getElementByID("image1").src == "/images/image_yellow.jpg") window.alert('back to blue') document.getElementById("image1").src = "/images/image_blue.jpg"; } } As to the resizing question, use the height and width properties of the style object: document.getElementById("image1").style.height = '100px'; Edited March 8, 2013 by AyKay47 Quote Link to comment Share on other sites More sharing options...
mark103 Posted March 8, 2013 Author Share Posted March 8, 2013 that don't work, you cant use the comparison == operator instead of the assignment = operator. I have tried it and it don't work. Quote Link to comment Share on other sites More sharing options...
AyKay47 Posted March 8, 2013 Share Posted March 8, 2013 that don't work, you cant use the comparison == operator instead of the assignment = operator. I have tried it and it don't work. It does work if everything is implemented correctly. Post the updated code along with any errors you are receiving. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.