I am trying to get it so when the mouse moves over the div it fades the image inside
function clickimage($imageid){
$("#image_"+imageid).hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.6);
});
}
<div id='images_$imageid'>
<a href='?tg=photos&photo=$imageid' onmouseover=\"javascript:clickimage('$imageid')\">
<img src='users/$ptgid/images/$iimg' width='100' height='100'/>
</a>
</div>
You would want to set the binding when the document loads, not every time the mouse hovers over the image. Also, I would create a class so that you can initialize the hover on each item
$(document).ready(function() {
$(".image-hover-class").hover(function(){
$(this).find('img').fadeTo("slow", 1.0);
},function(){
$(this).find('img').fadeTo("slow", 0.6);
});
});
For the link, you would do something like this:
<a class="image-hover-class" href="?tg=photos&photo=$imageid" \>
<img src='users/$ptgid/images/$iimg' width='100' height='100'/>
</a>
If you want to do the hover on the div
, you could do this instead (but I recommend doing the hover on the <a>
tag):
$(document).ready(function() {
$(".image-hover-class").hover(function(){
$(this).find('a img').fadeTo("slow", 1.0);
},function(){
$(this).find('a img').fadeTo("slow", 0.6);
});
});
For the div, you would do something like this:
<div class="image-hover-class">
<a href="?tg=photos&photo=$imageid" \>
<img src='users/$ptgid/images/$iimg' width='100' height='100'/>
</a>
</div>
i dont see in the image element id attribute.
when you do it
$("#image_"+imageid)
its try to find this id, add
id=image_".$imageid." to img
This can be done just using css. I wrote a tutorial here:
http://www.ozzu.com/html-tutorials/tutorial-creating-hover-effect-elements-using-css-t97597.html
Just include your orignal image and a "faded" image.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.