How can I resize an image on mouse hover using PHP with $_GET? I know that this can easily be done with css or js but I want to know how to do it with php. I don't want to upload a file either. So let's say I have html code with an <img> tag and an image, how can I use PHP or $_GET to resize that image on hover?
EDIT:
What i mean is to put the image between <a> tags and then when clicked it refreshes the page but adds the the name of the image to the url so then I could use $get to access and echo a style to resize it.
Resize question on Stack Overflow
PHP is server side and you would have to refresh your page to display a resized image on hover(although I'm not sure if you can implement action on hover without js) and if you don't want to refresh you need to use AJAX(and that requires Javascript)
Going off of your edit, are you looking for something like this?
<?php
if(isset($_GET['image'])){
echo "<img src={$_GET['image']} style='height: 100px; width: 100px;' />";
}
?>
<img src="image_name.jpg" />
Related
Optimization in terms of page speed and page size.
First method is showing the image as a background of a div instead of in an img tag:
<div style="background:url("image-url.jpeg") no-repeat;background-size:cover;max-width:350px;max-height:350px;display:block;width:100%;height:100%;"></div>
Second is the normal img tag way:
<img src="image-url.jpeg" width=350 height=350 alt="" />
Or anyone has a better way to display image.
Thank you.
*Disregarding SEO benefits
An answer here : https://buildawesomewebsites.com/html-img-vs-css-background-image/
Imo, I'll go with the img tag, but I'll improve your code : If you want to improve perfs, you could use 'srcset' attributes with your img tag : https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images and load smaller images for smaller devices.
In addition, you can use lazy load with img tag easily
I am building a blogging website and I am facing troubles when I try to upload a photo. I need the photo to be pasted in the webpage. I know that javascript can do that, but it only affects the current session of the webpage. I need to permanently embed that image into the webpage as a child of this div element, for example:
<div id="img-wrapper"></div>
Everything is OK with PHP file uploads. How can I do that with PHP?
I assume its not an advisable solution as it increases the page size, but you can do this in the following manner:-
Some examples:
HTML:
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
CSS:
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
Here is a sample code
https://jsfiddle.net/casiano/xadvz/
For an online image to base 64 encode Click here
Hi I would like to give my clients who use a CMS for their website the ability to add their own background image. My CMS doesn't allow clients to edit the background-image directly so I would like to enable them to do it by using some php or other script. I would like them to be able to upload an img as normal (this image will be hidden from view on the webpage but will be visible in the CMS) and then use the script to take the img src and put it into the background-image:url('...');
Here is my code:
<div id="maincontentcontainer" style="background-image:url('...');background-size:100%;background- attachment:fixed;">
<img src="..." alt=""/>
Looking forward to any answers, thanks!
The js part, as I assume that's what you're asking for, is quite simple. You'll have to make sure your CSS is there to make sure it's not visible though. Also assuming jQuery...
var $image = $('.uploaded-image'),
src = $image.attr('src');
$image.remove();
$('#maincontentcontainer').css('background-image', 'url('+src+')');
Fiddle: http://jsfiddle.net/61znv2a3/
i am displaying an image usign readfile() function of php
HMTL:
<img src='image.php?id=232'/>
PHP: image.php
<?php
$id=$_GET["id"];
if(image_view_allow($id)){
$path=get_image_path($id);
readfile($path);
}else{
readfile("images/not_allow.png");
}
image_view_allow and get_image_path is two that i have defined to check validation and get path
I am doing this because i want show image only to the allow person.
Does this affect speed of downloading an image ?
what is normal(means direct path in src attribute of img tag) or trick that is shown above?
Just loading an image probably same,but it is always better if you handle images with php, because when you resize image with php you load the needed size. But with html you load the bigger size than you need and resize.
first -> Does this affect speed of downloading an image ?
answer: no, because when the page is loaded, the php code is already translated to html before page is loaded in the borwser.
second -> what is normal(means direct path in src attribute of img tag) or trick that is shown above?
answer: both are same as both involve php code. When code executes in either way it will enter the source of the image in the image tag.
I am trying to create a function where the user can click an image and a bigger one will load in a small popup window. I already have the bigger image in the system so it merely needs to load the image but in a window the right size!
Any ideas how I can achieve this?
Thanks.
You might want to look into using one of many js lightbox solutions
http://leandrovieira.com/projects/jquery/lightbox/ for example
Look into window.open. That will let you open a new window of a specified height and width, you just need to do something like:
window.open("<?php echo $url; ?>", "_blank",
"height=<?php echo $height;?> width=<?php echo $width; ?>")
You can get the image size in PHP with getimagesize
I created a responsive javascript only lightbox (no jquery needed) where you can pass links to the bigger image. So your thumbnail HTML should look like this, where your thumbnail-picture goes into the src attribute and the link to the bigger picture goes into the data-jslghtbx attribute:
<img class="jslghtbx-thmb" src="img/lightbox/thumbnail-picture.jpg" alt="" data-jslghtbx="img/big-picture.jpg">
You can also use the gallery function via the data-jslghtbx-group attribute to show multiple pictures, but be sure to hide all image elements (except the thumbnail which triggers the lightbox) via display: none;. Visit github for full documentation. Hope this helps!