+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Coding (https://hackforums.net/forumdisplay.php?fid=151)
+---- Forum: Web Development (https://hackforums.net/forumdisplay.php?fid=183)
+---- Thread: [PHP] How to make an image when mouse cursor is above it to be like clicked ? (/showthread.php?tid=1518273)
How to make an image when mouse cursor is above it to be like clicked ? - CacaoBux - Jul 24, 2011
Hi,
As the title says how I can make an image and when someone puts his mouse cursor above the image, to be like clicked ... I hope you got what I mean.
Thank you a lot in advance.
Kind Regards.
* - Novalty - Jul 24, 2011
So you want an image to appear when a user rolls over a certain object on your page?
If so I believe javascript or something of the like is for you. PHP is a server sided scripting language so it can't change anything on a page without having to refresh the whole page first, unless you were to use AJAX or something, but that's besides the point.
Maybe post this again in the web development section and you should get some good replies :)
* - Sezmic - Jul 24, 2011
Code
#examplediv:hover {
background-image: url('exampleimage.extension');
cursor: pointer;
}CSS ftw.
* - Sudo - Jul 24, 2011
(Jul 24, 2011 11:34 AM)Sezmic Wrote:Code#examplediv:hover {
background-image: url('exampleimage.extension');
cursor: pointer;
}
CSS ftw.
This. CSS is your best bet.
* - ♣C∅DΣZ♣ - Jul 24, 2011
idk use javascript?
<input type="image" src='example.jpg' onmouseover='this.src='new.pic'' onmouseout='example.jpg'>
Something like this?
* - ndee - Jul 24, 2011
This isn't a PHP-related question, obviously.
However, I always tend to use jQuery instead of CSS wherever I can.
I'm not really sure what you mean in your question. I'm gonna go with the obvious explanation and assume that you want to show an image whenever someone clicks on a link or whatever.
Code
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img#img").hide();
$("a.showimage").click(function() {
$("img#img").show();
});
});
</script>
<a href='#' class='showimage'>Show Image</a>
<img id="img" src="whatever.jpg" />* - Gene - Jul 24, 2011
♣C∅DΣZ♣'s solution is the best and easiest, other guys are making it too complex.
You will just need to make an image from the original picture that looks as if it is "clicked" so like make it opaque and maybe add a contour so it seems as if it is a button that is being pushed down.
I suggest you look at: http://www.webdevelopersnotes.com/tutorials/javascript/changing_images_on_mouseover_mouseout_javascript.php3
* - CaptainFreak - Jul 25, 2011
i believe i saw a good tut on it! i can pm you the link if i find it again