Fading image inside a div

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>

--------------Solutions-------------

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.

Category:javascript Time:2009-06-24 Views:1

Related post

  • fading elements inside a div with cycle 2010-08-28

    I've a div like this: <div id="fade"> <p> A </p> <p> B </p> <p> C </p> <p> D </p> <p> E </p> </div> I want to fade every letter in that div, and the cycle should only repeat once

  • Add an Id to a background-image inside a div 2011-03-02

    I am trying to add an id to a background image that is inside a div in order to have it fade in on load. <div class="thumbnail" style="background-image:url(images/bracelets/1/002.png,); width:356px; height:265px;"><a id="thumbnail-btn" href=

  • Replace text inside a DIV element with Prototype.js 2008-09-23

    I need to set the text within a DIV element dynamically. What is the best, browser safe approach? I have prototypejs and scriptaculous available. <div id="panel"> <div id="field_name">TEXT GOES HERE</div> </div> Here's what th

  • Keeping an floated image inside the div with CSS 2008-12-15

    I'm having this problem, same as ever, but never try to find the right solution code: <div id="ListOfTextAndPhotos"> <div style="border-bottom: solid 1px silver;"> <img src="photo.jpg" style="float: left"> Some text about the photo

  • Rotate image clockwise or anticlockwise inside a div using javascript 2009-06-09

    HI, Is there a way by which I can rotate an image inside a div clockwise or anticlockwise. I have a main fixed width div[overflow set to hidden] with images loaded from database. There is a scroll bar for showing the images inside the div. When image

  • In JS, how can I get the mouse coordinates inside a DIV? 2009-06-16

    In JS, how can I get the mouse coordinates inside a DIV? if I use event.pageX, it will only work if the DIV is at the top left corner of the page... otherwise, I have to know the position of the DIV in the page and subtract event.pageX from that. Thi

  • Different tooltip onmouseover on div and an image inside the div 2009-07-24

    I'm having an image inside a div. I want to show tooltip1 on mouseover div and tooltip2 onmouseover image inside the div. How to acheive this? <div id="_div1" runat="server"> <ul> <li class="right"> <asp:Image ID="img1" runat="se

  • jQuery selecting and filtering elements inside a div 2009-07-27

    I have a problem with selecting and filtering elements inside a div. HTML : <div id="wrapper"> <input type="text" value="you can edit me"> <input type="button" value="click me"> </div> jQuery : $("#wrapper").children().click(f

  • How to implement minimized view of a form inside a div with jQuery? 2009-08-25

    By default shows a minimized view inside a div, when user click on the div,the form pop up for user to edit. How to implement this? Or is there a ready plugin to achieve this with jQuery? --------------Solutions------------- Just create it and have i

  • Height of content inside a div 2009-09-22

    The content of a page is loaded inside a div: <div id="content">Some content</div> The div has a fixed height and uses scroll in case of overflow. I want to adjust the height (make it smaller) of the div onload if the content does not nee

  • Showing a cursor inside a DIV 2009-09-27

    I'm trying to make a fancy editor online, and I need to give the user the impression that he's typing directly inside a DIV / SPAN / some other element. I can capture the keystrokes by routing them to a hidden text box, yes, but I want to know how to

  • ASP.NET MVC.NET JQueryUI datepicker inside a div loaded/updated with ajax.actionlink 2009-09-29

    I'm trying to incorporate jqueryUI's datepicker inside a partialview like this: <% using (Ajax.BeginForm("/EditData", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "div1" })) {%> Date: <%= Html.TextBox("date", String.Format("{0:g}"

  • how to find if there are no divs present inside the DIv droping_area in JQUery 2009-10-01

    how to find if there are no divs present inside the DIv droping_area in JQUery like <div id="droping_area"> <div id='a'></div> <div id='b'></div> <div id='c'></div> </div> --------------Solutions-------

  • get id of a cell in a table inside a div (JS and HTML) 2009-10-24

    Hi I have a php script that draws a table subject to certain conditions. When the table is drawn it is inside a div called ‘window’ and the table is called ‘visi’ I then want to use the code below to get the id’s of each cell in the table. I can get

  • prevent default for all links inside a div using jquery 2009-11-04

    I have a div that looks like: <div id="blah"> <a href="#" >hello</a> <a href="#"> world</a></div> I want to disable all the links inside this div using e.preventDefault(); How can I select all href tags that are in

  • clear all divs' contents inside a div 2009-11-09

    I have a div <div id="masterdiv"> in which i will have several child divs. For example: <div id="masterdiv"> <div id="childdiv1" /> <div id="childdiv2" /> <div id="childdiv3" /> </div> I need to clear the contents

  • CSS: how to get two floating divs inside another div 2009-11-24

    I'm sure this a common problem, but couldn't find the exact answer :) I have two divs inside another div. I want the two divs to be on the same level, one floating to the left and the other to the right. But they won't get inside the parent div unles

  • disable click event for all links except the links inside a div 2009-11-25

    I have a page with some links inside a div and some outside that div. <div id="navigation"> <ul> <li> <a href="/Home/Index">Home</a></li> <li> <a href="/Home/contactus">Contact Us</a></li>

  • query list of dijit checkboxes inside a DIV 2009-12-11

    I need to find all dijit.form.CheckBox widgets inside a DIV and enable/disable them all. I am not able to form appropriate query for it. I tried dojo.query("[dojoType~=dijit.form.CheckBox]") but it gives me an empty list. What is the appropriate quer

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 0.725 (s). 13 q(s)